pear-admin-flask/templates/public/index.html

{% extends 'public/base.html' %}

{# 单张导航卡片：热门 / 个人 / 普通分类共用 #}
{% macro nav_card(item, cls='', mine=None) %}
<a class="card {{ cls }}"
   href="{{ item.url }}"
   data-nav-id="{{ item.id }}"
   {%- if mine is not none %} data-mine="{{ mine }}"{% endif %}
   {%- if item.is_external %} target="_blank" rel="noopener noreferrer"{% endif %}>
    <div class="icon-wrap">
        <span class="nav-letter" style="background:{{ item.color }}">{{ item.letter }}</span>
        {% if item.domain %}
        {# 图标走本地缓存接口 /site/icon/<domain>，由服务端拉取并落盘到 data/icon/，失败自动生成字母头像 #}
        <img class="nav-favicon" alt="" loading="lazy" referrerpolicy="no-referrer"
             data-domain="{{ item.domain }}" data-letter="{{ item.letter }}"
             style="display:none">
        {% endif %}
    </div>
    <div class="card-body">
        <div class="title-row">
            <div class="title" title="{{ item.title }}">{{ item.title }}</div>
            {% if item.is_external %}
            <span class="ext-tag" title="外部链接"><i class="layui-icon layui-icon-link"></i></span>
            {% endif %}
        </div>
        {# 描述与网址共用同一行：默认显示描述，悬停时交叉淡出为网址，避免两行同时占用卡片空间 #}
        <div class="meta-line">
            <div class="desc">{{ item.description or '暂无描述' }}</div>
            <div class="url" title="{{ item.url }}">{{ item.url }}</div>
        </div>
        <div class="visit-count" data-nav-visit="{{ item.visit_count or 0 }}">
            {%- if mine is not none -%}
                我点过 {{ item.mine_count or 0 }} 次
            {%- else -%}
                {%- set vc = item.visit_count or 0 -%}
                {%- if vc >= 3 -%}访问 {{ '{:,}'.format(vc) }}
                {%- else -%}新
                {%- endif -%}
            {%- endif -%}
        </div>
    </div>
    <div class="card-arrow"><i class="layui-icon layui-icon-right"></i></div>
</a>
{% endmacro %}

{# 分类目录条：仅平板（601–1024px）可见，桌面走左侧侧栏、手机走抽屉 #}
{% block cat_nav %}
{% if groups or top_navs or my_navs %}
{% set anchors = cat_anchors or {} %}
<nav class="cat-nav" aria-label="分类导航">
    <div class="cat-nav-inner" id="cat-nav-inner">
        {% if my_navs %}<a href="#cat-mine" class="cat-nav-mine">★ 我常访问</a>{% endif %}
        {% if top_navs %}<a href="#cat-top" class="cat-nav-hot">🔥 热门网址</a>{% endif %}
        {% for category in groups.keys() %}
            <a href="#{{ anchors.get(category) or ('cat-' ~ loop.index) }}">{{ category }}</a>
        {% endfor %}
    </div>
</nav>
{% endif %}
{% endblock %}

{% block content %}
    {% if not groups and not top_navs and not my_navs %}
        <div class="empty">
            <i class="layui-icon layui-icon-face-surprised" style="font-size:48px;color:#ccc;"></i>
            <p>暂无导航数据，请先在后台【系统管理 → 导航管理】添加。</p>
        </div>
    {% else %}

        {# ===== 我常访问：基于匿名 ID + 本机 localStorage 的个人榜 ===== #}
        {% if my_navs %}
            <section class="section section-mine" id="cat-mine">
                <div class="section-header">
                    <h2><i class="layui-icon layui-icon-star-fill"></i> 我常访问</h2>
                    <div class="meta">只在这台设备上统计 · <a href="javascript:;" id="clear-mine">清除我的记录</a></div>
                </div>
                <div class="grid" id="mine-grid">
                    {% for item in my_navs %}
                        {{ nav_card(item, 'card-mine', item.mine_score) }}
                    {% endfor %}
                </div>
            </section>
        {% endif %}

        {# ===== 热门网址：跨分类聚合的全站 TOP N ===== #}
        {% if top_navs %}
            <section class="section section-hot" id="cat-top">
                <div class="section-header">
                    <h2><i class="layui-icon layui-icon-fire"></i> 热门网址</h2>
                    <div class="meta">全站访客共同热度，前 {{ top_navs|length }} 个</div>
                </div>
                <div class="grid">
                    {% for item in top_navs %}
                        {{ nav_card(item, 'card-top') }}
                    {% endfor %}
                </div>
            </section>
        {% endif %}

        {% for category, items in groups.items() %}
            {# 锚点与左侧侧栏、顶部横条、移动端抽屉共用同一套 id #}
            {% set cat_id = (cat_anchors or {}).get(category) or ('cat-' ~ loop.index) %}
            <section class="section" id="{{ cat_id }}" data-cat="{{ category }}">
                <div class="section-header">
                    <h2>{{ category }}</h2>
                    <div class="meta">
                        共 {{ items|length }} 个 ·
                        <a href="{{ url_for('public_nav.category_detail', name=category) }}">查看全部 →</a>
                    </div>
                </div>
                <div class="grid">
                    {% for item in items %}
                        {{ nav_card(item) }}
                    {% endfor %}
                </div>
            </section>
        {% endfor %}
    {% endif %}
{% endblock %}