workspace/code/base-project/base-app/test2.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>共享空间</title>
  <style>
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
      background: #f6f6f7;
      color: #111;
    }

    .page {
      max-width: 420px;
      margin: 0 auto;
      padding: 16px;
      background: #fff;
      min-height: 100vh;
      box-sizing: border-box;
    }

    h1 {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 20px;
    }

    /* 按钮 */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      padding: 0 14px;
      border-radius: 8px;
      background: #111;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      margin-top: 12px;
      border: 1px solid #111;
    }

    .btn-outline {
      background: transparent;
      color: #111;
    }

    .input-box {
      width: 100%;
      padding: 10px;
      border-radius: 6px;
      border: 1px solid #ddd;
      margin-top: 12px;
      font-size: 14px;
    }

    .list-item {
      display: flex;
      justify-content: space-between;
      padding: 14px 0;
      border-bottom: 1px solid #eee;
    }

    .switcher {
      display: flex;
      gap: 12px;
      margin-bottom: 20px;
    }

    .switcher button {
      flex: 1;
      height: 36px;
      border-radius: 6px;
      font-size: 14px;
      cursor: pointer;
      border: 1px solid #ccc;
      background: #fafafa;
    }

    .switcher button.active {
      background: #111;
      color: #fff;
      border-color: #111;
    }

    /* 弹窗 */
    .modal-mask {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.45);
      display: none;
      align-items: center;
      justify-content: center;
    }

    .modal {
      background: #fff;
      padding: 20px;
      width: 100%;
      max-width: 360px;
      text-align: center;
      border: 1px solid #ddd;
      border-radius: 0;
    }

    .qr-box {
      width: 180px;
      height: 180px;
      background: #eee;
      margin: 16px auto;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      font-size: 12px;
      color: #666;
    }
  </style>
</head>
<body>

<div class="page">
  <h1>共享空间（预览）</h1>

  <div class="switcher">
    <button id="btnNotJoined" class="active" onclick="showPage('not')">未加入</button>
    <button id="btnJoined" onclick="showPage('yes')">已加入</button>
  </div>

  <!-- 未加入 -->
  <div id="notJoined">
    <p>你尚未加入共享空间，你可以创建自己的空间或加入他人的。</p>

    <div class="btn" onclick="openInviteModal()">生成邀请码</div>
    <div class="btn-outline btn" onclick="openScanModal()">扫码加入</div>

    <div class="btn btn-outline" onclick="toggleJoinInput()">输入邀请码加入</div>

    <input id="inviteInput" type="text" class="input-box" placeholder="邀请码" style="display:none;" />
    <div id="joinBtn" class="btn" style="display:none;">加入</div>
  </div>

  <!-- 已加入 -->
  <div id="joined" style="display:none;">
    <p>你已加入共享空间，可查看成员、权限和邀请他人加入。</p>

    <h3 style="margin-top:20px; font-size:16px; font-weight:600;">成员列表</h3>

    <div class="list-item"><span>张三</span><span>管理员</span></div>
    <div class="list-item"><span>李四</span><span>成员</span></div>
    <div class="list-item"><span>王五</span><span>成员</span></div>

    <div class="btn" onclick="openInviteModal()">邀请新成员</div>
  </div>
</div>

<!-- 邀请二维码弹窗 -->
<div id="inviteModal" class="modal-mask">
  <div class="modal">
    <h3>邀请码 / 二维码</h3>
    <div id="qrBox" class="qr-box">二维码生成中…</div>
    <div class="btn" onclick="closeInviteModal()">关闭</div>
  </div>
</div>

<!-- 扫码加入弹窗（假装相机界面） -->
<div id="scanModal" class="modal-mask">
  <div class="modal">
    <h3>扫码加入</h3>
    <div class="qr-box">[ 相机画面模拟区域 ]</div>
    <p style="font-size:12px;color:#666;">打开摄像头并扫描共享空间二维码</p>
    <div class="btn" onclick="closeScanModal()">关闭</div>
  </div>
</div>

<script>
  function showPage(type) {
    const not = document.getElementById("notJoined");
    const yes = document.getElementById("joined");
    const btnNot = document.getElementById("btnNotJoined");
    const btnYes = document.getElementById("btnJoined");

    if (type === 'not') {
      not.style.display = 'block';
      yes.style.display = 'none';
      btnNot.classList.add('active');
      btnYes.classList.remove('active');
    } else {
      not.style.display = 'none';
      yes.style.display = 'block';
      btnYes.classList.add('active');
      btnNot.classList.remove('active');
    }
  }

  // ----------------- 邀请码 / 二维码弹窗 -----------------
  function openInviteModal() {
    const modal = document.getElementById('inviteModal');
    const qr = document.getElementById('qrBox');
    const code = Math.random().toString(36).substring(2, 8).toUpperCase();
    qr.innerHTML = `二维码：${code}`;
    modal.style.display = 'flex';
  }
  function closeInviteModal() {
    document.getElementById('inviteModal').style.display = 'none';
  }

  // ----------------- 扫码加入弹窗 -----------------
  function openScanModal() {
    document.getElementById('scanModal').style.display = 'flex';
  }
  function closeScanModal() {
    document.getElementById('scanModal').style.display = 'none';
  }

  function toggleJoinInput() {
    const input = document.getElementById("inviteInput");
    const btn = document.getElementById("joinBtn");
    const show = input.style.display === 'none';
    input.style.display = show ? 'block' : 'none';
    btn.style.display = show ? 'block' : 'none';
  }
</script>

</body>
</html>