nkkj
/
yss-project


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
							<!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, Oxygen, Ubuntu, Cantarell, 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;
      padding: 40px;
      max-width: 600px;
      width: 100%;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    }

    h1 {
      font-size: 28px;
      font-weight: 700;
      color: #222428;
      margin-bottom: 12px;
      text-align: center;
    }

    .subtitle {
      font-size: 14px;
      color: #92949c;
      text-align: center;
      margin-bottom: 32px;
    }

    .section {
      margin-bottom: 32px;
    }

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

    .section-title svg {
      width: 20px;
      height: 20px;
      fill: #667eea;
    }

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

    label {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: #222428;
      margin-bottom: 8px;
    }

    input {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      font-size: 14px;
      color: #222428;
      outline: none;
      transition: all 0.3s;
    }

    input:focus {
      border-color: #667eea;
      box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .hint {
      font-size: 12px;
      color: #92949c;
      margin-top: 6px;
    }

    .btn-group {
      display: flex;
      gap: 12px;
    }

    button {
      flex: 1;
      padding: 14px 24px;
      border: none;
      border-radius: 12px;
      font-size: 15px;
      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;
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
    }

    .btn-primary:active {
      transform: translateY(0);
    }

    .btn-secondary {
      background: #f4f5f8;
      color: #222428;
    }

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

    .info-box {
      background: rgba(61, 194, 255, 0.1);
      border-left: 4px solid #3dc2ff;
      padding: 16px;
      border-radius: 8px;
      margin-top: 24px;
    }

    .info-box-title {
      font-size: 14px;
      font-weight: 600;
      color: #3dc2ff;
      margin-bottom: 8px;
    }

    .info-box-content {
      font-size: 13px;
      color: #4b5563;
      line-height: 1.6;
    }

    .url-display {
      background: #f9fafb;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      padding: 12px 16px;
      font-size: 13px;
      color: #667eea;
      word-break: break-all;
      margin-top: 12px;
      font-family: 'Courier New', monospace;
    }

    @media (max-width: 640px) {
      .container {
        padding: 24px;
      }

      h1 {
        font-size: 24px;
      }

      .btn-group {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🎯 会话激活页面测试工具</h1>
    <p class="subtitle">快速访问和测试会话激活功能</p>

    <div class="section">
      <div class="section-title">
        <svg viewBox="0 0 512 512">
          <path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm0 62.5a52.5 52.5 0 1152.5 52.5A52.5 52.5 0 01256 110.5zm80 291.5H176a16 16 0 010-32h28v-88h-16a16 16 0 010-32h40a16 16 0 0116 16v104h28a16 16 0 010 32z"/>
        </svg>
        <span>配置参数</span>
      </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">支持Parse objectId或企微chat_id（以wr开头）</p>
      </div>
    </div>

    <div class="btn-group">
      <button class="btn-primary" onclick="openChatActivation()">
        <svg width="20" height="20" viewBox="0 0 512 512">
          <path fill="white" d="M408 64H104a56.16 56.16 0 00-56 56v192a56.16 56.16 0 0056 56h40v80l93.72-78.14a8 8 0 015.13-1.86H408a56.16 56.16 0 0056-56V120a56.16 56.16 0 00-56-56z"/>
        </svg>
        <span>打开会话激活页面</span>
      </button>
      <button class="btn-secondary" onclick="copyUrl()">
        <svg width="18" height="18" viewBox="0 0 512 512">
          <rect x="128" y="128" width="336" height="336" rx="57" ry="57" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/>
          <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M383.5 128l.5-24a56.16 56.16 0 00-56-56H112a64.19 64.19 0 00-64 64v216a56.16 56.16 0 0056 56h24"/>
        </svg>
        <span>复制URL</span>
      </button>
    </div>

    <div class="info-box">
      <div class="info-box-title">📋 功能说明</div>
      <div class="info-box-content">
        <strong>会话激活页面包含以下功能：</strong><br>
        • 📊 回复信息汇总 - 查看往期聊天记录<br>
        • 🔗 入群方式 - 二维码、链接、自动介绍文案<br>
        • 🤖 AI回复建议 - 针对技术人员不擅长沟通的问题<br>
        • ⚠️ 未回复提醒 - 超过10分钟未回复自动提醒<br>
        • 🎨 精美UI设计 - 支持移动端适配<br><br>
        <strong>💡 支持两种ID类型：</strong><br>
        • Parse objectId（10位字符）<br>
        • 企微chat_id（以wr开头的长ID）
      </div>
      <div class="url-display" id="urlDisplay">
        URL将在这里显示...
      </div>
    </div>
  </div>

  <script>
    function getUrl() {
      const cid = document.getElementById('cid').value.trim();
      const chatId = document.getElementById('chatId').value.trim();
      
      if (!cid || !chatId) {
        alert('请填写完整的参数！');
        return null;
      }

      const baseUrl = window.location.origin;
      return `${baseUrl}/wxwork/${cid}/chat-activation/${chatId}`;
    }

    function updateUrlDisplay() {
      const url = getUrl();
      if (url) {
        document.getElementById('urlDisplay').textContent = url;
      }
    }

    function openChatActivation() {
      const url = getUrl();
      if (url) {
        console.log('🚀 打开会话激活页面:', url);
        window.open(url, '_blank');
      }
    }

    function copyUrl() {
      const url = getUrl();
      if (url) {
        navigator.clipboard.writeText(url).then(() => {
          alert('✅ URL已复制到剪贴板！');
        }).catch(() => {
          alert('❌ 复制失败，请手动复制');
        });
      }
    }

    // 监听输入变化
    document.getElementById('cid').addEventListener('input', updateUrlDisplay);
    document.getElementById('chatId').addEventListener('input', updateUrlDisplay);

    // 初始化显示
    updateUrlDisplay();
  </script>
</body>
</html>