Api文档页面 html模板

原创 已于 2025-06-30 12:31:04 修改 · 220 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#deepseek #html5 #css #JavaScript

于 2025-06-25 11:41:40 首次发布


<!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>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <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 {
            border-radius: 8px;
            margin-bottom: 30px;
            padding: 25px;
            transition: all 0.3s ease;
        }

        .api-section-bg {
            background-color: white;
            box-shadow: var(--shadow);
        }

        /* .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.uniapp {
            position: relative;
        }

        .code-block.uniapp::before {
            content: "UNI-APP";
            background: #1ba035;
        }

        .code-block.javascript::before {
            content: "JavaScript";
            background: #f7df1e;
            color: #000;
        }

        .code-block.curl::before {
            content: "cURL";
            background: #555;
        }

        /*  */
        /* 表单容器样式 */
        .form-section {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            margin-bottom: 30px;
            padding: 25px;
            transition: all 0.3s ease;
        }

        .form-section:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        /* 表单头部样式 */
        .form-header {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }

        .form-title {
            font-size: 1.8rem;
            color: var(--text-color);
            margin-bottom: 10px;
            font-weight: 600;
        }

        .form-description {
            margin: 20px 0;
            color: var(--text-color);
            line-height: 1.7;
        }

        /* 步骤指示器样式 */
        .form-steps {
            display: flex;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }

        .step {
            flex: 1;
            position: relative;
            text-align: center;
            padding: 0 10px;
        }

        .step-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: var(--bg-color);
            color: var(--light-text);
            font-weight: 500;
            margin-bottom: 8px;
            position: relative;
            z-index: 2;
        }

        .step.active .step-number {
            background-color: var(--primary-color);
            color: white;
        }

        .step.completed .step-number {
            background-color: var(--success-color);
            color: white;
        }

        .step-title {
            font-size: 0.9rem;
            color: var(--light-text);
        }

        .step.active .step-title {
            color: var(--primary-color);
            font-weight: 500;
        }

        .step.completed .step-title {
            color: var(--text-color);
        }

        .step::after {
            content: "";
            position: absolute;
            top: 15px;
            left: 50%;
            right: -50%;
            height: 2px;
            background-color: var(--border-color);
            z-index: 1;
        }

        .step:last-child::after {
            display: none;
        }

        .step.completed::after {
            background-color: var(--success-color);
        }

        /* 表单布局样式 */
        .form-row {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10px;
        }

        .form-col {
            flex: 1;
            padding: 0 10px;
            min-width: 250px;
        }

        /* 表单组样式 */
        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-color);
        }

        .form-label.required::after {
            content: " *";
            color: var(--error-color);
        }

        .form-control {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 0.95rem;
            transition: all 0.2s;
            background-color: white;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px var(--primary-light);
        }

        .form-select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238d99ae' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 16px;
        }

        /* 卡片式表单组样式 */
        .form-card {
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 15px;
            margin-bottom: 20px;
            background-color: white;
        }

        .form-card-header {
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
            font-weight: 500;
            color: var(--text-color);
        }

        /* 文件上传样式 */
        .file-upload {
            border: 1px dashed var(--border-color);
            border-radius: 6px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            background-color: var(--bg-color);
        }

        .file-upload:hover {
            border-color: var(--primary-color);
            background-color: var(--primary-light);
        }

        .file-upload input {
            display: none;
        }

        .file-upload-icon {
            font-size: 2rem;
            color: var(--light-text);
            margin-bottom: 10px;
        }

        .file-upload-text {
            color: var(--light-text);
            margin-bottom: 5px;
        }

        .file-upload-hint {
            font-size: 0.85rem;
            color: var(--light-text);
        }

        /* 表单复选框/单选框样式 */
        .form-check {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .form-check-input {
            margin-right: 10px;
            width: 16px;
            height: 16px;
        }

        .form-check-label {
            font-size: 0.95rem;
            color: var(--text-color);
        }

        /* 表单验证样式 */
        .is-invalid {
            border-color: var(--error-color);
        }

        .is-invalid:focus {
            box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.2);
        }

        .invalid-feedback {
            color: var(--error-color);
            font-size: 0.85rem;
            margin-top: 6px;
        }

        /* 表单底部按钮样式 */
        .form-footer {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: flex-end;
        }

        .btn {
            padding: 10px 20px;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            border: none;
            font-size: 0.95rem;
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }

        .btn-primary:hover {
            background-color: var(--secondary-color);
        }

        .btn-outline {
            background-color: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-color);
            margin-right: 10px;
        }

        .btn-outline:hover {
            background-color: var(--hover-bg);
        }

        /* 数据概览卡片 */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 20px;
            transition: all 0.3s ease;
        }

        .stat-card:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .stat-title {
            font-size: 0.95rem;
            color: var(--light-text);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }

        .stat-value {
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 5px;
        }

        .stat-change {
            font-size: 0.85rem;
            display: flex;
            align-items: center;
        }

        .stat-change.up {
            color: var(--success-color);
        }

        .stat-change.down {
            color: var(--error-color);
        }

        .stat-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 1.2rem;
        }

        /* 图表区域 */
        .chart-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 25px;
            margin-bottom: 30px;
            transition: all 0.3s ease;
        }

        .chart-container:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .chart-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--text-color);
        }

        .chart-actions {
            display: flex;
            gap: 10px;
        }

        .chart-btn {
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 0.85rem;
            background-color: var(--bg-color);
            border: none;
            cursor: pointer;
            transition: all 0.2s;
        }

        .chart-btn.active {
            background-color: var(--primary-color);
            color: white;
        }

        .chart-wrapper {
            height: 300px;
            width: 100%;
        }

        /* 最近活动 */
        .activity-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 25px;
            transition: all 0.3s ease;
        }

        .activity-container:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .activity-header {
            margin-bottom: 20px;
        }

        .activity-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--text-color);
        }

        .activity-list {
            list-style: none;
        }

        .activity-item {
            display: flex;
            padding: 15px 0;
            border-bottom: 1px solid var(--border-color);
        }

        .activity-item:last-child {
            border-bottom: none;
        }

        .activity-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--primary-light);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            color: var(--primary-color);
            font-size: 1.1rem;
        }

        .activity-content {
            flex: 1;
        }

        .activity-message {
            margin-bottom: 5px;
        }

        .activity-time {
            font-size: 0.85rem;
            color: var(--light-text);
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .stats-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @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;
            }

            .stats-container {
                grid-template-columns: 1fr;
            }

            .chart-wrapper {
                height: 250px;
            }
        }
        /*  */
        .nav-link {
            padding: 10px 14px;
            display: flex;
            align-items: center;
            cursor: pointer;
            font-weight: 500;
            font-size: 0.95rem;
            color: var(--text-color);
            transition: all 0.2s;
            text-decoration: none;
        }
        .nav-link:hover {
            color: var(--primary-color);
        }
    </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="dashboard"> 仪表盘 </li>
                </ul>
                <ul class="submenu">
                    <li class="submenu-item " data-section="form"> 获取用户列表</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="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>

            <li class="nav-item">
                <a href="#" class="nav-link active">
                    <span class="nav-icon"></span>
                    <span> 退出 </span>
                </a>
            </li>

        </ul>


           

    </aside>

    <!-- 主内容区 -->
    <main class="main-content">

        <!-- 仪表盘 -->
        <section class="api-section" id="dashboard">


            <!-- 数据概览卡片 -->
            <div class="stats-container">
                <div class="stat-card">
                    <div style="display: flex; align-items: center;">
                        <div class="stat-icon" style="background-color: #e6f7ff; color: #1890ff;">👥</div>
                        <div>
                            <div class="stat-title">总用户数</div>
                            <div class="stat-value">1,248</div>
                            <div class="stat-change up">
                                <span>↑ 12.5%</span>
                                <span style="margin-left: 5px;">较上月</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="stat-card">
                    <div style="display: flex; align-items: center;">
                        <div class="stat-icon" style="background-color: #f6ffed; color: #52c41a;">📊</div>
                        <div>
                            <div class="stat-title">API调用量</div>
                            <div class="stat-value">24,856</div>
                            <div class="stat-change up">
                                <span>↑ 8.3%</span>
                                <span style="margin-left: 5px;">较上周</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="stat-card">
                    <div style="display: flex; align-items: center;">
                        <div class="stat-icon" style="background-color: #fffbe6; color: #faad14;">💰</div>
                        <div>
                            <div class="stat-title">总收入</div>
                            <div class="stat-value">¥12,845</div>
                            <div class="stat-change down">
                                <span>↓ 2.1%</span>
                                <span style="margin-left: 5px;">较上月</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="stat-card">
                    <div style="display: flex; align-items: center;">
                        <div class="stat-icon" style="background-color: #fff1f0; color: #f5222d;">⏱️</div>
                        <div>
                            <div class="stat-title">平均响应时间</div>
                            <div class="stat-value">128ms</div>
                            <div class="stat-change up">
                                <span>↓ 15%</span>
                                <span style="margin-left: 5px;">较上周</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 访问趋势图表 -->
            <div class="chart-container">
                <div class="chart-header">
                    <h3 class="chart-title">API访问趋势</h3>
                    <div class="chart-actions">
                        <button class="chart-btn active" data-period="day">日</button>
                        <button class="chart-btn" data-period="week">周</button>
                        <button class="chart-btn" data-period="month">月</button>
                        <button class="chart-btn" data-period="year">年</button>
                    </div>
                </div>
                <div id="trendChart" class="chart-wrapper"></div>
            </div>

            <!-- 最近活动 -->
            <div class="activity-container">
                <div class="activity-header">
                    <h3 class="activity-title">最近活动</h3>
                </div>
                <ul class="activity-list">
                    <li class="activity-item">
                        <div class="activity-icon">📝</div>
                        <div class="activity-content">
                            <div class="activity-message">管理员更新了用户API调用限额</div>
                            <div class="activity-time">10分钟前</div>
                        </div>
                    </li>
                    <li class="activity-item">
                        <div class="activity-icon">👤</div>
                        <div class="activity-content">
                            <div class="activity-message">新用户注册: user123</div>
                            <div class="activity-time">25分钟前</div>
                        </div>
                    </li>
                    <li class="activity-item">
                        <div class="activity-icon">🔒</div>
                        <div class="activity-content">
                            <div class="activity-message">系统自动重置了过期的API密钥</div>
                            <div class="activity-time">1小时前</div>
                        </div>
                    </li>
                    <li class="activity-item">
                        <div class="activity-icon">📊</div>
                        <div class="activity-content">
                            <div class="activity-message">API调用量达到每日峰值: 3,456次</div>
                            <div class="activity-time">3小时前</div>
                        </div>
                    </li>
                    <li class="activity-item">
                        <div class="activity-icon">⚠️</div>
                        <div class="activity-content">
                            <div class="activity-message">检测到异常API调用，已自动拦截</div>
                            <div class="activity-time">5小时前</div>
                        </div>
                    </li>
                </ul>
            </div>


        </section>

        <!-- 用户列表API -->
        <section class="api-section api-section-bg" 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="uniapp"> UNI-APP </div>
                <div class="code-tab" data-tab="ajax">Ajax</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="uniapp">
                <div class="code-block uniapp">
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="ajax">
                <div class="code-block javascript">
