layout.html 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>{% block title %}家谱管理系统{% endblock %}</title>
  7. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  8. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
  9. <style>
  10. body { font-family: 'Microsoft YaHei', sans-serif; }
  11. .sidebar { min-height: 100vh; background-color: #343a40; color: white; }
  12. .sidebar a { color: rgba(255,255,255,.8); text-decoration: none; padding: 10px 20px; display: block; }
  13. .sidebar a:hover { background-color: #495057; color: white; }
  14. .sidebar a.active { background-color: #0d6efd; color: white; }
  15. .content-area { padding: 20px; }
  16. </style>
  17. {% block extra_css %}{% endblock %}
  18. </head>
  19. <body class="bg-light">
  20. <div class="container-fluid">
  21. <div class="row">
  22. {% if session.get('user_id') %}
  23. <!-- Sidebar -->
  24. <div class="col-md-2 sidebar d-none d-md-block">
  25. <div class="py-4 text-center border-bottom mb-4">
  26. <h4>家谱管理</h4>
  27. </div>
  28. <nav>
  29. <a href="{{ url_for('index') }}" class="{% if request.endpoint == 'index' %}active{% endif %}">
  30. <i class="bi bi-file-earmark-arrow-up me-2"></i> 家谱管理
  31. </a>
  32. <a href="{{ url_for('members') }}" class="{% if request.endpoint == 'members' %}active{% endif %}">
  33. <i class="bi bi-people me-2"></i> 成员列表
  34. </a>
  35. <a href="{{ url_for('tree') }}" class="{% if request.endpoint == 'tree' %}active{% endif %}">
  36. <i class="bi bi-diagram-3 me-2"></i> 关系树状图
  37. </a>
  38. <div class="mt-5 border-top pt-3">
  39. <p class="px-3 small text-muted">用户: {{ session['username'] }}</p>
  40. <a href="{{ url_for('logout') }}" class="text-danger">
  41. <i class="bi bi-box-arrow-right me-2"></i> 退出登录
  42. </a>
  43. </div>
  44. </nav>
  45. </div>
  46. {% endif %}
  47. <!-- Main Content -->
  48. <div class="col-md-{% if session.get('user_id') %}10{% else %}12{% endif %} content-area">
  49. {% with messages = get_flashed_messages() %}
  50. {% if messages %}
  51. {% for message in messages %}
  52. <div class="alert alert-info alert-dismissible fade show" role="alert">
  53. {{ message }}
  54. <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  55. </div>
  56. {% endfor %}
  57. {% endif %}
  58. {% endwith %}
  59. {% block content %}{% endblock %}
  60. </div>
  61. </div>
  62. </div>
  63. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  64. {% block extra_js %}{% endblock %}
  65. </body>
  66. </html>