test_version_ui.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  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>版本切换UI测试</title>
  7. <link rel="stylesheet" type="text/css" href="_build/versions/latest/_static/version_menu.css" />
  8. <style>
  9. body {
  10. font-family: Arial, sans-serif;
  11. margin: 20px;
  12. background: #f5f5f5;
  13. }
  14. .test-container {
  15. max-width: 800px;
  16. margin: 0 auto;
  17. background: white;
  18. padding: 20px;
  19. border-radius: 8px;
  20. box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  21. }
  22. .sidebar {
  23. width: 250px;
  24. background: #f8f9fa;
  25. padding: 15px;
  26. border-radius: 5px;
  27. margin-bottom: 20px;
  28. }
  29. .icon-home {
  30. font-size: 19px;
  31. font-weight: 650;
  32. margin-top: 8px;
  33. margin-bottom: 2px;
  34. display: block;
  35. text-decoration: none;
  36. color: #333;
  37. }
  38. .wy-nav-side {
  39. position: relative;
  40. }
  41. .wy-side-scroll {
  42. position: relative;
  43. }
  44. .wy-side-nav-search {
  45. position: relative;
  46. }
  47. #rtd-search-form {
  48. margin: 10px 0;
  49. }
  50. .test-info {
  51. background: #e7f3ff;
  52. padding: 15px;
  53. border-radius: 5px;
  54. margin: 20px 0;
  55. }
  56. .test-info h3 {
  57. margin-top: 0;
  58. color: #0066cc;
  59. }
  60. </style>
  61. </head>
  62. <body>
  63. <div class="test-container">
  64. <h1>版本切换UI测试页面</h1>
  65. <div class="test-info">
  66. <h3>测试说明</h3>
  67. <p>这个页面用于测试版本切换UI是否正常工作。如果版本切换菜单出现在下面的侧边栏中,说明功能正常。</p>
  68. <p>当前页面路径: <code id="current-path"></code></p>
  69. </div>
  70. <!-- 模拟侧边栏 -->
  71. <div class="sidebar wy-nav-side">
  72. <div class="wy-side-scroll">
  73. <div class="wy-side-nav-search">
  74. <a href="#" class="icon icon-home">EtherKit_SDK_Docs</a>
  75. <div role="search">
  76. <form id="rtd-search-form" class="wy-form" action="search.html" method="get">
  77. <input type="text" name="q" placeholder="搜索文档" aria-label="搜索文档" />
  78. <input type="hidden" name="check_keywords" value="yes" />
  79. <input type="hidden" name="area" value="default" />
  80. </form>
  81. </div>
  82. </div>
  83. <div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="导航菜单">
  84. <p class="caption" role="heading"><span class="caption-text">目录</span></p>
  85. <ul>
  86. <li><a href="#">快速上手篇</a></li>
  87. <li><a href="#">基础篇</a></li>
  88. <li><a href="#">驱动篇</a></li>
  89. <li><a href="#">组件篇</a></li>
  90. <li><a href="#">工业协议篇</a></li>
  91. </ul>
  92. </div>
  93. </div>
  94. </div>
  95. <div class="test-info">
  96. <h3>调试信息</h3>
  97. <div id="debug-info">
  98. <p>等待版本菜单初始化...</p>
  99. </div>
  100. </div>
  101. </div>
  102. <script src="_build/versions/latest/_static/version_menu.js"></script>
  103. <script>
  104. // 显示当前路径
  105. document.getElementById('current-path').textContent = window.location.pathname;
  106. // 监听版本菜单事件
  107. document.addEventListener('version-changed', function(e) {
  108. console.log('版本切换事件:', e.detail);
  109. document.getElementById('debug-info').innerHTML += `
  110. <p>版本切换事件: ${e.detail.version} -> ${e.detail.versionName}</p>
  111. `;
  112. });
  113. // 定期检查版本菜单是否存在
  114. let checkCount = 0;
  115. const checkVersionMenu = setInterval(() => {
  116. checkCount++;
  117. const versionMenu = document.querySelector('.rtd-version-menu');
  118. if (versionMenu) {
  119. document.getElementById('debug-info').innerHTML += `
  120. <p>✓ 版本菜单已创建 (${checkCount}秒后)</p>
  121. `;
  122. clearInterval(checkVersionMenu);
  123. } else if (checkCount >= 10) {
  124. document.getElementById('debug-info').innerHTML += `
  125. <p>✗ 版本菜单未创建 (10秒后)</p>
  126. `;
  127. clearInterval(checkVersionMenu);
  128. } else {
  129. document.getElementById('debug-info').innerHTML = `
  130. <p>检查版本菜单... (${checkCount}/10)</p>
  131. `;
  132. }
  133. }, 1000);
  134. </script>
  135. </body>
  136. </html>