189 lines
9.0 KiB
HTML
189 lines
9.0 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}个人中心 - 图书管理系统{% endblock %}
|
|
|
|
{% block head %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/user-profile.css') }}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="profile-container">
|
|
<div class="page-header">
|
|
<h1>个人中心</h1>
|
|
</div>
|
|
|
|
<div class="profile-content">
|
|
<!-- 左侧用户信息展示 -->
|
|
<div class="profile-sidebar">
|
|
<div class="user-avatar-container">
|
|
<div class="user-avatar large">
|
|
{{ user.username[0] }}
|
|
</div>
|
|
<h3 class="user-name">{{ user.nickname or user.username }}</h3>
|
|
<p class="user-role">{{ '管理员' if user.role_id == 1 else '普通用户' }}</p>
|
|
</div>
|
|
|
|
<div class="user-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-value" id="borrowCount">--</div>
|
|
<div class="stat-label">借阅中</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value" id="returnedCount">--</div>
|
|
<div class="stat-label">已归还</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value" id="overdueCount">--</div>
|
|
<div class="stat-label">已逾期</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="account-info">
|
|
<div class="info-row">
|
|
<span class="info-label">用户名</span>
|
|
<span class="info-value">{{ user.username }}</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">用户ID</span>
|
|
<span class="info-value">{{ user.id }}</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">注册时间</span>
|
|
<span class="info-value">{{ user.created_at }}</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">最后更新</span>
|
|
<span class="info-value">{{ user.updated_at }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧内容区域：包含编辑选项卡 -->
|
|
<div class="profile-main">
|
|
<!-- 提示消息 -->
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="alert alert-{{ category }}">{{ message }}</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<!-- 选项卡导航 -->
|
|
<ul class="nav nav-tabs" id="profileTabs" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="basic-tab" data-toggle="tab" href="#basic" role="tab" aria-controls="basic" aria-selected="true">
|
|
<i class="fas fa-user"></i> 基本信息
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="security-tab" data-toggle="tab" href="#security" role="tab" aria-controls="security" aria-selected="false">
|
|
<i class="fas fa-lock"></i> 安全设置
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="activity-tab" data-toggle="tab" href="#activity" role="tab" aria-controls="activity" aria-selected="false">
|
|
<i class="fas fa-history"></i> 最近活动
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- 选项卡内容 -->
|
|
<div class="tab-content" id="profileTabsContent">
|
|
<!-- 基本信息选项卡 -->
|
|
<div class="tab-pane fade show active" id="basic" role="tabpanel" aria-labelledby="basic-tab">
|
|
<form method="POST" action="{{ url_for('user.user_profile') }}" id="profileForm">
|
|
<div class="form-section">
|
|
<h4>个人信息</h4>
|
|
|
|
<div class="form-group">
|
|
<label for="nickname">昵称</label>
|
|
<input type="text" class="form-control" id="nickname" name="nickname" value="{{ user.nickname or '' }}" placeholder="请输入您的昵称">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="email">邮箱地址</label>
|
|
<input type="email" class="form-control" id="email" name="email" value="{{ user.email or '' }}" placeholder="请输入您的邮箱">
|
|
<small class="form-text text-muted">用于接收系统通知和找回密码</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="phone">手机号码</label>
|
|
<input type="text" class="form-control" id="phone" name="phone" value="{{ user.phone or '' }}" placeholder="请输入您的手机号">
|
|
<small class="form-text text-muted">用于接收借阅提醒和系统通知</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-primary" name="form_type" value="profile">
|
|
<i class="fas fa-save"></i> 保存修改
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 安全设置选项卡 -->
|
|
<div class="tab-pane fade" id="security" role="tabpanel" aria-labelledby="security-tab">
|
|
<form method="POST" action="{{ url_for('user.user_profile') }}" id="passwordForm">
|
|
<div class="form-section">
|
|
<h4>修改密码</h4>
|
|
|
|
<div class="form-group">
|
|
<label for="current_password">当前密码</label>
|
|
<input type="password" class="form-control" id="current_password" name="current_password" placeholder="请输入当前密码">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="new_password">新密码</label>
|
|
<input type="password" class="form-control" id="new_password" name="new_password" placeholder="请输入新密码">
|
|
<small class="form-text text-muted">密码长度至少为6个字符</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="confirm_password">确认新密码</label>
|
|
<input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="请再次输入新密码">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-primary" name="form_type" value="password">
|
|
<i class="fas fa-key"></i> 更新密码
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 最近活动选项卡 -->
|
|
<div class="tab-pane fade" id="activity" role="tabpanel" aria-labelledby="activity-tab">
|
|
<div class="activity-header">
|
|
<h4>最近活动</h4>
|
|
<div class="activity-filter">
|
|
<label for="activityFilter">显示:</label>
|
|
<select id="activityFilter" class="form-control form-control-sm">
|
|
<option value="all">所有活动</option>
|
|
<option value="login">登录记录</option>
|
|
<option value="borrow">借阅活动</option>
|
|
<option value="return">归还活动</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="activity-timeline" id="activityTimeline">
|
|
<div class="timeline-loading">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="sr-only">Loading...</span>
|
|
</div>
|
|
<p>加载中...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="{{ url_for('static', filename='js/user-profile.js') }}"></script>
|
|
{% endblock %}
|