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

170 lines
7.3 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>