Browse Source

✨ feat(login): 添加UMD演示页面入口链接

- 在登录页面添加"进入 UMD 格式演示页面"链接按钮
- 配置链接样式,使用绿色文本和适当间距

📝 docs(umd-demo): 更新UMD演示页面内容

- 移除AMD加载器相关按钮和代码
- 更新使用说明,调整SDK使用方式描述
- 简化优势说明,突出直接使用和浏览器兼容性
- 直接通过script标签引入UMD SDK

♻️ refactor(umd-demo): 优化SDK加载逻辑

- 移除动态加载SDK功能,改为直接script引入
- 简化loadUmdSdk函数,仅检查SDK加载状态
- 页面加载后自动检查SDK状态,延迟100ms确保加载完成
yourname 2 months ago
parent
commit
19c89683b2
3 changed files with 43 additions and 66 deletions
  1. 18 66
      public/umd-demo.html
  2. 15 0
      src/pages/login/index.module.scss
  3. 10 0
      src/pages/login/index.tsx

+ 18 - 66
public/umd-demo.html

@@ -232,9 +232,6 @@
 
           <div class="buttons">
             <button class="btn btn-primary" onclick="loadUmdSdk()" id="loadBtn">加载UMD SDK</button>
-            <button class="btn btn-success" onclick="testAmdLoader()" id="amdBtn" disabled>
-              测试AMD加载器
-            </button>
           </div>
         </div>
 
@@ -293,17 +290,17 @@
 
         <div class="info-box">
           <h3>💡 使用说明</h3>
-          <p>此页面演示了UMD格式SDK的多种使用方式:</p>
+          <p>此页面演示了UMD格式SDK的使用方式:</p>
           <ul>
             <li><strong>全局变量方式</strong>: 通过 window.SttSdkCore 访问SDK</li>
-            <li><strong>AMD加载器</strong>: 使用RequireJS等AMD加载器</li>
-            <li><strong>CommonJS</strong>: 在Node.js环境中使用</li>
+            <li><strong>直接script引入</strong>: 无需构建工具,直接使用</li>
+            <li><strong>兼容性好</strong>: 支持各种浏览器环境</li>
           </ul>
           <p>UMD格式的优势:</p>
           <ul>
-            <li>兼容多种模块系统</li>
             <li>无需构建工具即可使用</li>
             <li>适合快速原型开发和演示</li>
+            <li>兼容现代浏览器环境</li>
           </ul>
         </div>
 
@@ -311,8 +308,8 @@
       </div>
     </div>
 
-    <!-- 引入RequireJS作为AMD加载器示例 -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
+    <!-- 直接使用script标签加载UMD格式的SDK -->
+    <script src="/packages/stt-sdk-core/dist/index.umd.js"></script>
 
     <script>
       let sdk = null
@@ -347,67 +344,20 @@
         log.innerHTML = '<div class="log-entry">日志已清空</div>'
       }
 
-      // 动态加载UMD格式的SDK
+      // 检查UMD SDK加载状态
       function loadUmdSdk() {
-        addTestLog("开始加载UMD格式SDK...")
-        updateStatus("正在加载UMD SDK...", "loading")
+        addTestLog("检查UMD SDK加载状态...")
+        updateStatus("检查SDK加载状态...", "loading")
 
         // 检查是否已加载
         if (window.SttSdkCore) {
-          addTestLog("UMD SDK已加载", "success")
+          addTestLog("UMD SDK已加载", "success")
           updateStatus("UMD SDK已加载", "success")
           enableButtons()
-          return
-        }
-
-        // 动态创建script标签加载UMD SDK
-        const script = document.createElement("script")
-        script.src = "/packages/stt-sdk-core/dist/index.umd.js"
-        script.type = "text/javascript"
-        script.async = true
-
-        script.onload = () => {
-          addTestLog("UMD SDK加载成功", "success")
-          updateStatus("UMD SDK加载成功", "success")
-          enableButtons()
-        }
-
-        script.onerror = () => {
-          addTestLog("UMD SDK加载失败", "error")
+        } else {
+          addTestLog("❌ UMD SDK未加载,请确保script标签正确引入", "error")
           updateStatus("UMD SDK加载失败", "error")
         }
-
-        document.head.appendChild(script)
-      }
-
-      // 测试AMD模块加载器
-      function testAmdLoader() {
-        addTestLog("开始测试AMD模块加载器...")
-
-        // 配置RequireJS
-        require.config({
-          paths: {
-            "stt-sdk-core": "/packages/stt-sdk-core/dist/index.umd",
-          },
-        })
-
-        // 使用AMD方式加载SDK
-        require(["stt-sdk-core"], function (SttSdkCore) {
-          addTestLog("AMD方式加载SDK成功", "success")
-
-          // 测试SDK功能
-          try {
-            const SttSdk = SttSdkCore.default || SttSdkCore.SttSdk
-            const testSdk = new SttSdk()
-
-            addTestLog("AMD方式创建SDK实例成功", "success")
-            addTestLog("AMD模块加载器测试完成", "success")
-          } catch (error) {
-            addTestLog("AMD方式创建SDK实例失败: " + error, "error")
-          }
-        }, function (error) {
-          addTestLog("AMD方式加载SDK失败: " + error, "error")
-        })
       }
 
       // 初始化SDK
@@ -564,14 +514,16 @@
 
       // 启用按钮
       function enableButtons() {
-        document.getElementById("amdBtn").disabled = false
         document.getElementById("initBtn").disabled = false
       }
 
-      // 页面加载完成后自动加载SDK
+      // 页面加载完成后检查SDK状态
       window.addEventListener("load", function () {
-        addTestLog("页面加载完成,开始自动加载UMD SDK...")
-        loadUmdSdk()
+        addTestLog("页面加载完成,检查UMD SDK状态...")
+        // 延迟检查,确保script标签已加载
+        setTimeout(() => {
+          loadUmdSdk()
+        }, 100)
       })
     </script>
   </body>

+ 15 - 0
src/pages/login/index.module.scss

@@ -134,6 +134,21 @@
       }
     }
 
+    .umdDemoLink {
+      margin-top: 8px;
+      text-align: center;
+
+      :global(.ant-btn-link) {
+        color: #52c41a;
+        font-size: 14px;
+        padding: 4px 8px;
+
+        &:hover {
+          color: #73d13d;
+        }
+      }
+    }
+
     .version {
       margin-top: 16px;
       color: #6d7278;

+ 10 - 0
src/pages/login/index.tsx

@@ -81,6 +81,10 @@ const LoginPage = () => {
     nav("/sdk-test")
   }
 
+  const onClickUmdDemo = () => {
+    window.open("/umd-demo.html", "_blank")
+  }
+
   return (
     <div className={styles.loginPage}>
       {contextHolder}
@@ -133,6 +137,12 @@ const LoginPage = () => {
           </Button>
         </div>
 
+        <div className={styles.umdDemoLink}>
+          <Button type="link" onClick={onClickUmdDemo}>
+            🌐 进入 UMD 格式演示页面
+          </Button>
+        </div>
+
         <div className={styles.version}>Version {version}</div>
       </section>
     </div>