初始化

2026-07-15 16:13:27 +08:00
parent 6d6f559793
commit c4023c1623
276 changed files with 42622 additions and 0 deletions
--- a/mokee-gateway-web/public/demo-widget.html
+++ b/mokee-gateway-web/public/demo-widget.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Mokee UserChip Widget — 接入演示</title>
+  <!--
+    外部系统接入只需这三步：
+    1. 引入 Widget 样式
+    2. 放置占位元素 <div id="mokee-user-chip">
+    3. 引入 Widget 脚本
+  -->
+  <!-- 第 1 步：引入 Widget 样式 -->
+  <link rel="stylesheet" href="/widgets/user-chip.css" />
+  <style>
+    /* 演示页面自己的样式（不属于 Widget） */
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      background: #f5f5f5;
+      min-height: 100vh;
+    }
+    .demo-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 60px;
+      padding: 0 24px;
+      background: #fff;
+      border-bottom: 1px solid #e5e7eb;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+    }
+    .demo-header-left {
+      font-size: 18px;
+      font-weight: 700;
+      color: #1f2937;
+    }
+    .demo-header-right {
+      display: flex;
+      align-items: center;
+    }
+    .demo-body {
+      max-width: 800px;
+      margin: 40px auto;
+      padding: 32px;
+      background: #fff;
+      border-radius: 12px;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+    .demo-body h2 { margin-bottom: 12px; color: #1f2937; font-size: 20px; }
+    .demo-body p  { color: #6b7280; line-height: 1.8; margin-bottom: 8px; }
+    .demo-code {
+      margin-top: 16px; padding: 16px 20px;
+      background: #1e293b; color: #e2e8f0;
+      border-radius: 8px; font-family: 'Consolas', 'SF Mono', monospace;
+      font-size: 13px; line-height: 1.8; overflow-x: auto;
+    }
+    .demo-code .hl { color: #6366f1; }
+    .demo-code .cm { color: #6b7280; }
+  </style>
+</head>
+<body>
+  <!--
+    模拟外部系统的顶部导航栏
+    右上角放 Mokee UserChip Widget
+  -->
+  <header class="demo-header">
+    <div class="demo-header-left">某业务系统</div>
+    <div class="demo-header-right">
+      <!--
+        ===== 第 2 步：占位元素 =====
+        data-api-base 指向网关 API 地址
+        loginUrl 和 selectUrl 无需配置，自动从脚本 URL 推断
+      -->
+      <div
+        id="mokee-user-chip"
+        data-api-base="http://127.0.0.1:9000"
+      ></div>
+    </div>
+  </header>
+
+  <div class="demo-body">
+    <h2>欢迎使用某业务系统</h2>
+    <p>
+      右上角的用户头像下拉组件由 <b>Mokee Gateway</b> 提供。
+      外部系统只需三行代码即可接入，无需手写登录/鉴权/用户信息获取逻辑。
+    </p>
+    <p>
+      组件功能：未登录显示"登录"按钮；已登录显示用户头像 + 用户名，
+      下拉菜单包含"切换系统"和"退出登录"。
+    </p>
+    <div class="demo-code">
+      <span class="cm">&lt;!-- 1. 引入样式 --&gt;</span><br/>
+      &lt;link rel=<span class="hl">"stylesheet"</span> href=<span class="hl">"https://web.gw.zgitm.com/widgets/user-chip.css"</span> /&gt;<br/><br/>
+      <span class="cm">&lt;!-- 2. 占位元素（只需配 API 网关地址） --&gt;</span><br/>
+      &lt;div id=<span class="hl">"mokee-user-chip"</span><br/>
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-api-base=<span class="hl">"https://gw.server.zgitm.com"</span>&gt;&lt;/div&gt;<br/><br/>
+      <span class="cm">&lt;!-- 3. 引入脚本（自动渲染，login/select 地址自动推断） --&gt;</span><br/>
+      &lt;script src=<span class="hl">"https://web.gw.zgitm.com/widgets/user-chip.js"</span>&gt;&lt;/script&gt;
+    </div>
+  </div>
+
+  <!-- 第 3 步：引入 Widget 脚本（放 body 底部，确保 DOM 就绪） -->
+  <script src="/widgets/user-chip.js"></script>
+</body>
+</html>