118 lines
4.2 KiB
HTML
118 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>{{DOC_TITLE}}</title>
|
|
<!-- 默认主题 -->
|
|
<link href="3.x/theme-material.css" id="swagger-theme" rel="stylesheet" type="text/css">
|
|
<link href="swagger-ui.css" rel="stylesheet" type="text/css">
|
|
<style>
|
|
.theme-selector {
|
|
position: fixed;
|
|
top: 70px;
|
|
right: 0px;
|
|
z-index: 100;
|
|
background: white;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
select {
|
|
padding: 5px;
|
|
border-radius: 3px;
|
|
border: 1px solid #ccc;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!--
|
|
<div class="theme-selector">
|
|
<label for="theme-select">选择主题: </label>
|
|
<select id="theme-select" onchange="changeTheme(this.value)">
|
|
<option value="theme-default">默认</option>
|
|
<option value="3.x-theme-material">3.x-Material</option>
|
|
<option value="3.x-theme-monokai">3.x-Monokai</option>
|
|
<option value="3.x-theme-feeling-blue">3.x-Feeling Blue</option>
|
|
<option value="3.x-theme-flattop">3.x-Flattop</option>
|
|
<option value="3.x-theme-newspaper">3.x-Newspaper</option>
|
|
<option value="3.x-theme-outline">3.x-Outline</option>
|
|
<option value="2.x-theme-felling-blue.css">2.x-theme-felling-blue.css</option>
|
|
<option value="2.x-theme-flattop.css">2.x-theme-flattop.css</option>
|
|
<option value="2.x-theme-material.css">2.x-theme-material.css</option>
|
|
<option value="2.x-theme-monokai.css">2.x-theme-monokai.css</option>
|
|
<option value="2.x-theme-muted.css">2.x-theme-muted.css</option>
|
|
<option value="2.x-theme-newspaper.css">2.x-theme-newspaper.css</option>
|
|
<option value="2.x-theme-outline.css">2.x-theme-outline.css</option>
|
|
</select>
|
|
</div>
|
|
-->
|
|
|
|
<div id="swagger-ui"></div>
|
|
|
|
<script src="swagger-ui-bundle.js"></script>
|
|
<script src="swagger-ui-standalone-preset.js"></script>
|
|
|
|
<script>
|
|
// 主题映射表
|
|
const themes = {
|
|
'theme-default': '3.x/theme-material.css',
|
|
'3.x-theme-material': '3.x/theme-material.css',
|
|
'3.x-theme-monokai': '3.x/theme-monokai.css',
|
|
'3.x-theme-feeling-blue': '3.x/theme-feeling-blue.css',
|
|
'3.x-theme-flattop': '3.x/theme-flattop.css',
|
|
'3.x-theme-newspaper': '3.x/theme-newspaper.css',
|
|
'3.x-theme-outline': '3.x/theme-outline.css',
|
|
'2.x-theme-felling-blue.css': '2.x/theme-felling-blue.css',
|
|
'2.x-theme-flattop.css': '2.x/theme-felling-flattop.css',
|
|
'2.x-theme-material.css': '2.x/theme-material.css',
|
|
'2.x-theme-monokai.css': '2.x/theme-monokai.css',
|
|
'2.x-theme-muted.css': '2.x/theme-muted.css',
|
|
'2.x-theme-newspaper.css': '2.x/theme-newspaper.css',
|
|
'2.x-theme-outline.css': '2.x/theme-outline.css',
|
|
};
|
|
|
|
// 切换主题函数
|
|
function changeTheme(themeName) {
|
|
const themeLink = document.getElementById('swagger-theme');
|
|
|
|
if (themeName === 'theme-default') {
|
|
themeLink.href = themes['3.x-theme-material']; // 使用默认主题
|
|
} else {
|
|
themeLink.href = themes[themeName];
|
|
}
|
|
|
|
// 保存到本地存储
|
|
localStorage.setItem('swagger-theme', themeName);
|
|
}
|
|
|
|
// 页面加载时恢复主题
|
|
window.onload = function() {
|
|
// 从本地存储恢复主题
|
|
const savedTheme = localStorage.getItem('swagger-theme') || 'theme-material';
|
|
// document.getElementById('theme-select').value = savedTheme;
|
|
|
|
if (savedTheme !== 'theme-default') {
|
|
document.getElementById('swagger-theme').href = themes[savedTheme];
|
|
}
|
|
|
|
// 初始化 Swagger UI
|
|
window.ui = SwaggerUIBundle({
|
|
url: "{{DOC_PATH}}", // 你的 API 文档地址
|
|
dom_id: '#swagger-ui',
|
|
deepLinking: true,
|
|
presets: [
|
|
SwaggerUIBundle.presets.apis,
|
|
SwaggerUIStandalonePreset
|
|
],
|
|
plugins: [
|
|
SwaggerUIBundle.plugins.DownloadUrl
|
|
],
|
|
layout: "StandaloneLayout",
|
|
filter: true,
|
|
defaultModelsExpandDepth: 1,
|
|
defaultModelExpandDepth: 1
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |