107 lines
3.7 KiB
HTML
107 lines
3.7 KiB
HTML
<!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"><!-- 1. 引入样式 --></span><br/>
|
||
<link rel=<span class="hl">"stylesheet"</span> href=<span class="hl">"https://web.gw.zgitm.com/widgets/user-chip.css"</span> /><br/><br/>
|
||
<span class="cm"><!-- 2. 占位元素（只需配 API 网关地址） --></span><br/>
|
||
<div id=<span class="hl">"mokee-user-chip"</span><br/>
|
||
data-api-base=<span class="hl">"https://gw.server.zgitm.com"</span>></div><br/><br/>
|
||
<span class="cm"><!-- 3. 引入脚本（自动渲染，login/select 地址自动推断） --></span><br/>
|
||
<script src=<span class="hl">"https://web.gw.zgitm.com/widgets/user-chip.js"</span>></script>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第 3 步：引入 Widget 脚本（放 body 底部，确保 DOM 就绪） -->
|
||
<script src="/widgets/user-chip.js"></script>
|
||
</body>
|
||
</html>
|