test.html 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Electron测试</title>
  6. <style>
  7. body { font-family: Arial, sans-serif; padding: 20px; }
  8. button { padding: 10px 15px; margin-top: 20px; cursor: pointer; }
  9. #electron-info { margin-top: 20px; padding: 10px; background: #f0f0f0; }
  10. </style>
  11. </head>
  12. <body>
  13. <h1>Electron测试页面</h1>
  14. <p>如果您看到这个页面,说明Electron可以正常加载HTML。</p>
  15. <div id="electron-info"></div>
  16. <button id="loadApp">加载Vue应用</button>
  17. <button id="debugInfo">显示调试信息</button>
  18. <div id="debug-output" style="margin-top: 20px; white-space: pre; background: #eee; padding: 10px; display: none;"></div>
  19. <div style="margin-top: 20px;">
  20. <h3>直接访问路由</h3>
  21. <button id="loadReport">加载报表页面</button>
  22. <button id="loadTest">加载测试页面</button>
  23. </div>
  24. <div style="margin-top: 20px;">
  25. <h3>启动选项</h3>
  26. <label>
  27. <input type="checkbox" id="defaultLoad" checked>
  28. 下次启动时直接加载报表页面
  29. </label>
  30. <button id="saveSettings" style="margin-left: 10px;">保存设置</button>
  31. <div id="settingsStatus" style="margin-top: 5px; color: green;"></div>
  32. </div>
  33. <script>
  34. // 显示Electron版本信息
  35. document.getElementById('electron-info').textContent =
  36. window.electronAPI ? `Electron版本: ${window.electronAPI.versions.electron}` : '未检测到Electron API';
  37. // 加载Vue应用按钮
  38. document.getElementById('loadApp').addEventListener('click', function() {
  39. if (window.electronAPI && window.electronAPI.loadApp) {
  40. window.electronAPI.loadApp();
  41. } else {
  42. alert('无法加载应用,electronAPI未定义');
  43. }
  44. });
  45. // 显示调试信息按钮
  46. document.getElementById('debugInfo').addEventListener('click', function() {
  47. const debugOutput = document.getElementById('debug-output');
  48. debugOutput.style.display = debugOutput.style.display === 'none' ? 'block' : 'none';
  49. if (debugOutput.style.display === 'block') {
  50. let info = '';
  51. // 收集环境信息
  52. info += `User Agent: ${navigator.userAgent}\n`;
  53. info += `Platform: ${navigator.platform}\n`;
  54. info += `Screen: ${window.screen.width}x${window.screen.height}\n`;
  55. if (window.electronAPI) {
  56. info += `Electron: ${window.electronAPI.versions.electron}\n`;
  57. info += `Chrome: ${window.electronAPI.versions.chrome}\n`;
  58. info += `Node: ${window.electronAPI.versions.node}\n`;
  59. }
  60. debugOutput.textContent = info;
  61. }
  62. });
  63. // 添加直接访问路由的按钮事件
  64. document.getElementById('loadReport').addEventListener('click', function() {
  65. if (window.electronAPI && window.electronAPI.loadApp) {
  66. window.electronAPI.loadApp('/report');
  67. }
  68. });
  69. document.getElementById('loadTest').addEventListener('click', function() {
  70. if (window.electronAPI && window.electronAPI.loadApp) {
  71. window.electronAPI.loadApp('/test');
  72. }
  73. });
  74. // 添加保存设置的功能
  75. document.getElementById('saveSettings').addEventListener('click', function() {
  76. const defaultLoad = document.getElementById('defaultLoad').checked;
  77. const statusEl = document.getElementById('settingsStatus');
  78. if (window.electronAPI && window.electronAPI.saveSettings) {
  79. window.electronAPI.saveSettings({ defaultLoad: defaultLoad });
  80. statusEl.textContent = '设置已保存: ' + (defaultLoad ? '直接加载报表页面' : '显示测试页面');
  81. statusEl.style.display = 'block';
  82. // 3秒后隐藏状态信息
  83. setTimeout(() => {
  84. statusEl.style.display = 'none';
  85. }, 3000);
  86. } else {
  87. alert('无法保存设置,electronAPI未定义');
  88. }
  89. });
  90. // 在页面加载时获取当前设置
  91. window.addEventListener('DOMContentLoaded', async function() {
  92. if (window.electronAPI && window.electronAPI.getSettings) {
  93. try {
  94. const settings = await window.electronAPI.getSettings();
  95. console.log('当前设置:', settings);
  96. // 更新复选框状态
  97. if (settings && typeof settings.defaultLoad === 'boolean') {
  98. document.getElementById('defaultLoad').checked = settings.defaultLoad;
  99. }
  100. } catch (err) {
  101. console.error('获取设置失败:', err);
  102. }
  103. }
  104. });
  105. </script>
  106. </body>
  107. </html>