$.ajax({
        type: "POST",//方法类型
        dataType: "json",//预期服务器返回的数据类型
        url: "/admin/update_setting" ,// 请求URL
        data: $('#form1').serialize(),
        success: function (res) {
            console.log(res)
        }
    });
                </div>
            </div>


        </section>

        <!-- 创建用户API -->
        <section class="api-section api-section-bg" 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 api-section-bg" 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 api-section-bg" 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 api-section-bg" 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>


        <!-- 表单 -->
        <section class="api-section api-section-bg" id="form" style="display: none;">

            <div class="form-header">
                <h1 class="form-title">用户注册</h1>
                <p class="form-description">填写以下信息创建新用户账户。所有标有星号(*)的字段为必填项。</p>
            </div>

            <!-- 步骤指示器 -->
            <div class="form-steps">
                <div class="step active">
                    <div class="step-number">1</div>
                    <div class="step-title">基本信息</div>
                </div>
                <div class="step">
                    <div class="step-number">2</div>
                    <div class="step-title">联系信息</div>
                </div>
                <div class="step">
                    <div class="step-number">3</div>
                    <div class="step-title">账户设置</div>
                </div>
            </div>

            <form id="registerForm">
                <div class="form-row">
                    <div class="form-col">
                        <div class="form-group">
                            <label for="username" class="form-label required">用户名</label>
                            <input type="text" class="form-control" id="username" name="username"
                                placeholder="4-20个字符，只能包含字母、数字和下划线">
                            <div class="invalid-feedback">请输入有效的用户名</div>
                        </div>
                    </div>
                    <div class="form-col">
                        <div class="form-group">
                            <label for="email" class="form-label required">电子邮箱</label>
                            <input type="email" class="form-control" id="email" name="email"
                                placeholder="example@domain.com">
                            <div class="invalid-feedback">请输入有效的邮箱地址</div>
                        </div>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-col">
                        <div class="form-group">
                            <label for="password" class="form-label required">密码</label>
                            <input type="password" class="form-control" id="password" name="password"
                                placeholder="至少8个字符，包含字母和数字">
                            <div class="invalid-feedback">密码必须包含字母和数字，且长度至少8位</div>
                        </div>
                    </div>
                    <div class="form-col">
                        <div class="form-group">
                            <label for="confirmPassword" class="form-label required">确认密码</label>
                            <input type="password" class="form-control" id="confirmPassword" name="confirmPassword"
                                placeholder="再次输入密码">
                            <div class="invalid-feedback">两次输入的密码不一致</div>
                        </div>
                    </div>
                </div>

                <div class="form-card">
                    <div class="form-card-header">个人资料</div>
                    <div class="form-row">
                        <div class="form-col">
                            <div class="form-group">
                                <label for="firstName" class="form-label">名字</label>
                                <input type="text" class="form-control" id="firstName" name="firstName">
                            </div>
                        </div>
                        <div class="form-col">
                            <div class="form-group">
                                <label for="lastName" class="form-label">姓氏</label>
                                <input type="text" class="form-control" id="lastName" name="lastName">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="gender" class="form-label">性别</label>
                        <select class="form-control form-select" id="gender" name="gender">
                            <option value="">请选择性别</option>
                            <option value="male">男</option>
                            <option value="female">女</option>
                            <option value="other">其他</option>
                            <option value="prefer-not-to-say">不愿透露</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="birthdate" class="form-label">出生日期</label>
                        <input type="date" class="form-control" id="birthdate" name="birthdate">
                    </div>
                </div>

                <div class="form-card">
                    <div class="form-card-header">头像上传</div>
                    <div class="form-group">
                        <label class="form-label">个人头像</label>
                        <div class="file-upload">
                            <input type="file" id="avatar" name="avatar" accept="image/*">
                            <div class="file-upload-icon">📁</div>
                            <div class="file-upload-text">点击或拖拽文件到此处上传</div>
                            <div class="file-upload-hint">支持 JPG, PNG 格式，大小不超过 5MB</div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label required">用户类型</label>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="userType" id="userTypePersonal"
                            value="personal" checked>
                        <label class="form-check-label" for="userTypePersonal">个人用户</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="userType" id="userTypeBusiness"
                            value="business">
                        <label class="form-check-label" for="userTypeBusiness">企业用户</label>
                    </div>
                </div>

                <div class="form-group">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="agreeTerms" name="agreeTerms" required>
                        <label class="form-check-label" for="agreeTerms">我已阅读并同意<a href="#">服务条款</a>和<a
                                href="#">隐私政策</a></label>
                        <div class="invalid-feedback">必须同意服务条款才能继续</div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="subscribeNewsletter"
                            name="subscribeNewsletter" checked>
                        <label class="form-check-label" for="subscribeNewsletter">订阅我们的新闻和促销信息</label>
                    </div>
                </div>

                <div class="form-footer">
                    <button type="button" class="btn btn-outline">取消</button>
                    <button type="submit" class="btn btn-primary">提交注册</button>
                </div>
            </form>


        </section>
    </main>




    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 仪表盘
            // 1. 初始化ECharts图表
            const chartDom = document.getElementById('trendChart');
            const myChart = echarts.init(chartDom);

            // 2. 图表选项卡切换功能
            const chartBtns = document.querySelectorAll('.chart-btn');
            chartBtns.forEach(btn => {
                btn.addEventListener('click', function () {
                    // 移除所有按钮的active类
                    chartBtns.forEach(b => b.classList.remove('active'));
                    // 为当前点击按钮添加active类
                    this.classList.add('active');

                    // 根据选择的时间段更新图表
                    const period = this.getAttribute('data-period');
                    updateChart(period);
                });
            });

            // 3. 窗口大小变化时重新调整图表大小
            window.addEventListener('resize', function () {
                myChart.resize();
            });

            // 4. 默认显示日数据
            updateChart('day');

            // 5. 更新图表函数
            function updateChart(period) {
                let option;

                // 根据选择的时间段获取不同的图表配置
                switch (period) {
                    case 'day':
                        option = getDayOption();
                        break;
                    case 'week':
                        option = getWeekOption();
                        break;
                    case 'month':
                        option = getMonthOption();
                        break;
                    case 'year':
                        option = getYearOption();
                        break;
                    default:
                        option = getDayOption();
                }

                // 使用新配置更新图表
                myChart.setOption(option, true);
            }

            // 6. 获取日数据配置
            function getDayOption() {
                const hours = [];
                const data = [];

                // 生成24小时数据
                for (let i = 0; i < 24; i++) {
                    hours.push(i + ':00');
                    // 模拟数据 - 白天访问量高，夜间低
                    const value = Math.round(500 + Math.sin(i / 24 * Math.PI * 2) * 300 + Math.random() * 200);
                    data.push(value);
                }

                return {
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{b}<br/>调用量: {c} 次'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: hours,
                        axisLabel: {
                            interval: 3 // 每3小时显示一个标签
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '调用量(次)'
                    },
                    series: [{
                        name: 'API调用量',
                        type: 'line',
                        smooth: true,
                        data: data,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(67, 97, 238, 0.3)' },
                                { offset: 1, color: 'rgba(67, 97, 238, 0.1)' }
                            ])
                        },
                        itemStyle: {
                            color: '#4361ee'
                        },
                        lineStyle: {
                            width: 3
                        },
                        symbolSize: 6
                    }]
                };
            }

            // 7. 获取周数据配置
            function getWeekOption() {
                const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
                const data = [];

                // 生成一周数据
                days.forEach((day, i) => {
                    // 模拟数据 - 工作日访问量高，周末低
                    const value = Math.round(800 + (i < 5 ? 400 : -200) + Math.random() * 300);
                    data.push(value);
                });

                return {
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{b}<br/>调用量: {c} 次'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: days
                    },
                    yAxis: {
                        type: 'value',
                        name: '调用量(次)'
                    },
                    series: [{
                        name: 'API调用量',
                        type: 'bar',
                        data: data,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#4361ee' },
                                { offset: 1, color: '#3a0ca3' }
                            ])
                        },
                        barWidth: '60%'
                    }]
                };
            }

            // 8. 获取月数据配置
            function getMonthOption() {
                const days = [];
                const data = [];

                // 生成30天数据
                for (let i = 1; i <= 30; i++) {
                    days.push(i + '日');
                    // 模拟数据 - 每周波动
                    const weeklyFactor = (i % 7 < 5) ? 1 : 0.7;
                    const value = Math.round(600 * weeklyFactor + Math.sin(i / 30 * Math.PI) * 300 + Math.random() * 200);
                    data.push(value);
                }

                return {
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{b}<br/>调用量: {c} 次'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: days,
                        axisLabel: {
                            interval: 4 // 每4天显示一个标签
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '调用量(次)'
                    },
                    series: [{
                        name: 'API调用量',
                        type: 'line',
                        smooth: true,
                        data: data,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(67, 97, 238, 0.3)' },
                                { offset: 1, color: 'rgba(67, 97, 238, 0.1)' }
                            ])
                        },
                        itemStyle: {
                            color: '#4361ee'
                        },
                        lineStyle: {
                            width: 3
                        },
                        symbolSize: 6
                    }]
                };
            }

            // 9. 获取年数据配置
            function getYearOption() {
                const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
                const data = [];

                // 生成12个月数据
                months.forEach((month, i) => {
                    // 模拟数据 - 季节性波动
                    const seasonalFactor = 0.8 + Math.sin((i - 3) / 12 * Math.PI * 2) * 0.3;
                    const value = Math.round(2000 * seasonalFactor + Math.random() * 500);
                    data.push(value);
                });

                return {
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{b}<br/>调用量: {c} 次'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: months
                    },
                    yAxis: {
                        type: 'value',
                        name: '调用量(次)'
                    },
                    series: [{
                        name: 'API调用量',
                        type: 'line',
                        smooth: true,
                        data: data,
                        symbol: 'circle',
                        symbolSize: 8,
                        itemStyle: {
                            color: '#4361ee'
                        },
                        lineStyle: {
                            width: 3
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(67, 97, 238, 0.3)' },
                                { offset: 1, color: 'rgba(67, 97, 238, 0.1)' }
                            ])
                        }
                    }]
                };
            }

            // 仪表盘

            // 导航菜单折叠功能
            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>

  1. 内容区域样式优化：

    • 改进了API卡片的外观，添加了悬停效果

    • 优化了代码块的显示样式

    • 增强了表格的可读性

    • 添加了响应式设计，确保在移动设备上也能良好显示

  2. 交互改进：

    • 点击菜单项后会自动滚动到页面顶部

    • 改进了移动端菜单的切换按钮图标

    • 增强了搜索功能的用户体验

  3. 内容增强：

    • 为API文档添加了更多详细信息和示例

    • 增加了错误码表格

    • 添加了请求示例部分

