genealogy-app/templates/members.html

{% extends "layout.html" %}

{% block title %}成员列表 - 家谱管理系统{% endblock %}

{% block extra_css %}
<style>
    .lineage-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 4px 14px 4px 10px;
        border: 1.5px solid #b8c9e8;
        border-radius: 20px;
        background: #f0f4fb;
        color: #3b5998;
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
        line-height: 1.6;
    }
    .lineage-icon {
        width: 16px;
        height: 16px;
        opacity: 0.6;
        flex-shrink: 0;
    }
    /* 兄弟 hover 弹窗 */
    .siblings-wrapper {
        position: relative;
        display: inline-block;
    }
    .siblings-popup {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 999;
        background: #fff;
        border: 1px solid #d0d7e6;
        border-radius: 8px;
        box-shadow: 0 4px 18px rgba(0,0,0,0.13);
        padding: 8px 4px;
        min-width: 140px;
        max-width: 220px;
        max-height: 260px;
        overflow-y: auto;
        white-space: nowrap;
    }
    .siblings-wrapper:hover .siblings-popup {
        display: block;
    }
    .siblings-popup a {
        display: block;
        padding: 3px 12px;
        font-size: 12px;
        color: #3b5998;
        text-decoration: none;
        border-radius: 4px;
        transition: background 0.12s;
    }
    .siblings-popup a:hover {
        background: #f0f4fb;
        color: #1a3a80;
    }
    .sibling-summary {
        font-size: 11.5px;
        color: #666;
        margin-top: 2px;
        cursor: default;
    }
    .sibling-count-badge {
        display: inline-block;
        background: #e8eef7;
        color: #4a69bd;
        border-radius: 10px;
        padding: 0 6px;
        font-size: 11px;
        vertical-align: middle;
        margin-left: 2px;
    }
</style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-people"></i> 家谱成员管理</h2>
    <div class="d-flex gap-2">
        <form class="d-flex" action="{{ url_for('members') }}" method="GET">
            <div class="input-group">
                <input type="text" name="name" class="form-control" placeholder="输入姓名搜索..." value="{{ search_name or '' }}">
                <button class="btn btn-outline-primary" type="submit"><i class="bi bi-search"></i></button>
                {% if search_name %}
                    <a href="{{ url_for('members') }}" class="btn btn-outline-secondary">重置</a>
                {% endif %}
            </div>
        </form>
        <a href="{{ url_for('add_member') }}" class="btn btn-primary text-nowrap"><i class="bi bi-plus-lg"></i> 录入新成员</a>
        <a href="{{ url_for('suspected_errors') }}" class="btn btn-warning text-nowrap"><i class="bi bi-exclamation-triangle"></i> 疑似汇总</a>
    </div>
</div>

