index.js 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014
  1. // 使用相对路径,自动适配当前域名
  2. const API_BASE = '/api';
  3. let currentPage = 1;
  4. let pageSize = 10;
  5. let total = 0;
  6. let editingId = null;
  7. let currentStatusFilter = ''; // 当前状态筛选:''(全部)、'activated'(已激活)、'unactivated'(未激活)
  8. let allLicenses = []; // 存储所有License数据用于统计
  9. // Toast 通知函数
  10. function showToast(message, type = 'info', duration = 3000) {
  11. const container = document.getElementById('toast-container');
  12. const toast = document.createElement('div');
  13. toast.className = `toast ${type}`;
  14. const icons = {
  15. success: '✅',
  16. error: '❌',
  17. warning: '⚠️',
  18. info: 'ℹ️'
  19. };
  20. toast.innerHTML = `
  21. <span class="toast-icon">${icons[type] || icons.info}</span>
  22. <span class="toast-message">${message}</span>
  23. <button class="toast-close" onclick="this.parentElement.remove()">&times;</button>
  24. `;
  25. container.appendChild(toast);
  26. // 自动移除
  27. setTimeout(() => {
  28. if (toast.parentElement) {
  29. toast.style.animation = 'slideInRight 0.3s ease-out reverse';
  30. setTimeout(() => {
  31. if (toast.parentElement) {
  32. toast.remove();
  33. }
  34. }, 300);
  35. }
  36. }, duration);
  37. }
  38. // 确认对话框函数
  39. let confirmCallback = null;
  40. function showConfirmDialog(message, title = '确认操作', okText = '确定', okType = 'danger') {
  41. return new Promise((resolve) => {
  42. document.getElementById('confirm-title').textContent = title;
  43. document.getElementById('confirm-message').textContent = message;
  44. const okBtn = document.getElementById('confirm-ok-btn');
  45. okBtn.textContent = okText;
  46. okBtn.className = `btn btn-${okType}`;
  47. confirmCallback = resolve;
  48. document.getElementById('confirmDialog').classList.add('show');
  49. });
  50. }
  51. function closeConfirmDialog(confirmed) {
  52. document.getElementById('confirmDialog').classList.remove('show');
  53. if (confirmCallback) {
  54. confirmCallback(confirmed);
  55. confirmCallback = null;
  56. }
  57. }
  58. // 复制激活码到剪贴板
  59. async function copyLicenseKey(key) {
  60. try {
  61. await navigator.clipboard.writeText(key);
  62. showToast('激活码已复制到剪贴板', 'success', 2000);
  63. } catch (err) {
  64. // 降级方案:使用传统方法
  65. const textArea = document.createElement('textarea');
  66. textArea.value = key;
  67. textArea.style.position = 'fixed';
  68. textArea.style.left = '-999999px';
  69. document.body.appendChild(textArea);
  70. textArea.select();
  71. try {
  72. document.execCommand('copy');
  73. showToast('激活码已复制到剪贴板', 'success', 2000);
  74. } catch (err) {
  75. showToast('复制失败,请手动复制', 'error');
  76. }
  77. document.body.removeChild(textArea);
  78. }
  79. }
  80. // 全选/取消全选
  81. function toggleSelectAll() {
  82. const selectAll = document.getElementById('select-all');
  83. const selectAllHeader = document.getElementById('select-all-header');
  84. const checkboxes = document.querySelectorAll('.license-checkbox');
  85. // 检查当前是否所有复选框都已选中
  86. const allChecked = checkboxes.length > 0 &&
  87. Array.from(checkboxes).every(checkbox => checkbox.checked);
  88. // 如果全部已选中,则取消全选;否则全选
  89. const isChecked = !allChecked;
  90. checkboxes.forEach(checkbox => {
  91. checkbox.checked = isChecked;
  92. });
  93. // 同步两个全选复选框
  94. selectAll.checked = isChecked;
  95. selectAllHeader.checked = isChecked;
  96. updateSelectedCount();
  97. }
  98. // 更新选中数量
  99. function updateSelectedCount() {
  100. const checkboxes = document.querySelectorAll('.license-checkbox:checked');
  101. const count = checkboxes.length;
  102. const selectedCountEl = document.getElementById('selected-count');
  103. const batchDeleteBtn = document.getElementById('batch-delete-btn');
  104. selectedCountEl.textContent = `已选择 ${count} 项`;
  105. if (count > 0) {
  106. batchDeleteBtn.style.display = 'block';
  107. } else {
  108. batchDeleteBtn.style.display = 'none';
  109. }
  110. // 更新批量操作按钮
  111. updateBatchButtons();
  112. // 更新全选复选框状态
  113. const allCheckboxes = document.querySelectorAll('.license-checkbox');
  114. const allChecked = allCheckboxes.length > 0 && checkboxes.length === allCheckboxes.length;
  115. document.getElementById('select-all').checked = allChecked;
  116. document.getElementById('select-all-header').checked = allChecked;
  117. }
  118. // 批量删除 License
  119. async function batchDeleteLicenses() {
  120. const checkboxes = document.querySelectorAll('.license-checkbox:checked');
  121. const selectedIds = Array.from(checkboxes).map(cb => parseInt(cb.value));
  122. if (selectedIds.length === 0) {
  123. showToast('请至少选择一个 License', 'warning');
  124. return;
  125. }
  126. const confirmed = await showConfirmDialog(
  127. `确定要删除选中的 ${selectedIds.length} 个 License 吗?此操作不可恢复!`,
  128. '确认批量删除',
  129. '删除',
  130. 'danger'
  131. );
  132. if (!confirmed) {
  133. return;
  134. }
  135. try {
  136. const response = await apiRequest(`${API_BASE}/licenses/batch`, {
  137. method: 'DELETE',
  138. body: JSON.stringify({
  139. ids: selectedIds
  140. })
  141. });
  142. if (!response) return;
  143. const result = await response.json();
  144. if (result.code === 0) {
  145. showToast(result.msg, 'success');
  146. loadStatistics(); // 重新加载统计信息
  147. loadLicenses(currentPage);
  148. } else {
  149. showToast('批量删除失败: ' + result.msg, 'error');
  150. }
  151. } catch (error) {
  152. showToast('请求失败: ' + error.message, 'error');
  153. }
  154. }
  155. // 获取认证token
  156. function getAuthToken() {
  157. return localStorage.getItem('auth_token');
  158. }
  159. // 检查是否已登录
  160. function checkAuth() {
  161. const token = getAuthToken();
  162. if (!token) {
  163. window.location.href = '/web/login.html';
  164. return false;
  165. }
  166. return true;
  167. }
  168. // 获取API请求头(包含token)
  169. function getAuthHeaders() {
  170. const token = getAuthToken();
  171. return {
  172. 'Content-Type': 'application/json',
  173. 'Authorization': `Bearer ${token}`
  174. };
  175. }
  176. // 处理API错误响应
  177. async function handleApiError(response) {
  178. if (response.status === 401) {
  179. // 未授权,清除token并跳转到登录页
  180. localStorage.removeItem('auth_token');
  181. showToast('登录已过期,请重新登录', 'error');
  182. setTimeout(() => {
  183. window.location.href = '/web/login.html';
  184. }, 1000);
  185. return true;
  186. }
  187. return false;
  188. }
  189. // 统一的API请求函数
  190. async function apiRequest(url, options = {}) {
  191. const headers = getAuthHeaders();
  192. if (options.headers) {
  193. Object.assign(headers, options.headers);
  194. }
  195. const response = await fetch(url, {
  196. ...options,
  197. headers: headers
  198. });
  199. if (await handleApiError(response)) {
  200. return null;
  201. }
  202. return response;
  203. }
  204. // 页面加载时检查登录状态
  205. window.onload = () => {
  206. if (checkAuth()) {
  207. loadStatistics();
  208. loadLicenses();
  209. }
  210. };
  211. // 加载统计信息
  212. async function loadStatistics() {
  213. try {
  214. const response = await apiRequest(`${API_BASE}/licenses/statistics`);
  215. if (!response) return;
  216. const result = await response.json();
  217. if (result.code === 0 && result.data) {
  218. const stats = result.data;
  219. document.getElementById('stat-total').textContent = stats.total || 0;
  220. document.getElementById('stat-activated').textContent = stats.activated || 0;
  221. document.getElementById('stat-unactivated').textContent = stats.unactivated || 0;
  222. document.getElementById('stat-devices').textContent = stats.total_devices || 0;
  223. document.getElementById('stats-container').style.display = 'grid';
  224. }
  225. } catch (error) {
  226. console.error('加载统计信息失败:', error);
  227. }
  228. }
  229. // 加载 License 列表
  230. async function loadLicenses(page = 1) {
  231. currentPage = page;
  232. const loadingEl = document.getElementById('loading');
  233. const tableContainer = document.getElementById('table-container');
  234. const emptyState = document.getElementById('empty-state');
  235. loadingEl.style.display = 'block';
  236. tableContainer.style.display = 'none';
  237. emptyState.style.display = 'none';
  238. try {
  239. // 构建查询URL
  240. let url = `${API_BASE}/licenses?page=${page}&page_size=${pageSize}`;
  241. if (currentStatusFilter) {
  242. url += `&status=${currentStatusFilter}`;
  243. }
  244. const response = await apiRequest(url);
  245. if (!response) return;
  246. const result = await response.json();
  247. if (result.code === 0) {
  248. total = result.total;
  249. const licenses = result.data;
  250. if (licenses.length === 0) {
  251. loadingEl.style.display = 'none';
  252. emptyState.style.display = 'block';
  253. return;
  254. }
  255. renderTable(licenses);
  256. renderPagination();
  257. loadingEl.style.display = 'none';
  258. tableContainer.style.display = 'block';
  259. // 更新批量操作按钮显示
  260. updateBatchButtons();
  261. } else {
  262. showToast('加载失败: ' + result.msg, 'error');
  263. loadingEl.style.display = 'none';
  264. }
  265. } catch (error) {
  266. showToast('请求失败: ' + error.message, 'error');
  267. loadingEl.style.display = 'none';
  268. }
  269. }
  270. // 状态筛选处理
  271. function handleStatusFilter() {
  272. const filterSelect = document.getElementById('status-filter');
  273. currentStatusFilter = filterSelect.value;
  274. loadLicenses(1); // 重置到第一页
  275. }
  276. // 更新批量操作按钮显示
  277. function updateBatchButtons() {
  278. const checkboxes = document.querySelectorAll('.license-checkbox:checked');
  279. const batchUpdateBtn = document.getElementById('batch-update-btn');
  280. if (checkboxes.length > 0) {
  281. batchUpdateBtn.style.display = 'block';
  282. } else {
  283. batchUpdateBtn.style.display = 'none';
  284. }
  285. }
  286. // 渲染表格
  287. function renderTable(licenses) {
  288. const tbody = document.getElementById('license-table-body');
  289. tbody.innerHTML = licenses.map(license => {
  290. let boundDevices = [];
  291. try {
  292. boundDevices = JSON.parse(license.bound_devices || '[]');
  293. } catch (e) {
  294. boundDevices = [];
  295. }
  296. // 解析设备激活时间
  297. let deviceActivations = {};
  298. try {
  299. const activationsStr = JSON.parse(license.device_activations || '{}');
  300. deviceActivations = activationsStr;
  301. } catch (e) {
  302. deviceActivations = {};
  303. }
  304. const boundCount = boundDevices.length;
  305. const isFull = boundCount >= license.max_devices;
  306. const createdDate = new Date(license.created_at).toLocaleString('zh-CN');
  307. // 限制激活码显示长度为10个字符
  308. const displayKey = license.key.length > 10 ? license.key.substring(0, 10) + '...' : license.key;
  309. // 构建设备详情显示
  310. let deviceDetailHtml = '';
  311. if (boundDevices.length === 0) {
  312. deviceDetailHtml = '<span style="color: #9ca3af;">无设备</span>';
  313. } else {
  314. // 显示前2个设备作为预览
  315. const previewDevices = boundDevices.slice(0, 2);
  316. const previewText = previewDevices.map(deviceId => {
  317. const activationTime = deviceActivations[deviceId];
  318. if (activationTime) {
  319. const date = new Date(activationTime);
  320. return `${deviceId} (${date.toLocaleString('zh-CN')})`;
  321. }
  322. return `${deviceId} (未记录)`;
  323. }).join('、');
  324. const moreCount = boundDevices.length - 2;
  325. // 使用 data 属性安全传递 licenseKey
  326. const escapedKey = license.key.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
  327. deviceDetailHtml = `
  328. <div class="device-detail-cell" data-license-id="${license.id}" data-license-key="${escapedKey}" onclick="showDeviceListFromElement(this)">
  329. <div class="device-count">${boundCount} 个设备</div>
  330. <div class="device-preview">${previewText}${moreCount > 0 ? ` 等${moreCount}个...` : ''}</div>
  331. </div>
  332. `;
  333. }
  334. return `
  335. <tr>
  336. <td style="text-align: center;">
  337. <input type="checkbox" class="license-checkbox" value="${license.id}" onchange="updateSelectedCount()" style="width: 18px; height: 18px; cursor: pointer;">
  338. </td>
  339. <td>${license.id}</td>
  340. <td>
  341. <div class="license-key-cell" title="${license.key}">
  342. <span class="license-key-text">${displayKey}</span>
  343. <button class="copy-btn" onclick="copyLicenseKey('${license.key}')" title="复制激活码">
  344. <span>复制</span>
  345. </button>
  346. </div>
  347. </td>
  348. <td>
  349. ${deviceDetailHtml}
  350. </td>
  351. <td>
  352. <span class="badge ${isFull ? 'badge-warning' : 'badge-success'}">
  353. ${boundCount} / ${license.max_devices}
  354. </span>
  355. </td>
  356. <td>
  357. <div style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="${license.remark || ''}">
  358. ${license.remark || '<span style="color: #9ca3af;">无</span>'}
  359. </div>
  360. </td>
  361. <td>${createdDate}</td>
  362. <td>
  363. <div class="actions">
  364. <button class="btn btn-primary btn-sm" onclick="editLicense(${license.id})">编辑</button>
  365. <button class="btn btn-danger btn-sm" onclick="deleteLicense(${license.id}, '${license.key}')">删除</button>
  366. </div>
  367. </td>
  368. </tr>
  369. `;
  370. }).join('');
  371. }
  372. // 渲染分页
  373. function renderPagination() {
  374. const pagination = document.getElementById('pagination');
  375. const totalPages = Math.ceil(total / pageSize);
  376. if (totalPages <= 1) {
  377. pagination.innerHTML = '';
  378. return;
  379. }
  380. pagination.innerHTML = `
  381. <button onclick="loadLicenses(${currentPage - 1})" ${currentPage === 1 ? 'disabled' : ''}>
  382. 上一页
  383. </button>
  384. <span class="page-info">第 ${currentPage} / ${totalPages} 页 (共 ${total} 条)</span>
  385. <button onclick="loadLicenses(${currentPage + 1})" ${currentPage >= totalPages ? 'disabled' : ''}>
  386. 下一页
  387. </button>
  388. `;
  389. }
  390. // 打开创建 Modal
  391. function openCreateModal() {
  392. editingId = null;
  393. document.getElementById('modal-title').textContent = '创建 License';
  394. document.getElementById('license-id').value = '';
  395. document.getElementById('license-key').value = '';
  396. document.getElementById('license-max-devices').value = '2';
  397. document.getElementById('license-bound-devices').value = '';
  398. document.getElementById('license-remark').value = '';
  399. document.getElementById('license-key').disabled = false;
  400. document.getElementById('licenseModal').classList.add('show');
  401. }
  402. // 编辑 License
  403. async function editLicense(id) {
  404. try {
  405. const response = await apiRequest(`${API_BASE}/licenses/${id}`);
  406. if (!response) return;
  407. const result = await response.json();
  408. if (result.code === 0) {
  409. const license = result.data;
  410. editingId = id;
  411. document.getElementById('modal-title').textContent = '编辑 License';
  412. document.getElementById('license-id').value = id;
  413. document.getElementById('license-key').value = license.key;
  414. document.getElementById('license-max-devices').value = license.max_devices;
  415. document.getElementById('license-bound-devices').value = license.bound_devices || '[]';
  416. document.getElementById('license-remark').value = license.remark || '';
  417. document.getElementById('license-key').disabled = false;
  418. document.getElementById('licenseModal').classList.add('show');
  419. } else {
  420. showToast('加载失败: ' + result.msg, 'error');
  421. }
  422. } catch (error) {
  423. showToast('请求失败: ' + error.message, 'error');
  424. }
  425. }
  426. // 关闭 Modal
  427. function closeModal() {
  428. document.getElementById('licenseModal').classList.remove('show');
  429. }
  430. // 提交表单
  431. async function handleSubmit(event) {
  432. event.preventDefault();
  433. const id = document.getElementById('license-id').value;
  434. const key = document.getElementById('license-key').value;
  435. const maxDevices = parseInt(document.getElementById('license-max-devices').value);
  436. const boundDevices = document.getElementById('license-bound-devices').value || '[]';
  437. const remark = document.getElementById('license-remark').value || '';
  438. // 验证 boundDevices 是否为有效 JSON
  439. try {
  440. JSON.parse(boundDevices);
  441. } catch (e) {
  442. showToast('已绑定设备必须是有效的 JSON 数组格式', 'error');
  443. return;
  444. }
  445. try {
  446. let response;
  447. if (editingId) {
  448. // 更新
  449. const updateData = {
  450. max_devices: maxDevices,
  451. remark: remark // 总是发送remark字段,即使是空字符串
  452. };
  453. if (boundDevices) {
  454. updateData.bound_devices = boundDevices;
  455. }
  456. response = await apiRequest(`${API_BASE}/licenses/${id}`, {
  457. method: 'PUT',
  458. body: JSON.stringify(updateData)
  459. });
  460. } else {
  461. // 创建
  462. response = await apiRequest(`${API_BASE}/licenses`, {
  463. method: 'POST',
  464. body: JSON.stringify({
  465. key: key,
  466. max_devices: maxDevices,
  467. bound_devices: boundDevices,
  468. remark: remark
  469. })
  470. });
  471. }
  472. if (!response) return;
  473. const result = await response.json();
  474. if (result.code === 0) {
  475. showToast(editingId ? '更新成功' : '创建成功', 'success');
  476. closeModal();
  477. loadStatistics(); // 重新加载统计信息
  478. loadLicenses(currentPage);
  479. } else {
  480. showToast('操作失败: ' + result.msg, 'error');
  481. }
  482. } catch (error) {
  483. showToast('请求失败: ' + error.message, 'error');
  484. }
  485. }
  486. // 删除 License
  487. async function deleteLicense(id, key) {
  488. const confirmed = await showConfirmDialog(
  489. `确定要删除 License "${key}" 吗?此操作不可恢复!`,
  490. '确认删除',
  491. '删除',
  492. 'danger'
  493. );
  494. if (!confirmed) {
  495. return;
  496. }
  497. try {
  498. const response = await apiRequest(`${API_BASE}/licenses/${id}`, {
  499. method: 'DELETE'
  500. });
  501. if (!response) return;
  502. const result = await response.json();
  503. if (result.code === 0) {
  504. showToast('删除成功', 'success');
  505. loadStatistics(); // 重新加载统计信息
  506. loadLicenses(currentPage);
  507. } else {
  508. showToast('删除失败: ' + result.msg, 'error');
  509. }
  510. } catch (error) {
  511. showToast('请求失败: ' + error.message, 'error');
  512. }
  513. }
  514. // 打开批量生成 Modal
  515. function openBatchModal() {
  516. document.getElementById('batch-prefix').value = 'VIP';
  517. document.getElementById('batch-count').value = '10';
  518. document.getElementById('batch-max-devices').value = '2';
  519. document.getElementById('batchModal').classList.add('show');
  520. }
  521. // 关闭批量生成 Modal
  522. function closeBatchModal() {
  523. document.getElementById('batchModal').classList.remove('show');
  524. }
  525. // 批量生成提交
  526. async function handleBatchSubmit(event) {
  527. event.preventDefault();
  528. const prefix = document.getElementById('batch-prefix').value.trim();
  529. const count = parseInt(document.getElementById('batch-count').value);
  530. const maxDevices = parseInt(document.getElementById('batch-max-devices').value);
  531. if (!prefix) {
  532. showToast('请输入激活码前缀', 'warning');
  533. return;
  534. }
  535. if (count <= 0 || count > 1000) {
  536. showToast('生成数量必须在 1-1000 之间', 'warning');
  537. return;
  538. }
  539. const confirmed = await showConfirmDialog(
  540. `确定要批量生成 ${count} 个激活码吗?`,
  541. '确认批量生成',
  542. '生成',
  543. 'primary'
  544. );
  545. if (!confirmed) {
  546. return;
  547. }
  548. try {
  549. const response = await apiRequest(`${API_BASE}/licenses/batch`, {
  550. method: 'POST',
  551. body: JSON.stringify({
  552. prefix: prefix,
  553. count: count,
  554. max_devices: maxDevices
  555. })
  556. });
  557. if (!response) return;
  558. const result = await response.json();
  559. if (result.code === 0) {
  560. showToast(result.msg, 'success', 4000);
  561. closeBatchModal();
  562. loadStatistics(); // 重新加载统计信息
  563. loadLicenses(1); // 重新加载第一页
  564. } else {
  565. showToast('批量生成失败: ' + result.msg, 'error');
  566. }
  567. } catch (error) {
  568. showToast('请求失败: ' + error.message, 'error');
  569. }
  570. }
  571. // 从元素获取数据并显示设备列表弹框
  572. function showDeviceListFromElement(element) {
  573. const licenseId = parseInt(element.getAttribute('data-license-id'));
  574. const licenseKey = element.getAttribute('data-license-key');
  575. showDeviceList(licenseId, licenseKey);
  576. }
  577. // 显示设备列表弹框
  578. async function showDeviceList(licenseId, licenseKey) {
  579. try {
  580. const response = await apiRequest(`${API_BASE}/licenses/${licenseId}`);
  581. if (!response) return;
  582. const result = await response.json();
  583. if (result.code === 0) {
  584. const license = result.data;
  585. let boundDevices = [];
  586. try {
  587. boundDevices = JSON.parse(license.bound_devices || '[]');
  588. } catch (e) {
  589. boundDevices = [];
  590. }
  591. // 解析设备激活时间
  592. let deviceActivations = {};
  593. try {
  594. const activationsStr = JSON.parse(license.device_activations || '{}');
  595. deviceActivations = activationsStr;
  596. } catch (e) {
  597. deviceActivations = {};
  598. }
  599. // 解析设备心跳时间
  600. let deviceHeartbeats = {};
  601. try {
  602. const heartbeatsStr = JSON.parse(license.device_heartbeats || '{}');
  603. deviceHeartbeats = heartbeatsStr;
  604. } catch (e) {
  605. deviceHeartbeats = {};
  606. }
  607. // 设置标题
  608. document.getElementById('device-list-title').textContent = `设备列表 - ${licenseKey}`;
  609. // 渲染设备列表
  610. const contentEl = document.getElementById('device-list-content');
  611. if (boundDevices.length === 0) {
  612. contentEl.innerHTML = `
  613. <div class="device-list-empty">
  614. <p>暂无绑定设备</p>
  615. </div>
  616. `;
  617. } else {
  618. const tableHtml = `
  619. <table class="device-list-table">
  620. <thead>
  621. <tr>
  622. <th>序号</th>
  623. <th>设备ID</th>
  624. <th>激活时间</th>
  625. <th>最近心跳时间</th>
  626. </tr>
  627. </thead>
  628. <tbody>
  629. ${boundDevices.map((deviceId, index) => {
  630. const activationTime = deviceActivations[deviceId];
  631. let timeDisplay = '<span style="color: #9ca3af;">未记录</span>';
  632. if (activationTime) {
  633. const date = new Date(activationTime);
  634. timeDisplay = date.toLocaleString('zh-CN');
  635. }
  636. // 处理心跳时间显示
  637. const heartbeatTime = deviceHeartbeats[deviceId];
  638. let heartbeatDisplay = '<span style="color: #9ca3af;">未记录</span>';
  639. if (heartbeatTime) {
  640. const heartbeatDate = new Date(heartbeatTime);
  641. const now = new Date();
  642. const diff = now - heartbeatDate;
  643. const seconds = Math.floor(diff / 1000);
  644. const minutes = Math.floor(seconds / 60);
  645. const hours = Math.floor(minutes / 60);
  646. const days = Math.floor(hours / 24);
  647. // 格式化相对时间
  648. let relativeTime = '';
  649. let heartbeatColor = '#6b7280'; // 默认灰色
  650. if (days > 0) {
  651. relativeTime = `${days}天前`;
  652. heartbeatColor = '#ef4444'; // 红色 - 很久没心跳
  653. } else if (hours > 0) {
  654. relativeTime = `${hours}小时前`;
  655. heartbeatColor = '#f59e0b'; // 橙色 - 较久
  656. } else if (minutes > 0) {
  657. relativeTime = `${minutes}分钟前`;
  658. heartbeatColor = minutes < 10 ? '#10b981' : '#f59e0b'; // 绿色(10分钟内)或橙色
  659. } else if (seconds > 0) {
  660. relativeTime = `${seconds}秒前`;
  661. heartbeatColor = '#10b981'; // 绿色
  662. } else {
  663. relativeTime = '刚刚';
  664. heartbeatColor = '#10b981'; // 绿色
  665. }
  666. heartbeatDisplay = `${heartbeatDate.toLocaleString('zh-CN')} <span style="color: ${heartbeatColor}; font-size: 11px; font-weight: 400; margin-left: 6px;">(${relativeTime})</span>`;
  667. }
  668. return `
  669. <tr>
  670. <td>${index + 1}</td>
  671. <td><strong>${deviceId}</strong></td>
  672. <td>${timeDisplay}</td>
  673. <td>${heartbeatDisplay}</td>
  674. </tr>
  675. `;
  676. }).join('')}
  677. </tbody>
  678. </table>
  679. <div style="margin-top: 15px; color: #6b7280; font-size: 14px; text-align: right;">
  680. 共 ${boundDevices.length} 个设备
  681. </div>
  682. `;
  683. contentEl.innerHTML = tableHtml;
  684. }
  685. document.getElementById('deviceListModal').classList.add('show');
  686. } else {
  687. showToast('加载失败: ' + result.msg, 'error');
  688. }
  689. } catch (error) {
  690. showToast('请求失败: ' + error.message, 'error');
  691. }
  692. }
  693. // 关闭设备列表弹框
  694. function closeDeviceListModal() {
  695. document.getElementById('deviceListModal').classList.remove('show');
  696. }
  697. // 导出CSV
  698. async function exportToCSV() {
  699. try {
  700. // 如果有筛选条件,先获取筛选后的数据,然后前端生成CSV
  701. if (currentStatusFilter) {
  702. showToast('正在导出筛选后的数据...', 'info');
  703. const listResponse = await apiRequest(`${API_BASE}/licenses?page=1&page_size=10000&status=${currentStatusFilter}`);
  704. if (!listResponse) return;
  705. const listResult = await listResponse.json();
  706. if (listResult.code === 0 && listResult.data.length > 0) {
  707. const licenses = listResult.data;
  708. const headers = ['ID', '激活码', '最大设备数', '已绑定设备数', '绑定设备列表', '创建时间', '更新时间'];
  709. const rows = licenses.map(license => {
  710. let boundDevices = [];
  711. try {
  712. boundDevices = JSON.parse(license.bound_devices || '[]');
  713. } catch (e) {
  714. boundDevices = [];
  715. }
  716. return [
  717. license.id,
  718. license.key,
  719. license.max_devices,
  720. boundDevices.length,
  721. boundDevices.join('; '),
  722. new Date(license.created_at).toLocaleString('zh-CN'),
  723. new Date(license.updated_at).toLocaleString('zh-CN')
  724. ];
  725. });
  726. function escapeCSVField(field) {
  727. if (field === null || field === undefined) return '';
  728. const str = String(field);
  729. if (str.includes(',') || str.includes('"') || str.includes('\n')) {
  730. return '"' + str.replace(/"/g, '""') + '"';
  731. }
  732. return str;
  733. }
  734. const csvContent = [
  735. headers.map(escapeCSVField).join(','),
  736. ...rows.map(row => row.map(escapeCSVField).join(','))
  737. ].join('\n');
  738. const BOM = '\uFEFF';
  739. const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' });
  740. const link = document.createElement('a');
  741. const url = URL.createObjectURL(blob);
  742. link.setAttribute('href', url);
  743. const now = new Date();
  744. const dateStr = now.toISOString().slice(0, 10).replace(/-/g, '');
  745. const timeStr = now.toTimeString().slice(0, 8).replace(/:/g, '');
  746. const statusStr = currentStatusFilter ? `_${currentStatusFilter}` : '';
  747. link.setAttribute('download', `licenses${statusStr}_${dateStr}_${timeStr}.csv`);
  748. link.style.visibility = 'hidden';
  749. document.body.appendChild(link);
  750. link.click();
  751. document.body.removeChild(link);
  752. showToast(`成功导出 ${licenses.length} 条记录`, 'success');
  753. } else {
  754. showToast('没有数据可导出', 'warning');
  755. }
  756. } else {
  757. // 没有筛选条件时,使用后端导出接口
  758. const token = getAuthToken();
  759. const url = `${API_BASE}/licenses/export?format=csv`;
  760. // 创建一个隐藏的表单来提交带token的请求
  761. const form = document.createElement('form');
  762. form.method = 'GET';
  763. form.action = url;
  764. form.style.display = 'none';
  765. // 添加token到请求头(通过fetch下载)
  766. const response = await fetch(url, {
  767. headers: getAuthHeaders()
  768. });
  769. if (!response.ok) {
  770. showToast('导出失败', 'error');
  771. return;
  772. }
  773. const blob = await response.blob();
  774. const downloadUrl = URL.createObjectURL(blob);
  775. const link = document.createElement('a');
  776. link.href = downloadUrl;
  777. const now = new Date();
  778. const dateStr = now.toISOString().slice(0, 10).replace(/-/g, '');
  779. const timeStr = now.toTimeString().slice(0, 8).replace(/:/g, '');
  780. link.setAttribute('download', `licenses_${dateStr}_${timeStr}.csv`);
  781. link.style.visibility = 'hidden';
  782. document.body.appendChild(link);
  783. link.click();
  784. document.body.removeChild(link);
  785. URL.revokeObjectURL(downloadUrl);
  786. showToast('导出成功', 'success');
  787. }
  788. } catch (error) {
  789. showToast('导出失败: ' + error.message, 'error');
  790. }
  791. }
  792. // 打开批量修改最大设备数弹框
  793. function openBatchUpdateModal() {
  794. const checkboxes = document.querySelectorAll('.license-checkbox:checked');
  795. const count = checkboxes.length;
  796. if (count === 0) {
  797. showToast('请至少选择一个 License', 'warning');
  798. return;
  799. }
  800. document.getElementById('batch-update-count').textContent = count;
  801. document.getElementById('batch-update-max-devices').value = '2';
  802. document.getElementById('batchUpdateModal').classList.add('show');
  803. }
  804. // 关闭批量修改弹框
  805. function closeBatchUpdateModal() {
  806. document.getElementById('batchUpdateModal').classList.remove('show');
  807. }
  808. // 批量修改最大设备数提交
  809. async function handleBatchUpdateSubmit(event) {
  810. event.preventDefault();
  811. const checkboxes = document.querySelectorAll('.license-checkbox:checked');
  812. const selectedIds = Array.from(checkboxes).map(cb => parseInt(cb.value));
  813. const maxDevices = parseInt(document.getElementById('batch-update-max-devices').value);
  814. if (selectedIds.length === 0) {
  815. showToast('请至少选择一个 License', 'warning');
  816. return;
  817. }
  818. if (maxDevices < 1) {
  819. showToast('最大设备数必须大于0', 'warning');
  820. return;
  821. }
  822. const confirmed = await showConfirmDialog(
  823. `确定要将选中的 ${selectedIds.length} 个 License 的最大设备数修改为 ${maxDevices} 吗?`,
  824. '确认批量修改',
  825. '确认',
  826. 'primary'
  827. );
  828. if (!confirmed) {
  829. return;
  830. }
  831. try {
  832. // 使用批量更新接口
  833. const response = await apiRequest(`${API_BASE}/licenses/batch/max-devices`, {
  834. method: 'PUT',
  835. body: JSON.stringify({
  836. ids: selectedIds,
  837. max_devices: maxDevices
  838. })
  839. });
  840. if (!response) return;
  841. const result = await response.json();
  842. if (result.code === 0) {
  843. showToast(result.msg, 'success');
  844. closeBatchUpdateModal();
  845. // 清除所有选中状态
  846. checkboxes.forEach(cb => cb.checked = false);
  847. updateSelectedCount();
  848. loadStatistics(); // 重新加载统计信息
  849. loadLicenses(currentPage); // 重新加载列表
  850. } else {
  851. showToast('批量修改失败: ' + result.msg, 'error');
  852. }
  853. } catch (error) {
  854. showToast('请求失败: ' + error.message, 'error');
  855. }
  856. }
  857. // 点击 Modal 外部关闭
  858. window.onclick = function(event) {
  859. const licenseModal = document.getElementById('licenseModal');
  860. const batchModal = document.getElementById('batchModal');
  861. const batchUpdateModal = document.getElementById('batchUpdateModal');
  862. const deviceListModal = document.getElementById('deviceListModal');
  863. const confirmDialog = document.getElementById('confirmDialog');
  864. if (event.target === licenseModal) {
  865. closeModal();
  866. }
  867. if (event.target === batchModal) {
  868. closeBatchModal();
  869. }
  870. if (event.target === batchUpdateModal) {
  871. closeBatchUpdateModal();
  872. }
  873. if (event.target === deviceListModal) {
  874. closeDeviceListModal();
  875. }
  876. if (event.target === confirmDialog) {
  877. closeConfirmDialog(false);
  878. }
  879. }