ldap-demo/src/main/resources/templates/index.html

170 lines
7.3 KiB
HTML
Raw Normal View History

2025-08-28 07:24:46 +08:00
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LDAP管理系统</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.stat-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.feature-card {
border: none;
border-radius: 15px;
}
</style>
</head>
<body class="bg-light">
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/web/">
<i class="fas fa-users-cog me-2"></i>LDAP管理系统
</a>
<div class="navbar-nav ms-auto">
<a class="nav-link" href="/web/users">
<i class="fas fa-users me-1"></i>用户管理
</a>
<a class="nav-link" href="/web/groups">
<i class="fas fa-layer-group me-1"></i>组管理
</a>
</div>
</div>
</nav>
<!-- 主要内容 -->
<div class="container mt-4">
<!-- 欢迎信息 -->
<div class="row mb-4">
<div class="col-12">
<div class="jumbotron bg-white p-5 rounded shadow-sm">
<h1 class="display-4">
<i class="fas fa-home me-3 text-primary"></i>欢迎使用LDAP管理系统
</h1>
<p class="lead">统一管理您的LDAP用户和组织架构</p>
<hr class="my-4">
<p>通过这个系统您可以轻松地管理LDAP目录中的用户和组执行增删改查等操作。</p>
</div>
</div>
</div>
<!-- 统计卡片 -->
<div class="row mb-4">
<div class="col-md-6">
<div class="card stat-card card-hover">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<div>
<h5 class="card-title">用户总数</h5>
<h2 class="mb-0" th:text="${userCount}">0</h2>
</div>
<div class="text-white-50">
<i class="fas fa-users fa-3x"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card stat-card card-hover">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<div>
<h5 class="card-title">组总数</h5>
<h2 class="mb-0" th:text="${groupCount}">0</h2>
</div>
<div class="text-white-50">
<i class="fas fa-layer-group fa-3x"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 功能卡片 -->
<div class="row">
<div class="col-md-6 mb-4">
<div class="card feature-card card-hover h-100">
<div class="card-body text-center">
<div class="mb-3">
<i class="fas fa-user-plus fa-4x text-primary"></i>
</div>
<h5 class="card-title">用户管理</h5>
<p class="card-text">创建、编辑、删除和搜索LDAP用户管理用户信息和密码。</p>
<a href="/web/users" class="btn btn-primary">
<i class="fas fa-arrow-right me-1"></i>进入用户管理
</a>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="card feature-card card-hover h-100">
<div class="card-body text-center">
<div class="mb-3">
<i class="fas fa-sitemap fa-4x text-success"></i>
</div>
<h5 class="card-title">组管理</h5>
<p class="card-text">创建和管理组织结构,添加或移除组成员,查看组关系。</p>
<a href="/web/groups" class="btn btn-success">
<i class="fas fa-arrow-right me-1"></i>进入组管理
</a>
</div>
</div>
</div>
</div>
<!-- API文档链接 -->
<div class="row mt-4">
<div class="col-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">
<i class="fas fa-code me-2"></i>API接口
</h5>
<p class="card-text">系统提供完整的RESTful API接口支持程序化调用。</p>
<div class="row">
<div class="col-md-6">
<h6>用户API</h6>
<ul class="list-unstyled">
<li><code>GET /api/users</code> - 获取所有用户</li>
<li><code>POST /api/users</code> - 创建用户</li>
<li><code>PUT /api/users/{username}</code> - 更新用户</li>
<li><code>DELETE /api/users/{username}</code> - 删除用户</li>
</ul>
</div>
<div class="col-md-6">
<h6>组API</h6>
<ul class="list-unstyled">
<li><code>GET /api/groups</code> - 获取所有组</li>
<li><code>POST /api/groups</code> - 创建组</li>
<li><code>PUT /api/groups/{groupName}</code> - 更新组</li>
<li><code>DELETE /api/groups/{groupName}</code> - 删除组</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 页脚 -->
<footer class="bg-dark text-white text-center py-3 mt-5">
<div class="container">
<p class="mb-0">&copy; 2024 LDAP管理系统. 版权所有.</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>