nkkj
/
yss-project


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398
							<!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>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .container {
      background: white;
      border-radius: 20px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      padding: 40px;
      max-width: 600px;
      width: 100%;
    }

    .header {
      text-align: center;
      margin-bottom: 30px;
    }

    .header h1 {
      font-size: 28px;
      color: #333;
      margin-bottom: 10px;
    }

    .header p {
      color: #666;
      font-size: 14px;
    }

    .section {
      margin-bottom: 30px;
    }

    .section-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-group label {
      display: block;
      font-size: 14px;
      font-weight: 500;
      color: #555;
      margin-bottom: 8px;
    }

    .form-group input {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      font-size: 14px;
      transition: all 0.3s;
    }

    .form-group input:focus {
      outline: none;
      border-color: #667eea;
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .hint {
      font-size: 12px;
      color: #999;
      margin-top: 5px;
    }

    .btn-group {
      display: flex;
      gap: 10px;
      margin-top: 20px;
    }

    .btn {
      flex: 1;
      padding: 14px 24px;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .btn-primary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
    }

    .btn-secondary {
      background: #f5f5f5;
      color: #333;
    }

    .btn-secondary:hover {
      background: #e0e0e0;
    }

    .info-box {
      background: #f8f9fa;
      border-left: 4px solid #667eea;
      padding: 15px;
      border-radius: 8px;
      margin-top: 20px;
    }

    .info-box-title {
      font-weight: 600;
      color: #333;
      margin-bottom: 10px;
    }

    .info-box-content {
      font-size: 14px;
      color: #666;
      line-height: 1.6;
    }

    .url-display {
      background: #fff;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      padding: 15px;
      margin-top: 15px;
      font-family: 'Courier New', monospace;
      font-size: 13px;
      color: #667eea;
      word-break: break-all;
      cursor: pointer;
      transition: all 0.3s;
    }

    .url-display:hover {
      border-color: #667eea;
      background: #f8f9fa;
    }

    .method-card {
      background: white;
      border: 2px solid #e0e0e0;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 15px;
      transition: all 0.3s;
    }

    .method-card:hover {
      border-color: #667eea;
      box-shadow: 0 5px 15px rgba(102, 126, 234, 0.1);
    }

    .method-card h3 {
      font-size: 16px;
      color: #333;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .method-card p {
      font-size: 14px;
      color: #666;
      line-height: 1.6;
    }

    .badge {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 600;
    }

    .badge-recommended {
      background: #4caf50;
      color: white;
    }

    .badge-test {
      background: #ff9800;
      color: white;
    }

    @media (max-width: 600px) {
      .container {
        padding: 30px 20px;
      }

      .btn-group {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>🎯 会话激活页面测试</h1>
      <p>企微侧边栏集成版 - 支持自动获取群聊上下文</p>
    </div>

    <div class="section">
      <div class="section-title">
        <svg width="20" height="20" viewBox="0 0 512 512" fill="currentColor">
          <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"/>
        </svg>
        访问方式
      </div>

      <div class="method-card">
        <h3>
          <span class="badge badge-recommended">推荐</span>
          方式一：企微侧边栏打开
        </h3>
        <p>
          在企微群聊中打开侧边栏，选择"会话激活"工具。<br>
          系统会自动获取当前群聊ID，无需手动传参。<br><br>
          <strong>URL:</strong> <code>/wxwork/:cid/chat-activation</code>
        </p>
      </div>

      <div class="method-card">
        <h3>
          <span class="badge badge-test">测试</span>
          方式二：直接URL访问
        </h3>
        <p>
          在浏览器中直接访问，需要手动传递群聊ID。<br>
          适用于开发测试，不推荐生产环境使用。<br><br>
          <strong>URL:</strong> <code>/wxwork/:cid/chat-activation/:chatId</code>
        </p>
      </div>
    </div>

    <div class="section">
      <div class="section-title">
        <svg width="20" height="20" viewBox="0 0 512 512" fill="currentColor">
          <path d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"/>
        </svg>
        测试参数配置
      </div>

      <div class="form-group">
        <label for="cid">公司ID (cid)</label>
        <input 
          type="text" 
          id="cid" 
          placeholder="例如: cDL6R1hgSi"
          value="cDL6R1hgSi"
        />
        <p class="hint">企业微信公司标识符</p>
      </div>

      <div class="form-group">
        <label for="chatId">群聊ID (chatId) - 可选</label>
        <input 
          type="text" 
          id="chatId" 
          placeholder="例如: wrgKCxBwAALwOgUC9jMwdHiVTFmyXs_A"
          value="wrgKCxBwAALwOgUC9jMwdHiVTFmyXs_A"
        />
        <p class="hint">企微chat_id或Parse objectId（从侧边栏打开时无需填写）</p>
      </div>
    </div>

    <div class="btn-group">
      <button class="btn btn-primary" onclick="openWithoutChatId()">
        <svg width="20" height="20" viewBox="0 0 512 512" fill="currentColor">
          <path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 448c-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200 110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200zm107.351-101.064c-9.614 9.712-45.53 41.396-104.065 41.396-82.43 0-140.484-61.425-140.484-141.567 0-79.152 60.275-139.401 139.762-139.401 55.531 0 88.738 26.62 97.593 34.779a11.965 11.965 0 0 1 1.936 15.322l-18.155 28.113c-3.841 5.95-11.966 7.282-17.499 2.921-8.595-6.775-31.814-22.538-61.708-22.538-48.303 0-77.916 35.33-77.916 80.082 0 41.589 26.888 83.692 78.277 83.692 32.657 0 56.843-19.039 65.726-27.225 5.27-4.857 13.596-4.039 17.82 1.738l19.865 27.17a11.947 11.947 0 0 1-1.152 15.518z"/>
        </svg>
        侧边栏模式（无chatId）
      </button>
      <button class="btn btn-secondary" onclick="openWithChatId()">
        <svg width="20" height="20" viewBox="0 0 512 512" fill="currentColor">
          <path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>
        </svg>
        直接URL（带chatId）
      </button>
    </div>

    <div class="info-box">
      <div class="info-box-title">💡 使用提示</div>
      <div class="info-box-content">
        <strong>侧边栏模式（推荐）:</strong><br>
        • 需要在企微侧边栏中打开<br>
        • 自动获取当前群聊ID<br>
        • 自动同步群聊数据<br>
        • 最佳用户体验<br><br>
        
        <strong>直接URL模式（测试）:</strong><br>
        • 可以在浏览器中直接访问<br>
        • 需要手动提供群聊ID<br>
        • 适用于开发调试<br>
        • 可能无法获取企微上下文
      </div>
      <div class="url-display" id="urlDisplay">
        URL将在这里显示...
      </div>
    </div>
  </div>

  <script>
    function openWithoutChatId() {
      const cid = document.getElementById('cid').value.trim();
      
      if (!cid) {
        alert('请输入公司ID (cid)');
        return;
      }

      const url = `http://localhost:4200/wxwork/${cid}/chat-activation`;
      document.getElementById('urlDisplay').textContent = url;
      
      console.log('🚀 打开侧边栏模式:', url);
      window.open(url, '_blank');
    }

    function openWithChatId() {
      const cid = document.getElementById('cid').value.trim();
      const chatId = document.getElementById('chatId').value.trim();
      
      if (!cid) {
        alert('请输入公司ID (cid)');
        return;
      }

      if (!chatId) {
        alert('请输入群聊ID (chatId)');
        return;
      }

      const url = `http://localhost:4200/wxwork/${cid}/chat-activation/${chatId}`;
      document.getElementById('urlDisplay').textContent = url;
      
      console.log('🚀 打开直接URL模式:', url);
      window.open(url, '_blank');
    }

    // 页面加载时显示默认URL
    window.addEventListener('load', () => {
      const cid = document.getElementById('cid').value.trim();
      const url = `http://localhost:4200/wxwork/${cid}/chat-activation`;
      document.getElementById('urlDisplay').textContent = `侧边栏模式: ${url}`;
    });

    // 点击URL复制到剪贴板
    document.getElementById('urlDisplay').addEventListener('click', function() {
      const text = this.textContent;
      navigator.clipboard.writeText(text).then(() => {
        const original = this.textContent;
        this.textContent = '✅ 已复制到剪贴板！';
        setTimeout(() => {
          this.textContent = original;
        }, 2000);
      });
    });
  </script>
</body>
</html>