GET-CHAT-ACTIVATION-TEST-URL.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>会话激活测试地址获取工具</title>
  7. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. box-sizing: border-box;
  12. }
  13. body {
  14. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  15. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  16. min-height: 100vh;
  17. display: flex;
  18. align-items: center;
  19. justify-content: center;
  20. padding: 20px;
  21. }
  22. .container {
  23. background: white;
  24. border-radius: 20px;
  25. box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  26. max-width: 800px;
  27. width: 100%;
  28. padding: 40px;
  29. }
  30. h1 {
  31. color: #333;
  32. margin-bottom: 10px;
  33. font-size: 28px;
  34. }
  35. .subtitle {
  36. color: #666;
  37. margin-bottom: 30px;
  38. font-size: 14px;
  39. }
  40. .info-box {
  41. background: #f8f9fa;
  42. border-left: 4px solid #667eea;
  43. padding: 15px;
  44. margin-bottom: 20px;
  45. border-radius: 4px;
  46. }
  47. .info-box h3 {
  48. color: #667eea;
  49. margin-bottom: 10px;
  50. font-size: 16px;
  51. }
  52. .info-box code {
  53. background: #e9ecef;
  54. padding: 2px 6px;
  55. border-radius: 3px;
  56. font-size: 13px;
  57. color: #495057;
  58. }
  59. .button-group {
  60. display: flex;
  61. gap: 10px;
  62. margin-bottom: 20px;
  63. flex-wrap: wrap;
  64. }
  65. button {
  66. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  67. color: white;
  68. border: none;
  69. padding: 12px 24px;
  70. border-radius: 8px;
  71. font-size: 14px;
  72. font-weight: 500;
  73. cursor: pointer;
  74. transition: transform 0.2s, box-shadow 0.2s;
  75. flex: 1;
  76. min-width: 200px;
  77. }
  78. button:hover {
  79. transform: translateY(-2px);
  80. box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  81. }
  82. button:active {
  83. transform: translateY(0);
  84. }
  85. button:disabled {
  86. opacity: 0.6;
  87. cursor: not-allowed;
  88. }
  89. button.secondary {
  90. background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  91. }
  92. button.success {
  93. background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  94. }
  95. .result {
  96. background: #f8f9fa;
  97. border-radius: 8px;
  98. padding: 20px;
  99. margin-top: 20px;
  100. display: none;
  101. }
  102. .result.show {
  103. display: block;
  104. }
  105. .result h3 {
  106. color: #333;
  107. margin-bottom: 15px;
  108. font-size: 18px;
  109. }
  110. .url-list {
  111. list-style: none;
  112. }
  113. .url-item {
  114. background: white;
  115. border: 1px solid #dee2e6;
  116. border-radius: 6px;
  117. padding: 15px;
  118. margin-bottom: 10px;
  119. transition: border-color 0.2s;
  120. }
  121. .url-item:hover {
  122. border-color: #667eea;
  123. }
  124. .url-item-header {
  125. display: flex;
  126. justify-content: space-between;
  127. align-items: center;
  128. margin-bottom: 8px;
  129. }
  130. .url-item-title {
  131. font-weight: 600;
  132. color: #333;
  133. font-size: 14px;
  134. }
  135. .url-item-badge {
  136. background: #e7f3ff;
  137. color: #0066cc;
  138. padding: 4px 8px;
  139. border-radius: 4px;
  140. font-size: 12px;
  141. }
  142. .url-item-info {
  143. color: #666;
  144. font-size: 13px;
  145. margin-bottom: 8px;
  146. }
  147. .url-item-link {
  148. background: #f8f9fa;
  149. padding: 10px;
  150. border-radius: 4px;
  151. font-family: 'Courier New', monospace;
  152. font-size: 12px;
  153. color: #495057;
  154. word-break: break-all;
  155. margin-bottom: 8px;
  156. }
  157. .url-item-actions {
  158. display: flex;
  159. gap: 8px;
  160. }
  161. .url-item-actions button {
  162. flex: 1;
  163. min-width: auto;
  164. padding: 8px 16px;
  165. font-size: 13px;
  166. }
  167. .loading {
  168. text-align: center;
  169. padding: 40px;
  170. color: #666;
  171. }
  172. .spinner {
  173. border: 3px solid #f3f3f3;
  174. border-top: 3px solid #667eea;
  175. border-radius: 50%;
  176. width: 40px;
  177. height: 40px;
  178. animation: spin 1s linear infinite;
  179. margin: 0 auto 20px;
  180. }
  181. @keyframes spin {
  182. 0% { transform: rotate(0deg); }
  183. 100% { transform: rotate(360deg); }
  184. }
  185. .error {
  186. background: #fff5f5;
  187. border-left: 4px solid #e53e3e;
  188. padding: 15px;
  189. border-radius: 4px;
  190. color: #c53030;
  191. margin-top: 20px;
  192. }
  193. .success-message {
  194. background: #f0fff4;
  195. border-left: 4px solid #38a169;
  196. padding: 15px;
  197. border-radius: 4px;
  198. color: #276749;
  199. margin-top: 20px;
  200. }
  201. </style>
  202. </head>
  203. <body>
  204. <div class="container">
  205. <h1>🚀 会话激活测试地址获取工具</h1>
  206. <p class="subtitle">快速获取企业微信群聊的会话激活页面测试地址</p>
  207. <div class="info-box">
  208. <h3>📋 您的配置信息</h3>
  209. <p><strong>公司ID (cid):</strong> <code>cDL6R1hgSi</code></p>
  210. <p><strong>用户ID:</strong> <code>woAs2qCQAAGQckyg7AQBxhMEoSwnlTvg</code></p>
  211. </div>
  212. <div class="button-group">
  213. <button onclick="getAllGroupChats()">
  214. 📡 获取所有群聊地址
  215. </button>
  216. <button class="secondary" onclick="createTestGroupChat()">
  217. ➕ 创建测试群聊
  218. </button>
  219. <button class="success" onclick="setupLocalStorage()">
  220. 💾 配置本地存储
  221. </button>
  222. </div>
  223. <div id="result" class="result">
  224. <!-- 结果将显示在这里 -->
  225. </div>
  226. </div>
  227. <script>
  228. const CID = 'cDL6R1hgSi';
  229. const USER_ID = 'woAs2qCQAAGQckyg7AQBxhMEoSwnlTvg';
  230. // 配置本地存储
  231. function setupLocalStorage() {
  232. try {
  233. localStorage.setItem('company', CID);
  234. localStorage.setItem(`${CID}/USERINFO`, JSON.stringify({
  235. userid: USER_ID,
  236. errcode: 0,
  237. errmsg: 'ok',
  238. cid: CID
  239. }));
  240. showSuccess('✅ 本地存储配置成功!现在可以正常访问会话激活页面了。');
  241. } catch (error) {
  242. showError('配置失败: ' + error.message);
  243. }
  244. }
  245. // 获取所有群聊
  246. async function getAllGroupChats() {
  247. const resultDiv = document.getElementById('result');
  248. resultDiv.innerHTML = '<div class="loading"><div class="spinner"></div><p>正在加载群聊列表...</p></div>';
  249. resultDiv.classList.add('show');
  250. try {
  251. // 动态导入Parse
  252. const { FmodeParse } = await import('https://unpkg.com/fmode-ng@latest/parse/index.js');
  253. const Parse = FmodeParse.with('nova');
  254. console.log('✅ Parse SDK加载成功');
  255. // 查询群聊
  256. const query = new Parse.Query('GroupChat');
  257. query.equalTo('company', { __type: 'Pointer', className: 'Company', objectId: CID });
  258. query.include('project');
  259. query.descending('createdAt');
  260. query.limit(50);
  261. const chats = await query.find();
  262. console.log(`✅ 找到 ${chats.length} 个群聊`);
  263. if (chats.length === 0) {
  264. resultDiv.innerHTML = `
  265. <h3>😕 未找到群聊</h3>
  266. <p>数据库中没有找到群聊记录。请点击"创建测试群聊"按钮创建一个。</p>
  267. `;
  268. return;
  269. }
  270. // 生成URL列表
  271. let html = `<h3>📱 找到 ${chats.length} 个群聊</h3><ul class="url-list">`;
  272. chats.forEach((chat, index) => {
  273. const chatId = chat.id;
  274. const chatName = chat.get('name') || '未命名群聊';
  275. const project = chat.get('project');
  276. const projectName = project ? project.get('title') : '无项目';
  277. const memberList = chat.get('member_list') || [];
  278. const memberCount = memberList.length;
  279. const url = `http://localhost:4200/wxwork/${CID}/chat-activation/${chatId}`;
  280. html += `
  281. <li class="url-item">
  282. <div class="url-item-header">
  283. <span class="url-item-title">${index + 1}. ${chatName}</span>
  284. <span class="url-item-badge">${memberCount} 成员</span>
  285. </div>
  286. <div class="url-item-info">
  287. 📁 项目: ${projectName} | 🆔 ID: ${chatId}
  288. </div>
  289. <div class="url-item-link">${url}</div>
  290. <div class="url-item-actions">
  291. <button onclick="copyUrl('${url}')">📋 复制</button>
  292. <button onclick="openUrl('${url}')">🚀 打开</button>
  293. </div>
  294. </li>
  295. `;
  296. });
  297. html += '</ul>';
  298. resultDiv.innerHTML = html;
  299. } catch (error) {
  300. console.error('❌ 错误:', error);
  301. showError('加载失败: ' + error.message + '<br><br>请确保:<br>1. 项目已启动 (npm start)<br>2. Parse Server已连接<br>3. 网络正常');
  302. }
  303. }
  304. // 创建测试群聊
  305. async function createTestGroupChat() {
  306. const resultDiv = document.getElementById('result');
  307. resultDiv.innerHTML = '<div class="loading"><div class="spinner"></div><p>正在创建测试群聊...</p></div>';
  308. resultDiv.classList.add('show');
  309. try {
  310. const { FmodeParse } = await import('https://unpkg.com/fmode-ng@latest/parse/index.js');
  311. const Parse = FmodeParse.with('nova');
  312. const GroupChat = Parse.Object.extend('GroupChat');
  313. const testChat = new GroupChat();
  314. const timestamp = new Date().toLocaleString('zh-CN');
  315. testChat.set('name', `测试群聊 - ${timestamp}`);
  316. testChat.set('company', { __type: 'Pointer', className: 'Company', objectId: CID });
  317. testChat.set('chat_id', 'test_chat_' + Date.now());
  318. testChat.set('member_list', [
  319. {
  320. type: 1, // 内部成员
  321. userid: 'tech_001',
  322. name: '技术员-张三',
  323. avatar: 'https://via.placeholder.com/100?text=Tech'
  324. },
  325. {
  326. type: 2, // 外部联系人(客户)
  327. userid: 'customer_001',
  328. name: '客户-李四',
  329. avatar: 'https://via.placeholder.com/100?text=Customer'
  330. },
  331. {
  332. type: 2,
  333. userid: 'customer_002',
  334. name: '客户-王五',
  335. avatar: 'https://via.placeholder.com/100?text=Customer2'
  336. }
  337. ]);
  338. testChat.set('messages', [
  339. {
  340. msgid: 'msg_001',
  341. from: 'customer_001',
  342. msgtime: Math.floor(Date.now() / 1000) - 3600, // 1小时前
  343. msgtype: 'text',
  344. text: { content: '你好,我想咨询一下项目进度' }
  345. },
  346. {
  347. msgid: 'msg_002',
  348. from: 'tech_001',
  349. msgtime: Math.floor(Date.now() / 1000) - 3500,
  350. msgtype: 'text',
  351. text: { content: '您好,项目正在进行中,预计本周完成' }
  352. },
  353. {
  354. msgid: 'msg_003',
  355. from: 'customer_001',
  356. msgtime: Math.floor(Date.now() / 1000) - 700, // 12分钟前(超时未回复)
  357. msgtype: 'text',
  358. text: { content: '可以帮我修改一下需求吗?需要增加一个功能' }
  359. },
  360. {
  361. msgid: 'msg_004',
  362. from: 'customer_002',
  363. msgtime: Math.floor(Date.now() / 1000) - 300, // 5分钟前
  364. msgtype: 'text',
  365. text: { content: '设计稿什么时候能出来?' }
  366. }
  367. ]);
  368. testChat.set('data', {
  369. description: '这是一个测试群聊,用于演示会话激活功能',
  370. createdBy: 'test_tool'
  371. });
  372. const saved = await testChat.save();
  373. const url = `http://localhost:4200/wxwork/${CID}/chat-activation/${saved.id}`;
  374. console.log('✅ 测试群聊创建成功:', saved.id);
  375. resultDiv.innerHTML = `
  376. <div class="success-message">
  377. <h3>✅ 测试群聊创建成功!</h3>
  378. <p><strong>群聊名称:</strong> ${saved.get('name')}</p>
  379. <p><strong>群聊ID:</strong> ${saved.id}</p>
  380. <p><strong>成员数:</strong> 3人 (1个技术员 + 2个客户)</p>
  381. <p><strong>消息数:</strong> 4条 (包含1条超时未回复)</p>
  382. </div>
  383. <ul class="url-list">
  384. <li class="url-item">
  385. <div class="url-item-header">
  386. <span class="url-item-title">测试群聊地址</span>
  387. <span class="url-item-badge">新创建</span>
  388. </div>
  389. <div class="url-item-link">${url}</div>
  390. <div class="url-item-actions">
  391. <button onclick="copyUrl('${url}')">📋 复制</button>
  392. <button onclick="openUrl('${url}')">🚀 打开</button>
  393. </div>
  394. </li>
  395. </ul>
  396. `;
  397. } catch (error) {
  398. console.error('❌ 错误:', error);
  399. showError('创建失败: ' + error.message);
  400. }
  401. }
  402. // 复制URL
  403. function copyUrl(url) {
  404. navigator.clipboard.writeText(url).then(() => {
  405. alert('✅ 地址已复制到剪贴板!\n\n' + url);
  406. }).catch(err => {
  407. alert('❌ 复制失败,请手动复制:\n\n' + url);
  408. });
  409. }
  410. // 打开URL
  411. function openUrl(url) {
  412. window.open(url, '_blank');
  413. }
  414. // 显示成功消息
  415. function showSuccess(message) {
  416. const resultDiv = document.getElementById('result');
  417. resultDiv.innerHTML = `<div class="success-message">${message}</div>`;
  418. resultDiv.classList.add('show');
  419. }
  420. // 显示错误消息
  421. function showError(message) {
  422. const resultDiv = document.getElementById('result');
  423. resultDiv.innerHTML = `<div class="error">${message}</div>`;
  424. resultDiv.classList.add('show');
  425. }
  426. // 页面加载时自动配置localStorage
  427. window.addEventListener('DOMContentLoaded', () => {
  428. setupLocalStorage();
  429. });
  430. </script>
  431. </body>
  432. </html>