现在这个版本既保留了优化后的美观左侧菜单，又完整显示了所有API文档内容，并且两者风格统一，整体视觉效果更加专业和现代化。

api-documentation-template:针对您的应用程序的完全可自定义的API文档HTML模板
05-05
API文档模板 针对您的应用程序的完全可自定义的API文档HTML模板。 学分 jQuery 1.8.2 Google字体（Roboto | Source + Code + Pro） Highlight.js 9.8.0 创意项目徽标：Noun Project的Emily van den Heever设计的平台。 Github Corner Ribbon：（tholman： ://tholman.com/github-corners/） 如何使用它 这是一个完全响应HTML模板，您可以使用它做任何想做的事情！ 贡献 我们一直在寻找： 错误报告，尤其是那些针对测试用例减少的方面的报告 增强想法
api文档html模板,API - art-template
weixin_32798919的博客
06-09 492
template(filename, content)Render templates according to template name.Parameters：{string} filename{Object,string} contentReturn：if content is Object，render template and return stringif content is str...
html2canvas文档生成：API自动文档工具集成
最新发布
gitblog_00474的博客
09-19 1070
你是否还在手动维护API文档？面对频繁迭代的代码，文档与实现不同步的问题是否一直困扰着你？本文将详细介绍如何为html2canvas项目集成API自动文档工具，实现文档的实时更新与规范化管理，让开发者专注于代码而非文档编写。 读完本文，你将能够： - 理解html2canvas的API结构与核心配置选项 - 掌握使用TypeDoc生成API文档的完整流程 - 学会自定义文档模板与集成第三方文档工...
api接口文档html模板,开发接口文档-api文档模板
weixin_42443651的博客
06-04 952
1、XXX项目接口文档版本控制信息版本日期描述作者V1.02018-8-13创建XXX1 获取所有字段1.1 获取所有字段请求地址：/session/field/findAll请求参数参数名必填字段类型描述name是String根据名称筛选响应code10000成功，-1系统错误，10001必填参数为空message响应描述result如响应例子请求例子：http:/127.0.0.1:8080/...
html api doc 模板,使用apidoc生成实用炫酷吊炸天的api文档
weixin_39707478的博客
06-22 754
为什么要用apidocapidoc根据其自定义注释语法自动生成api文档，我们只需要把代码中的注释按照其语法来写就能生成需要的文档，不需要手动写markdown。apidoc生成的文档相比markdown，漂亮直观又实用。如果API需要修改或者更新，直接修改代码的注释中即可。apidoc核心思路，文档与代码合一，修改代码就是修改文档，方便又实用。可以配合grunt使用，使自动化生成文档更加智能，支...
【亲测免费】 API文档HTML模板使用教程
gitblog_00751的博客
08-26 612
API文档HTML模板使用教程 项目介绍 API-Documentation-HTML-Template 是一个简单、现代且可读的HTML模板，专门用于API文档的生成。该项目基于Bootstrap框架，并使用了Klorofil模板，提供了清晰的代码高亮显示功能，使得API文档更加易于阅读和理解。 项目快速启动 安装步骤 克隆仓库： git clone https://github.com/f...
API在线文档-静态html页面模板
03-16
API在线文档-静态html页面模板，对于一些简单的接口文档描述，可以基于此文档进行修改编辑。附件图片为静态页面的html截图，压缩包为html资源附件。多年前使用的，现在一般用得少，不过也可能有用哈。希望对大家有用...
Flet结合fastapi实现文件下载和 HTML 页面展示服务自定义组件模板
08-22
- 提供了自动化的交互式 API 文档（Swagger UI 和 ReDoc）。 2. **文件路径处理**： - 使用 `os.getcwd()` 获取当前工作目录，并拼接文件路径，确保文件路径的正确性。 - 在文件操作前检查文件是否存在，避免因...
网站数据统计后台管理页面html静态模板
12-04
1. **HTML模板**：HTML（HyperText Markup Language）是网页的基础，它定义了网页的结构。静态模板是预先设计好的HTML代码，包含了常见的布局、样式和交互元素，可以直接应用或根据需求进行修改，大大节省了开发时间...
WebAPI项目及其HTML测试页面
12-09
WebAPI项目及其HTML测试页面是开发Web服务的一种常见方式，主要使用了Microsoft的ASP.NET框架中的WebAPI组件。WebAPI允许开发者创建RESTful服务，这些服务可以被多种客户端，包括浏览器中的JavaScript，移动应用，...
【FastAPI 】FastAPI 模板：提供静态文件
CITYDATA
08-20 737
在哪里找到您的静态文件并将它们挂载在特定路径下。应用程序都是必不可少的，因为它们有助于创建用户界面并增强用户体验。静态文件是不经常更改的资产，并按原样交付给客户端。以提供静态文件的基础知识，并提供了一些演示来帮助您入门。请随意尝试这些示例并扩展它们以适合您的特定用例。模板中的文件，您可以创建一个丰富的交互式。创建一个简单的路由来提供引用静态文件的。可以轻松提供这些文件并将其集成到您的。应用程序中，从而提供丰富的用户体验。假设您有一个想要作为静态文件提供的。您可以通过提供引用动态属性的静态。
紫色渐变API接口网站模板
11-29
紫色渐变API接口网站模板是一款适合开放API接口公司网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
html文档模板(实现用html写出优雅的文档)
05-02
提供了一个模板，使用该模板，可以通过html语言写出优雅的文档。该模板包含了CSS文件和JS文件，分别用于文档的样式设置和目录的自动生成，这两个文件不需要做修改。用户的文档写在其中的html文件中。由于html的跨平台特性，使用该模板写的文档，几乎可以在任何操作系统下使用浏览器直接打开，这个特点十分利于轻量级文档的跨平台交流。 文档的页面结构： 左侧 右侧 目录 文档页面
IDC网站模板-星外简单红色模板-星外API代理网站模板
04-10
IDC网站模板-星外简单红色模板-星外API代理网站模板
API接口模板
01-21
API接口模板，API接口文档模板，API接口模板，API接口模板，简单，但是很正规
web前端帮助文档API(html、css、javascript、jquery)
12-05
这里是常用的web开发技术的帮助文档API，包括html、css、javascript和jquery。
简易html制作api网站入口站，逐步完善中
joyanhui的专栏
06-03 1881
几行代码实现一个漂亮的引导页面
39行代码实现JS HTML模板（轻量+高效+易用）
萌萌的It人 www.itmmd.com
07-16 4173
otmpl 是一个轻量级前端模版（仅有39行无压缩代码，支持缓存），所用指令仅需[#...#]和{#...#}，前者包含需要输出html语句，后者包含js变量。 支持javascript完整语法，你可以写for或者while或者其他任一javascript的语法。这个模板参考了YaYaTemplate，但我对其进行优化和改良，并缩短整体代码，提供更好的支持。 jQuery.tmpl
帮助中心 html模板,html模板
weixin_34597791的博客
05-31 772
页面”对话框中，选择“页面模板”进行配置。 “页面模板”选择“系统默认”时，默认返回WAF内置的HTTP返回码为418的拦截页面。 “页面模板”选择“自定义”时，如图2所示。 HTTP返回码：自定义页面配置的返回码。 页面类型：可选择text/html、text/xml和application/json三种类型。huaweicloud.com/api-ticket/ticket_api_10001...
老旧API在线文档静态html模板
资源摘要信息:"API在线文档-静态html页面模板" ...同时，我们也学习到了静态页面模板与动态模板的区别，以及现代API文档生成工具的优势。这些知识点对于理解和使用API在线文档-静态html页面模板都具有重要的指导意义。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值