<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API 文档中心</title>
<style>
:root {
--primary-color: #4361ee;
--primary-light: #e6f0ff;
--secondary-color: #3a0ca3;
--text-color: #2b2d42;
--light-text: #8d99ae;
--border-color: #edf2f4;
--bg-color: #f8f9fa;
--code-bg: #f1f3f5;
--sidebar-bg: #ffffff;
--hover-bg: #f1f5fe;
--active-bg: #e6f0ff;
--shadow: 0 2px 8px rgba(0,0,0,0.05);
--success-color: #2e7d32;
--error-color: #d32f2f;
--warning-color: #ed6c02;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
body {
color: var(--text-color);
line-height: 1.6;
display: flex;
min-height: 100vh;
background-color: var(--bg-color);
}
/* 侧边导航 */
.sidebar {
width: 280px;
background-color: var(--sidebar-bg);
height: 100vh;
overflow-y: auto;
position: sticky;
top: 0;
transition: all 0.3s ease;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
}
.sidebar-header {
padding: 18px 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--border-color);
background-color: var(--sidebar-bg);
position: sticky;
top: 0;
z-index: 10;
}
.sidebar-header h2 {
color: var(--primary-color);
font-size: 1.3rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.sidebar-header h2::before {
content: "📚";
font-size: 1.1em;
}
.toggle-btn {
background: none;
border: none;
font-size: 1.2rem;
cursor: pointer;
color: var(--light-text);
display: none;
padding: 5px;
border-radius: 4px;
transition: all 0.2s;
}
.toggle-btn:hover {
background-color: var(--hover-bg);
color: var(--primary-color);
}
.search-box {
padding: 16px 20px;
border-bottom: 1px solid var(--border-color);
position: sticky;
top: 60px;
background-color: var(--sidebar-bg);
z-index: 9;
}
.search-box input {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 0.9rem;
transition: all 0.2s;
background-color: var(--bg-color);
}
.search-box input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px var(--primary-light);
}
.nav-menu {
list-style: none;
padding: 8px 0;
flex-grow: 1;
overflow-y: auto;
}
.nav-item {
margin: 4px 12px;
border-radius: 6px;
overflow: hidden;
transition: all 0.2s;
}
.nav-item:hover {
background-color: var(--hover-bg);
}
.nav-item-header {
padding: 10px 14px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-weight: 500;
font-size: 0.95rem;
color: var(--text-color);
transition: all 0.2s;
}
.nav-item-header:hover {
color: var(--primary-color);
}
.nav-item-header.active {
color: var(--primary-color);
font-weight: 600;
}
.nav-item-header .arrow {
transition: transform 0.3s ease;
color: var(--light-text);
font-size: 0.9em;
}
.nav-item-header.active .arrow {
transform: rotate(90deg);
color: var(--primary-color);
}
.submenu {
list-style: none;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding-left: 8px;
}
.submenu.show {
max-height: 1000px;
}
.submenu-item {
padding: 8px 14px 8px 28px;
cursor: pointer;
font-size: 0.9rem;
color: var(--light-text);
position: relative;
transition: all 0.2s;
border-radius: 4px;
margin: 2px 8px;
}
.submenu-item:hover {
color: var(--primary-color);
background-color: var(--hover-bg);
}
.submenu-item.active {
color: var(--primary-color);
background-color: var(--active-bg);
font-weight: 500;
}
.submenu-item.active::before {
content: "";
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 16px;
background-color: var(--primary-color);
border-radius: 2px;
}
/* 主内容区 */
.main-content {
flex: 1;
padding: 30px;
background-color: var(--bg-color);
overflow-y: auto;
}
.api-section {
background-color: white;
border-radius: 8px;
box-shadow: var(--shadow);
margin-bottom: 30px;
padding: 25px;
transition: all 0.3s ease;
}
.api-section:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.api-header {
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid var(--border-color);
}
.api-title {
font-size: 1.8rem;
color: var(--text-color);
margin-bottom: 10px;
font-weight: 600;
}
.api-method {
display: inline-block;
padding: 5px 10px;
border-radius: 4px;
font-weight: bold;
font-size: 0.8rem;
text-transform: uppercase;
margin-right: 10px;
letter-spacing: 0.5px;
}
.method-get {
background-color: #e6f7ff;
color: #1890ff;
border: 1px solid #91d5ff;
}
.method-post {
background-color: #f6ffed;
color: #52c41a;
border: 1px solid #b7eb8f;
}
.method-put {
background-color: #fffbe6;
color: #faad14;
border: 1px solid #ffe58f;
}
.method-delete {
background-color: #fff1f0;
color: #f5222d;
border: 1px solid #ffa39e;
}
.api-url {
font-family: 'Roboto Mono', monospace;
background-color: var(--code-bg);
padding: 8px 12px;
border-radius: 4px;
display: inline-block;
margin-top: 10px;
word-break: break-all;
font-size: 0.9rem;
}
.api-description {
margin: 20px 0;
color: var(--text-color);
line-height: 1.7;
}
.api-params {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 0.95rem;
box-shadow: 0 0 0 1px var(--border-color);
border-radius: 6px;
overflow: hidden;
}
.api-params th, .api-params td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
.api-params th {
background-color: var(--bg-color);
font-weight: 600;
}
.api-params tr:last-child td {
border-bottom: none;
}
.api-params tr:hover {
background-color: var(--hover-bg);
}
.response-title {
margin: 20px 0 10px;
font-weight: 600;
font-size: 1.1rem;
color: var(--text-color);
}
.response-examples {
margin: 25px 0;
}
.response-example {
margin-bottom: 20px;
}
.response-example h4 {
font-size: 1rem;
margin-bottom: 8px;
color: var(--text-color);
display: flex;
align-items: center;
}
.response-example h4 .status-code {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.8rem;
margin-left: 10px;
background-color: var(--bg-color);
}
.status-success {
color: var(--success-color);
border: 1px solid rgba(46, 125, 50, 0.3);
}
.status-error {
color: var(--error-color);
border: 1px solid rgba(211, 47, 47, 0.3);
}
.status-warning {
color: var(--warning-color);
border: 1px solid rgba(237, 108, 2, 0.3);
}
.code-block {
position: relative;
background-color: var(--code-bg);
padding: 15px;
border-radius: 6px;
font-family: 'Roboto Mono', monospace;
overflow-x: auto;
margin: 10px 0 20px;
font-size: 0.9rem;
line-height: 1.5;
border: 1px solid var(--border-color);
white-space: pre;
}
.code-block::before {
content: "JSON";
position: absolute;
top: 0;
right: 0;
background: var(--primary-color);
color: white;
padding: 2px 8px;
font-size: 0.7em;
border-bottom-left-radius: 4px;
}
/* 响应式设计 */
@media (max-width: 768px) {
body {
flex-direction: column;
}
.sidebar {
width: 100%;
height: auto;
max-height: 60px;
position: relative;
overflow: hidden;
transition: max-height 0.3s ease;
}
.sidebar.expanded {
max-height: 100vh;
}
.toggle-btn {
display: block;
}
.main-content {
padding: 20px;
}
.api-section {
padding: 20px;
}
.api-title {
font-size: 1.5rem;
}
}
/* 原有样式保持不变，只添加新样式 */
.code-tabs {
display: flex;
border-bottom: 1px solid var(--border-color);
margin-bottom: 15px;
margin-top: 15px;
}
.code-tab {
padding: 8px 16px;
cursor: pointer;
font-size: 0.9rem;
border: 1px solid transparent;
border-bottom: none;
border-radius: 4px 4px 0 0;
margin-right: 5px;
background-color: var(--bg-color);
color: var(--light-text);
}
.code-tab.active {
background-color: white;
border-color: var(--border-color);
color: var(--primary-color);
font-weight: 500;
border-bottom: 1px solid white;
margin-bottom: -1px;
}
.code-content {
display: none;
}
.code-content.active {
display: block;
}
.code-block.wxapp {
position: relative;
}
.code-block.wxapp::before {
content: "微信小程序";
background: #07C160;
}
.code-block.javascript::before {
content: "JavaScript";
background: #f7df1e;
color: #000;
}
.code-block.curl::before {
content: "cURL";
background: #555;
}
</style>
</head>
<body>
<!-- 侧边导航 -->
<aside class="sidebar">
<div class="sidebar-header">
<h2>API 文档中心</h2>
<button class="toggle-btn">☰</button>
</div>
<div class="search-box">
<input type="text" placeholder="搜索API...">
</div>
<ul class="nav-menu">
<li class="nav-item">
<div class="nav-item-header">
<span>用户管理</span>
<span class="arrow">›</span>
</div>
<ul class="submenu">
<li class="submenu-item active" data-section="user-list">获取用户列表</li>
<li class="submenu-item" data-section="user-create">创建用户</li>
<li class="submenu-item" data-section="user-detail">获取用户详情</li>
<li class="submenu-item" data-section="user-update">更新用户</li>
<li class="submenu-item" data-section="user-delete">删除用户</li>
</ul>
</li>
<li class="nav-item">
<div class="nav-item-header">
<span>产品管理</span>
<span class="arrow">›</span>
</div>
<ul class="submenu">
<li class="submenu-item" data-section="product-list">获取产品列表</li>
<li class="submenu-item" data-section="product-create">创建产品</li>
<li class="submenu-item" data-section="product-detail">获取产品详情</li>
</ul>
</li>
<li class="nav-item">
<div class="nav-item-header">
<span>订单管理</span>
<span class="arrow">›</span>
</div>
<ul class="submenu">
<li class="submenu-item" data-section="order-list">获取订单列表</li>
<li class="submenu-item" data-section="order-create">创建订单</li>
<li class="submenu-item" data-section="order-cancel">取消订单</li>
</ul>
</li>
</ul>
</aside>
<!-- 主内容区 -->
<main class="main-content">
<!-- 用户列表API -->
<section class="api-section" id="user-list">
<div class="api-header">
<h1 class="api-title">获取用户列表</h1>
<span class="api-method method-get">GET</span>
<div class="api-url">/api/v1/users</div>
</div>
<div class="api-description">
<p>获取系统中的所有用户列表，支持分页和筛选。返回的用户数据包含基本信息但不包含敏感信息如密码。</p>
</div>
<h3>请求参数</h3>
<table class="api-params">
<thead>
<tr>
<th>参数</th>
<th>类型</th>
<th>是否必填</th>
<th>描述</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td>page</td>
<td>integer</td>
<td>否</td>
<td>页码，默认为1</td>
<td>1</td>
</tr>
<tr>
<td>pageSize</td>
<td>integer</td>
<td>否</td>
<td>每页数量，默认为10，最大100</td>
<td>20</td>
</tr>
<tr>
<td>status</td>
<td>string</td>
<td>否</td>
<td>用户状态筛选，可选值：active, inactive</td>
<td>active</td>
</tr>
<tr>
<td>search</td>
<td>string</td>
<td>否</td>
<td>搜索关键词，匹配用户名或邮箱</td>
<td>john</td>
</tr>
</tbody>
</table>
<div class="response-examples">
<div class="response-example">
<h4>成功响应 <span class="status-code status-success">200 OK</span></h4>
<div class="code-block">{
"code": 200,
"message": "success",
"data": {
"list": [
{
"id": 1,
"username": "admin",
"email": "admin@example.com",
"status": "active",
"createdAt": "2023-01-01T00:00:00Z"
},
{
"id": 2,
"username": "user1",
"email": "user1@example.com",
"status": "active",
"createdAt": "2023-01-02T00:00:00Z"
}
],
"total": 42,
"page": 1,
"pageSize": 10
}
}</div>
</div>
<div class="response-example">
<h4>错误响应 <span class="status-code status-error">400 Bad Request</span></h4>
<div class="code-block">{
"code": 400,
"message": "Invalid parameters",
"errors": [
{
"field": "pageSize",
"message": "Must be less than or equal to 100"
}
]
}</div>
</div>
</div>
<!-- -->
<!-- 新增代码示例部分 -->
<h3>代码示例</h3>
<div class="code-tabs">
<div class="code-tab active" data-tab="wxapp">微信小程序</div>
<div class="code-tab" data-tab="javascript">JavaScript</div>
<div class="code-tab" data-tab="curl">cURL</div>
</div>
<div class="code-content active" data-tab="wxapp">
<div class="code-block wxapp">wx.request({
url: 'https://yourdomain.com/api/v1/users',
method: 'POST',
data: {
username: 'new_user',
email: 'user@example.com',
password: 'password123',
role: 'user'
},
header: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + wx.getStorageSync('token')
},
success(res) {
if (res.statusCode === 201) {
wx.showToast({ title: '创建成功', icon: 'success' });
}
}
});</div>
</div>
<div class="code-content" data-tab="javascript">
<div class="code-block javascript">fetch('https://yourdomain.com/api/v1/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + localStorage.getItem('token')
},
body: JSON.stringify({
username: 'new_user',
email: 'user@example.com',
password: 'password123',
role: 'user'
})
})
.then(response => response.json())
.then(data => console.log(data));</div>
</div>
<div class="code-content" data-tab="curl">
<div class="code-block curl">curl -X POST \
'https://yourdomain.com/api/v1/users' \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer YOUR_ACCESS_TOKEN' \
-d '{
"username": "new_user",
"email": "user@example.com",
"password": "password123",
"role": "user"
}'</div>
</div>
</section>
<!-- 创建用户API -->
<section class="api-section" id="user-create" style="display: none;">
<div class="api-header">
<h1 class="api-title">创建用户</h1>
<span class="api-method method-post">POST</span>
<div class="api-url">/api/v1/users</div>
</div>
<div class="api-description">
<p>创建一个新用户。需要管理员权限。</p>
</div>
<h3>请求参数</h3>
<table class="api-params">
<thead>
<tr>
<th>参数</th>
<th>类型</th>
<th>是否必填</th>
<th>描述</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td>username</td>
<td>string</td>
<td>是</td>
<td>用户名，4-20个字符，只能包含字母、数字和下划线</td>
<td>new_user</td>
</tr>
<tr>
<td>email</td>
<td>string</td>
<td>是</td>
<td>用户邮箱，必须是有效的邮箱格式</td>
<td>user@example.com</td>
</tr>
<tr>
<td>password</td>
<td>string</td>
<td>是</td>
<td>密码，6-20个字符，必须包含字母和数字</td>
<td>password123</td>
</tr>
<tr>
<td>role</td>
<td>string</td>
<td>否</td>
<td>用户角色，默认为'user'，可选：admin, user</td>
<td>user</td>
</tr>
</tbody>
</table>
<h3 class="response-title">请求示例</h3>
<div class="code-block">{
"username": "new_user",
"email": "user@example.com",
"password": "password123",
"role": "user"
}</div>
<div class="response-examples">
<div class="response-example">
<h4>成功响应 <span class="status-code status-success">201 Created</span></h4>
<div class="code-block">{
"code": 201,
"message": "User created successfully",
"data": {
"id": 3,
"username": "new_user",
"email": "user@example.com",
"status": "active",
"role": "user",
"createdAt": "2023-06-01T00:00:00Z"
}
}</div>
</div>
<div class="response-example">
<h4>错误响应 <span class="status-code status-error">409 Conflict</span></h4>
<div class="code-block">{
"code": 409,
"message": "User already exists",
"errors": [
{
"field": "email",
"message": "Email already registered"
}
]
}</div>
</div>
</div>
</section>
<!-- 用户详情API -->
<section class="api-section" id="user-detail" style="display: none;">
<div class="api-header">
<h1 class="api-title">获取用户详情</h1>
<span class="api-method method-get">GET</span>
<div class="api-url">/api/v1/users/{id}</div>
</div>
<div class="api-description">
<p>根据用户ID获取用户详细信息。</p>
</div>
<h3>路径参数</h3>
<table class="api-params">
<thead>
<tr>
<th>参数</th>
<th>类型</th>
<th>是否必填</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>integer</td>
<td>是</td>
<td>用户ID</td>
</tr>
</tbody>
</table>
<div class="response-examples">
<div class="response-example">
<h4>成功响应 <span class="status-code status-success">200 OK</span></h4>
<div class="code-block">{
"code": 200,
"message": "success",
"data": {
"id": 1,
"username": "admin",
"email": "admin@example.com",
"profile": {
"firstName": "John",
"lastName": "Doe",
"avatar": "https://example.com/avatars/1.jpg"
},
"status": "active",
"createdAt": "2023-01-01T00:00:00Z",
"updatedAt": "2023-06-15T08:30:45Z"
}
}</div>
</div>
<div class="response-example">
<h4>错误响应 <span class="status-code status-error">404 Not Found</span></h4>
<div class="code-block">{
"code": 404,
"message": "User not found"
}</div>
</div>
</div>
</section>
<!-- 更新用户API -->
<section class="api-section" id="user-update" style="display: none;">
<div class="api-header">
<h1 class="api-title">更新用户</h1>
<span class="api-method method-put">PUT</span>
<div class="api-url">/api/v1/users/{id}</div>
</div>
<div class="api-description">
<p>更新用户信息。需要管理员权限或本人操作。</p>
</div>
<h3>路径参数</h3>
<table class="api-params">
<thead>
<tr>
<th>参数</th>
<th>类型</th>
<th>是否必填</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>integer</td>
<td>是</td>
<td>用户ID</td>
</tr>
</tbody>
</table>
<h3>请求参数</h3>
<table class="api-params">
<thead>
<tr>
<th>参数</th>
<th>类型</th>
<th>是否必填</th>
<th>描述</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td>username</td>
<td>string</td>
<td>否</td>
<td>新用户名</td>
<td>new_username</td>
</tr>
<tr>
<td>email</td>
<td>string</td>
<td>否</td>
<td>新邮箱</td>
<td>new@example.com</td>
</tr>
<tr>
<td>status</td>
<td>string</td>
<td>否</td>
<td>用户状态，active/inactive</td>
<td>active</td>
</tr>
</tbody>
</table>
<h3 class="response-title">请求示例</h3>
<div class="code-block">{
"username": "new_username",
"email": "new@example.com"
}</div>
<div class="response-examples">
<div class="response-example">
<h4>成功响应 <span class="status-code status-success">200 OK</span></h4>
<div class="code-block">{
"code": 200,
"message": "User updated successfully",
"data": {
"id": 1,
"username": "new_username",
"email": "new@example.com",
"status": "active",
"updatedAt": "2023-06-20T10:30:00Z"
}
}</div>
</div>
<div class="response-example">
<h4>错误响应 <span class="status-code status-error">403 Forbidden</span></h4>
<div class="code-block">{
"code": 403,
"message": "Permission denied"
}</div>
</div>
</div>
</section>
<!-- 删除用户API -->
<section class="api-section" id="user-delete" style="display: none;">
<div class="api-header">
<h1 class="api-title">删除用户</h1>
<span class="api-method method-delete">DELETE</span>
<div class="api-url">/api/v1/users/{id}</div>
</div>
<div class="api-description">
<p>删除指定用户。需要管理员权限。</p>
</div>
<h3>路径参数</h3>
<table class="api-params">
<thead>
<tr>
<th>参数</th>
<th>类型</th>
<th>是否必填</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>integer</td>
<td>是</td>
<td>用户ID</td>
</tr>
</tbody>
</table>
<div class="response-examples">
<div class="response-example">
<h4>成功响应 <span class="status-code status-success">204 No Content</span></h4>
<div class="code-block">{
"code": 204,
"message": "User deleted successfully"
}</div>
</div>
<div class="response-example">
<h4>错误响应 <span class="status-code status-error">404 Not Found</span></h4>
<div class="code-block">{
"code": 404,
"message": "User not found"
}</div>
</div>
</div>
</section>
</main>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 导航菜单折叠功能
const navItemHeaders = document.querySelectorAll('.nav-item-header');
navItemHeaders.forEach(header => {
header.addEventListener('click', function() {
const parentItem = this.parentElement;
const isActive = this.classList.contains('active');
// 如果点击的是已激活的header，且子菜单是展开的，则关闭
if (isActive && this.nextElementSibling.classList.contains('show')) {
this.classList.remove('active');
this.nextElementSibling.classList.remove('show');
} else {
// 否则激活当前项
this.classList.add('active');
this.nextElementSibling.classList.add('show');
}
});
});
// 新增代码选项卡切换功能
const codeTabs = document.querySelectorAll('.code-tab');
codeTabs.forEach(tab => {
tab.addEventListener('click', function() {
const tabId = this.getAttribute('data-tab');
const parent = this.closest('.code-tabs').parentElement;
// 移除所有active类
parent.querySelectorAll('.code-tab').forEach(t => t.classList.remove('active'));
parent.querySelectorAll('.code-content').forEach(c => c.classList.remove('active'));
// 添加当前active类
this.classList.add('active');
parent.querySelector(`.code-content[data-tab="${tabId}"]`).classList.add('active');
});
});
// 子菜单项点击切换内容
const submenuItems = document.querySelectorAll('.submenu-item');
submenuItems.forEach(item => {
item.addEventListener('click', function() {
// 移除所有active类
submenuItems.forEach(i => i.classList.remove('active'));
// 添加当前active类
this.classList.add('active');
// 隐藏所有API部分
document.querySelectorAll('.api-section').forEach(section => {
section.style.display = 'none';
});
// 显示选中的API部分
const sectionId = this.getAttribute('data-section');
document.getElementById(sectionId).style.display = 'block';
// 确保父菜单展开
this.closest('.submenu').classList.add('show');
this.closest('.nav-item').querySelector('.nav-item-header').classList.add('active');
// 滚动到顶部
window.scrollTo(0, 0);
});
});
// 移动端菜单切换按钮
const toggleBtn = document.querySelector('.toggle-btn');
const sidebar = document.querySelector('.sidebar');
toggleBtn.addEventListener('click', function() {
sidebar.classList.toggle('expanded');
this.textContent = sidebar.classList.contains('expanded') ? '✕' : '☰';
});
// 搜索功能 - 添加防抖优化
let searchTimeout;
const searchInput = document.querySelector('.search-box input');
searchInput.addEventListener('input', function() {
clearTimeout(searchTimeout);
searchTimeout = setTimeout(() => {
const searchTerm = this.value.toLowerCase().trim();
const submenuItems = document.querySelectorAll('.submenu-item');
if (searchTerm === '') {
// 清空搜索时恢复所有项
submenuItems.forEach(item => {
item.style.display = 'block';
item.closest('.submenu').classList.remove('force-show');
item.closest('.nav-item').querySelector('.nav-item-header').classList.remove('force-active');
});
return;
}
submenuItems.forEach(item => {
const text = item.textContent.toLowerCase();
if (text.includes(searchTerm)) {
item.style.display = 'block';
// 强制显示父菜单
item.closest('.submenu').classList.add('show', 'force-show');
item.closest('.nav-item').querySelector('.nav-item-header').classList.add('active', 'force-active');
} else {
item.style.display = 'none';
}
});
}, 300);
});
// 初始化显示第一个API部分
document.querySelector('.submenu-item.active').click();
});
</script>
</body>
</html>-
内容区域样式优化：
-
改进了API卡片的外观，添加了悬停效果
-
优化了代码块的显示样式
-
增强了表格的可读性
-
添加了响应式设计，确保在移动设备上也能良好显示
-
-
交互改进：
-
点击菜单项后会自动滚动到页面顶部
-
改进了移动端菜单的切换按钮图标
-
增强了搜索功能的用户体验
-
-
内容增强：
-
为API文档添加了更多详细信息和示例
-
增加了错误码表格
-
添加了请求示例部分
-
现在这个版本既保留了优化后的美观左侧菜单，又完整显示了所有API文档内容，并且两者风格统一，整体视觉效果更加专业和现代化。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