<div class="card shadow-sm border-0">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="px-4">序号</th>
                        <th>基本信息</th>
                        <th>世系世代</th>
                        <th>父亲</th>
                        <th>职业背景</th>
                        <th>堂内排行</th>
                        <th>分房 / 堂号</th>
                        <th>居住地</th>
                        <th>状态</th>
                        <th class="text-center">操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for member in members %}
                    <tr>
                        <td class="px-4 text-muted small">{{ loop.index + (page - 1) * 20 }}</td>
                        <td>
                            <div class="fw-bold">
                                {{ member.name }}{% if member.simplified_name %}（{{ member.simplified_name }}）{% endif %}
                            </div>
                            <div class="small text-muted">
                                {{ '男' if member.sex == 1 else '女' }} | {{ member.birthday_str or '未知' }}
                            </div>
                        </td>
                        <td>
                            {% if member.name_word_generation %}
                            <div class="d-flex flex-column gap-1">
                                {% for gen in member.name_word_generation.split(';') %}
                                    {% if gen.strip() %}
                                    <span class="lineage-badge">
                                        <svg class="lineage-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>
                                        {{ gen.strip() }}
                                    </span>
                                    {% endif %}
                                {% endfor %}
                            </div>
                            {% else %}
                            <span class="text-muted small">-</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if member.father_id %}
                            {% set co_labels = {1: '长子', 2: '次子', 3: '三子', 4: '四子', 5: '五子', 6: '六子', 7: '七子', 8: '八子', 9: '九子', 10: '十子'} %}
                            <a href="{{ url_for('member_detail', member_id=member.father_id) }}"
                               target="_blank" class="text-decoration-none small fw-medium">
                                {{ member.father_name }}{% if member.father_simplified_name %}（{{ member.father_simplified_name }}）{% endif %}
                                {% if member.child_order_to_father %}
                                <span class="text-muted">{{ co_labels.get(member.child_order_to_father, '第' ~ member.child_order_to_father ~ '子') }}</span>
                                {% endif %}
                            </a>
                            {% else %}
                            <span class="text-muted small">-</span>
                            {% endif %}
                            {# 兄弟信息 #}
                            {% if member.siblings %}
                            {% set sibs = member.siblings %}
                            {% set first = sibs[0] %}
                            {% set rest_count = sibs|length - 1 %}
                            <div class="sibling-summary siblings-wrapper" style="display:block; margin-top:3px;">
                                兄弟：<a href="{{ url_for('member_detail', member_id=first.id) }}"
                                        target="_blank"
                                        style="font-size:11.5px; color:#3b5998; text-decoration:none;"
                                        onclick="event.stopPropagation()">{{ first.simplified_name or first.name }}</a>{% if rest_count > 0 %}<span class="sibling-count-badge">+{{ rest_count }}个兄弟</span>{% endif %}
                                {% if sibs|length > 1 %}
                                <div class="siblings-popup">
                                    {% for sib in sibs %}
                                    <a href="{{ url_for('member_detail', member_id=sib.id) }}" target="_blank">
                                        {{ sib.simplified_name or sib.name }}
                                    </a>
                                    {% endfor %}
                                </div>
                                {% endif %}
                            </div>
                            {% endif %}
                        </td>
                        <td>
                            {% if member.occupation %}
                            <div class="small" style="max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{{ member.occupation }}">
                                {{ member.occupation[:10] }}{% if member.occupation|length > 10 %}...{% endif %}
                            </div>
                            {% else %}
                            <span class="text-muted small">-</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="small">
                                {{ member.family_rank or '-' }}
                            </div>
                        </td>
                        <td>
                            <div class="small">
                                {{ member.branch_family_hall or '-' }}
                            </div>
                        </td>
                        <td>
                            <div class="small text-truncate" style="max-width: 150px;">
                                {{ member.residential_address or '-' }}
                            </div>
                        </td>
                        <td>
                            {% if member.is_pass_away == 1 %}
                                <span class="badge bg-secondary">已故</span>
                            {% elif member.is_pass_away == 2 %}
                                <span class="badge bg-warning">未知</span>
                            {% else %}
                                <span class="badge bg-success">健在</span>
                            {% endif %}
                            {% if member.modified_time_str %}
                                <div class="text-muted" style="font-size: 0.75rem;">修改: {{ member.modified_time_str }}</div>
                            {% else %}
                                <div class="text-muted" style="font-size: 0.75rem;">录入: {{ member.create_time_str or '-' }}</div>
                            {% endif %}
                        </td>
                        <td class="text-center">
                            <div class="btn-group btn-group-sm">
                                <a href="{{ url_for('member_detail', member_id=member.id) }}" class="btn btn-outline-info">
                                    <i class="bi bi-eye"></i> 详情
                                </a>
                                <a href="{{ url_for('edit_member', member_id=member.id) }}" class="btn btn-outline-primary">
                                    <i class="bi bi-pencil"></i> 编辑
                                </a>
                                <button type="button" class="btn btn-outline-danger" onclick="confirmDelete({{ member.id }}, '{{ member.name }}')">
                                    <i class="bi bi-trash"></i> 删除
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                    {% if not members %}
                    <tr>
                        <td colspan="9" class="text-center py-5 text-muted">
                            <i class="bi bi-person-x fs-1 d-block mb-2"></i>
                            暂无成员数据
                        </td>
                    </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
    
    <!-- 分页控件 -->
    {% if total_pages > 1 %}
    <nav class="mt-4">
        <ul class="pagination justify-content-center">
            <li class="page-item {{ 'disabled' if page == 1 }}">
                <a class="page-link" href="{{ url_for('members', page=page-1, name=search_name) }}">上一页</a>
            </li>
            
            {% for p in range(1, total_pages + 1) %}
                {% if p == page %}
                    <li class="page-item active"><span class="page-link">{{ p }}</span></li>
                {% else %}
                    {# Show first, last, and around current page #}
                    {% if p == 1 or p == total_pages or (p >= page - 2 and p <= page + 2) %}
                        <li class="page-item"><a class="page-link" href="{{ url_for('members', page=p, name=search_name) }}">{{ p }}</a></li>
                    {% elif p == page - 3 or p == page + 3 %}
                        <li class="page-item disabled"><span class="page-link">...</span></li>
                    {% endif %}
                {% endif %}
            {% endfor %}
            
            <li class="page-item {{ 'disabled' if page == total_pages }}">
                <a class="page-link" href="{{ url_for('members', page=page+1, name=search_name) }}">下一页</a>
            </li>
        </ul>
        <div class="text-center text-muted small mt-2">
            共 {{ total }} 条记录，当前第 {{ page }} / {{ total_pages }} 页
        </div>
    </nav>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
function confirmDelete(id, name) {
    if (confirm(`确定要删除成员 "${name}" 吗？此操作将同时删除与其相关的所有家谱关系，且不可恢复。`)) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = `/manager/delete_member/${id}`;
        document.body.appendChild(form);
        form.submit();
    }
}
</script>
{% endblock %}