Files
niumalll/backend/public/api-docs.html

562 lines
28 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NiuMall API 文档</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#10B981',
accent: '#8B5CF6',
danger: '#EF4444',
warning: '#F59E0B',
info: '#60A5FA',
dark: '#1E293B',
light: '#F1F5F9'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.transition-all-300 {
transition: all 300ms ease-in-out;
}
.shadow-card {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<header class="bg-gradient-to-r from-primary to-accent text-white shadow-lg">
<div class="container mx-auto px-4 py-6 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row md:justify-between md:items-center">
<div>
<h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-shadow">NiuMall API 文档</h1>
<p class="mt-1 text-blue-100">版本: 1.0.0 | 最后更新: 2025-09-12</p>
</div>
<div class="mt-4 md:mt-0">
<div class="flex items-center space-x-2 bg-white/20 px-4 py-2 rounded-lg backdrop-blur-sm">
<i class="fa fa-server text-xl"></i>
<span>运行环境: Production</span>
</div>
</div>
</div>
</div>
</header>
<div class="container mx-auto px-4 py-8 sm:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row gap-8">
<!-- 侧边导航 -->
<aside class="lg:w-64 shrink-0">
<nav class="bg-white rounded-xl shadow-card p-4 sticky top-4">
<h2 class="text-lg font-bold text-dark mb-4 flex items-center">
<i class="fa fa-navicon mr-2"></i> 接口分类
</h2>
<ul class="space-y-1">
<li>
<a href="#auth" class="block px-4 py-2 rounded-lg transition-all-300 hover:bg-blue-50 hover:text-primary">
<i class="fa fa-lock mr-2"></i> 认证管理
</a>
</li>
<li>
<a href="#users" class="block px-4 py-2 rounded-lg transition-all-300 hover:bg-blue-50 hover:text-primary">
<i class="fa fa-users mr-2"></i> 用户管理
</a>
</li>
<li>
<a href="#orders" class="block px-4 py-2 rounded-lg transition-all-300 hover:bg-blue-50 hover:text-primary">
<i class="fa fa-shopping-cart mr-2"></i> 订单管理
</a>
</li>
<li>
<a href="#finance" class="block px-4 py-2 rounded-lg transition-all-300 hover:bg-blue-50 hover:text-primary">
<i class="fa fa-money mr-2"></i> 财务管理
</a>
</li>
<li>
<a href="#suppliers" class="block px-4 py-2 rounded-lg transition-all-300 hover:bg-blue-50 hover:text-primary">
<i class="fa fa-building-o mr-2"></i> 供应商管理
</a>
</li>
<li>
<a href="#transport" class="block px-4 py-2 rounded-lg transition-all-300 hover:bg-blue-50 hover:text-primary">
<i class="fa fa-truck mr-2"></i> 运输管理
</a>
</li>
<li>
<a href="#quality" class="block px-4 py-2 rounded-lg transition-all-300 hover:bg-blue-50 hover:text-primary">
<i class="fa fa-check-circle mr-2"></i> 质量管理
</a>
</li>
<li>
<a href="#system" class="block px-4 py-2 rounded-lg transition-all-300 hover:bg-blue-50 hover:text-primary">
<i class="fa fa-cog mr-2"></i> 系统接口
</a>
</li>
</ul>
<div class="mt-8">
<h2 class="text-lg font-bold text-dark mb-4 flex items-center">
<i class="fa fa-book mr-2"></i> 文档说明
</h2>
<div class="bg-blue-50 p-4 rounded-lg">
<p class="text-sm text-blue-800">
本API文档提供了NiuMall系统所有后端接口的详细说明。所有接口均返回统一的JSON格式包含success、message和data字段。
</p>
</div>
</div>
</nav>
</aside>
<!-- 主内容区 -->
<main class="flex-1">
<!-- 认证管理 -->
<section id="auth" class="mb-12">
<div class="bg-white rounded-xl shadow-card overflow-hidden">
<div class="bg-primary text-white px-6 py-4">
<h2 class="text-xl font-bold flex items-center">
<i class="fa fa-lock mr-2"></i> 认证管理
</h2>
<p class="text-blue-100 text-sm mt-1">认证相关接口,用于用户登录获取访问令牌</p>
</div>
<div class="p-6">
<!-- 登录接口 -->
<div class="mb-8 border-l-4 border-primary pl-4">
<div class="flex flex-wrap items-center gap-3 mb-2">
<h3 class="text-lg font-semibold text-dark">用户登录</h3>
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded font-medium">POST</span>
<span class="bg-gray-100 text-gray-800 text-sm px-3 py-1 rounded">/api/auth/login</span>
</div>
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-700 mb-2">请求参数</h4>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 text-sm">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">参数名</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">必填</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-4 py-2 font-medium">username</td>
<td class="px-4 py-2">string</td>
<td class="px-4 py-2 text-red-600"></td>
<td class="px-4 py-2">用户名/手机号/邮箱</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">password</td>
<td class="px-4 py-2">string</td>
<td class="px-4 py-2 text-red-600"></td>
<td class="px-4 py-2">密码</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-700 mb-2">请求示例</h4>
<div class="bg-gray-800 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto">
<pre>{"username": "admin", "password": "123456"}</pre>
</div>
</div>
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-700 mb-2">响应示例</h4>
<div class="bg-gray-800 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto">
<pre>{"success": true, "message": "登录成功", "data": {"access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...", "token_type": "Bearer", "expires_in": 86400, "user": {"id": 1, "username": "admin", "email": "admin@example.com", "role": "admin", "status": "active"}}}</pre>
</div>
</div>
<div>
<h4 class="text-sm font-semibold text-gray-700 mb-2">响应状态码</h4>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm">
<div class="bg-green-50 px-3 py-2 rounded-lg flex items-center">
<span class="bg-green-500 text-white text-xs w-6 h-6 flex items-center justify-center rounded-full mr-2">200</span>
<span>登录成功</span>
</div>
<div class="bg-red-50 px-3 py-2 rounded-lg flex items-center">
<span class="bg-red-500 text-white text-xs w-6 h-6 flex items-center justify-center rounded-full mr-2">401</span>
<span>用户名或密码错误</span>
</div>
<div class="bg-yellow-50 px-3 py-2 rounded-lg flex items-center">
<span class="bg-yellow-500 text-white text-xs w-6 h-6 flex items-center justify-center rounded-full mr-2">403</span>
<span>账户已被禁用</span>
</div>
<div class="bg-blue-50 px-3 py-2 rounded-lg flex items-center">
<span class="bg-blue-500 text-white text-xs w-6 h-6 flex items-center justify-center rounded-full mr-2">500</span>
<span>服务器内部错误</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 用户管理 -->
<section id="users" class="mb-12">
<div class="bg-white rounded-xl shadow-card overflow-hidden">
<div class="bg-secondary text-white px-6 py-4">
<h2 class="text-xl font-bold flex items-center">
<i class="fa fa-users mr-2"></i> 用户管理
</h2>
<p class="text-green-100 text-sm mt-1">用户相关接口,用于管理系统用户信息</p>
</div>
<div class="p-6">
<!-- 获取用户列表 -->
<div class="mb-8 border-l-4 border-secondary pl-4">
<div class="flex flex-wrap items-center gap-3 mb-2">
<h3 class="text-lg font-semibold text-dark">获取用户列表</h3>
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded font-medium">GET</span>
<span class="bg-gray-100 text-gray-800 text-sm px-3 py-1 rounded">/api/users</span>
</div>
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-700 mb-2">查询参数</h4>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 text-sm">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">参数名</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">必填</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-4 py-2 font-medium">page</td>
<td class="px-4 py-2">number</td>
<td class="px-4 py-2 text-green-600"></td>
<td class="px-4 py-2">页码默认为1</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">pageSize</td>
<td class="px-4 py-2">number</td>
<td class="px-4 py-2 text-green-600"></td>
<td class="px-4 py-2">每页条数默认为20</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">keyword</td>
<td class="px-4 py-2">string</td>
<td class="px-4 py-2 text-green-600"></td>
<td class="px-4 py-2">关键词搜索(用户名、邮箱、手机号)</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">user_type</td>
<td class="px-4 py-2">string</td>
<td class="px-4 py-2 text-green-600"></td>
<td class="px-4 py-2">用户类型筛选</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">status</td>
<td class="px-4 py-2">string</td>
<td class="px-4 py-2 text-green-600"></td>
<td class="px-4 py-2">用户状态筛选</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-700 mb-2">响应示例</h4>
<div class="bg-gray-800 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto">
<pre>{"success": true, "data": {"items": [{"id": 1, "username": "admin", "email": "admin@example.com", "phone": "13800138000", "user_type": "admin", "status": "active", "createdAt": "2024-01-01T00:00:00Z", "updatedAt": "2024-01-01T00:00:00Z"}], "total": 10, "page": 1, "pageSize": 20, "totalPages": 1}}</pre>
</div>
</div>
</div>
<!-- 获取用户详情 -->
<div class="mb-8 border-l-4 border-secondary pl-4">
<div class="flex flex-wrap items-center gap-3 mb-2">
<h3 class="text-lg font-semibold text-dark">获取用户详情</h3>
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded font-medium">GET</span>
<span class="bg-gray-100 text-gray-800 text-sm px-3 py-1 rounded">/api/users/:id</span>
</div>
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-700 mb-2">路径参数</h4>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 text-sm">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">参数名</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">必填</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-4 py-2 font-medium">id</td>
<td class="px-4 py-2">number</td>
<td class="px-4 py-2 text-red-600"></td>
<td class="px-4 py-2">用户ID</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-700 mb-2">响应示例</h4>
<div class="bg-gray-800 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto">
<pre>{"success": true, "data": {"id": 1, "username": "admin", "email": "admin@example.com", "phone": "13800138000", "user_type": "admin", "status": "active", "createdAt": "2024-01-01T00:00:00Z", "updatedAt": "2024-01-01T00:00:00Z"}}</pre>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 订单管理 -->
<section id="orders" class="mb-12">
<div class="bg-white rounded-xl shadow-card overflow-hidden">
<div class="bg-warning text-white px-6 py-4">
<h2 class="text-xl font-bold flex items-center">
<i class="fa fa-shopping-cart mr-2"></i> 订单管理
</h2>
<p class="text-yellow-100 text-sm mt-1">订单相关接口,用于管理商品订单</p>
</div>
<div class="p-6">
<!-- 获取订单列表 -->
<div class="mb-8 border-l-4 border-warning pl-4">
<div class="flex flex-wrap items-center gap-3 mb-2">
<h3 class="text-lg font-semibold text-dark">获取订单列表</h3>
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded font-medium">GET</span>
<span class="bg-gray-100 text-gray-800 text-sm px-3 py-1 rounded">/api/orders</span>
</div>
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-700 mb-2">查询参数</h4>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 text-sm">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">参数名</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">必填</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-4 py-2 font-medium">page</td>
<td class="px-4 py-2">number</td>
<td class="px-4 py-2 text-green-600"></td>
<td class="px-4 py-2">页码默认为1</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">pageSize</td>
<td class="px-4 py-2">number</td>
<td class="px-4 py-2 text-green-600"></td>
<td class="px-4 py-2">每页条数默认为20</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">orderNo</td>
<td class="px-4 py-2">string</td>
<td class="px-4 py-2 text-green-600"></td>
<td class="px-4 py-2">订单号搜索</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">buyerId</td>
<td class="px-4 py-2">number</td>
<td class="px-4 py-2 text-green-600"></td>
<td class="px-4 py-2">买方ID筛选</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">supplierId</td>
<td class="px-4 py-2">number</td>
<td class="px-4 py-2 text-green-600"></td>
<td class="px-4 py-2">供应商ID筛选</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">status</td>
<td class="px-4 py-2">string</td>
<td class="px-4 py-2 text-green-600"></td>
<td class="px-4 py-2">订单状态筛选</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 财务管理 -->
<section id="finance" class="mb-12">
<div class="bg-white rounded-xl shadow-card overflow-hidden">
<div class="bg-info text-white px-6 py-4">
<h2 class="text-xl font-bold flex items-center">
<i class="fa fa-money mr-2"></i> 财务管理
</h2>
<p class="text-blue-100 text-sm mt-1">财务相关接口,用于管理结算和支付</p>
</div>
<div class="p-6">
<!-- 获取结算列表 -->
<div class="mb-8 border-l-4 border-info pl-4">
<div class="flex flex-wrap items-center gap-3 mb-2">
<h3 class="text-lg font-semibold text-dark">获取结算列表</h3>
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded font-medium">GET</span>
<span class="bg-gray-100 text-gray-800 text-sm px-3 py-1 rounded">/api/finance/settlements</span>
</div>
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-700 mb-2">查询参数</h4>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 text-sm">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">参数名</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">必填</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-4 py-2 font-medium">page</td>
<td class="px-4 py-2">number</td>
<td class="px-4 py-2 text-green-600"></td>
<td class="px-4 py-2">页码默认为1</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">pageSize</td>
<td class="px-4 py-2">number</td>
<td class="px-4 py-2 text-green-600"></td>
<td class="px-4 py-2">每页条数默认为20</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">keyword</td>
<td class="px-4 py-2">string</td>
<td class="px-4 py-2 text-green-600"></td>
<td class="px-4 py-2">关键词搜索</td>
</tr>
<tr>
<td class="px-4 py-2 font-medium">paymentStatus</td>
<td class="px-4 py-2">string</td>
<td class="px-4 py-2 text-green-600"></td>
<td class="px-4 py-2">支付状态筛选</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 系统接口 -->
<section id="system" class="mb-12">
<div class="bg-white rounded-xl shadow-card overflow-hidden">
<div class="bg-dark text-white px-6 py-4">
<h2 class="text-xl font-bold flex items-center">
<i class="fa fa-cog mr-2"></i> 系统接口
</h2>
<p class="text-gray-300 text-sm mt-1">系统级接口,用于监控和维护</p>
</div>
<div class="p-6">
<!-- 健康检查 -->
<div class="mb-8 border-l-4 border-dark pl-4">
<div class="flex flex-wrap items-center gap-3 mb-2">
<h3 class="text-lg font-semibold text-dark">健康检查</h3>
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded font-medium">GET</span>
<span class="bg-gray-100 text-gray-800 text-sm px-3 py-1 rounded">/health</span>
</div>
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-700 mb-2">响应示例</h4>
<div class="bg-gray-800 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto">
<pre>{"success": true, "message": "服务运行正常", "timestamp": "2025-09-12T04:47:48.209Z", "version": "1.0.0"}</pre>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</div>
</div>
<footer class="bg-dark text-gray-400 py-8 mt-12">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<p>NiuMall API 文档 &copy; 2025</p>
</div>
<div class="flex space-x-4">
<a href="#" class="hover:text-white transition-all-300">
<i class="fa fa-question-circle"></i> 帮助中心
</a>
<a href="#" class="hover:text-white transition-all-300">
<i class="fa fa-envelope"></i> 联系我们
</a>
<a href="#" class="hover:text-white transition-all-300">
<i class="fa fa-book"></i> 完整文档
</a>
</div>
</div>
</div>
</footer>
<script>
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// 导航高亮
window.addEventListener('scroll', () => {
const sections = document.querySelectorAll('section');
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (pageYOffset >= (sectionTop - 100)) {
current = section.getAttribute('id');
}
});
document.querySelectorAll('nav a').forEach(link => {
link.classList.remove('bg-blue-50', 'text-primary');
if (link.getAttribute('href') === `#${current}`) {
link.classList.add('bg-blue-50', 'text-primary');
}
});
});
</script>
</body>
</html>