jowelin/zjpb.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 实现最新/热门/推荐标签功能

Browse Source 
- 移除顶部热门工具排行榜模块
- 在标签下方添加三个tab（最新/热门/推荐）
- 添加is_recommended字段到Site模型
- 创建数据库迁移脚本add_is_recommended.py
- 更新后台管理界面支持推荐标记
- 更新分页链接保持tab状态
- 所有功能已本地测试验证通过

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Jowe
2026-01-04 00:59:37 +08:00
parent da30394ed7
commit 8011e5bd4a
4 changed files with 167 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
templates/index_new.html
View File

@@ -44,126 +44,6 @@
margin-bottom: 0;
}
/* 热门工具排行榜 */
.popular-section {
padding: 0 0 32px 0;
}
.popular-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.popular-title {
font-size: 20px;
font-weight: 700;
color: var(--text-primary);
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.popular-badge {
background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
color: white;
font-size: 18px;
padding: 2px 8px;
border-radius: 4px;
}
.popular-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.popular-item {
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 16px;
text-decoration: none;
transition: all 0.3s;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
overflow: hidden;
}
.popular-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
border-color: var(--primary-blue);
}
.popular-rank {
position: absolute;
top: 8px;
left: 8px;
width: 24px;
height: 24px;
background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
color: #b8860b;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.popular-rank.rank-2 {
background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
color: #696969;
}
.popular-rank.rank-3 {
background: linear-gradient(135deg, #cd7f32 0%, #e9a76f 100%);
color: #654321;
}
.popular-rank.rank-other {
background: #f1f5f9;
color: #64748b;
}
.popular-logo {
width: 56px;
height: 56px;
border-radius: 12px;
object-fit: cover;
margin-bottom: 12px;
}
.popular-name {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.popular-views {
display: flex;
align-items: center;
gap: 4px;
color: #94a3b8;
font-size: 12px;
}
.popular-fire {
font-size: 16px;
}
/* 分类过滤 */
.categories {
padding: 32px 0;
@@ -456,30 +336,63 @@
color: var(--text-secondary);
}
/* 排序标签 */
.sort-tabs {
padding: 24px 0 0 0;
border-top: 1px solid var(--border-color);
margin-top: 24px;
}
.sort-tabs-container {
display: flex;
gap: 8px;
align-items: center;
}
.sort-tab {
padding: 8px 20px;
border: 1px solid var(--border-color);
border-radius: 50px;
background: var(--bg-white);
color: var(--text-secondary);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.sort-tab:hover {
border-color: var(--primary-blue);
color: var(--primary-blue);
background: rgba(59, 130, 246, 0.05);
}
.sort-tab.active {
background: var(--primary-blue);
border-color: var(--primary-blue);
color: white;
}
.sort-tab .icon {
font-size: 14px;
}
/* 响应式 */
@media (max-width: 768px) {
.hero-title {
font-size: 40px;
}
.popular-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.popular-logo {
width: 48px;
height: 48px;
}
.tools-grid {
grid-template-columns: 1fr;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.popular-grid {
grid-template-columns: repeat(3, 1fr);
.sort-tabs-container {
flex-wrap: wrap;
}
}
</style>
@@ -497,37 +410,6 @@
<div class="main-content">
<!-- 热门工具排行榜 -->
{% if popular_sites and not selected_tag and not search_query %}
<div class="popular-section">
<div class="popular-header">
<h2 class="popular-title">
<span class="popular-badge">🔥</span>
热门工具排行榜
</h2>
</div>
<div class="popular-grid">
{% for site in popular_sites[:10] %}
<a href="/site/{{ site.code }}" class="popular-item">
<div class="popular-rank {% if loop.index == 1 %}rank-1{% elif loop.index == 2 %}rank-2{% elif loop.index == 3 %}rank-3{% else %}rank-other{% endif %}">
{{ loop.index }}
</div>
{% if site.logo %}
<img src="{{ site.logo }}" alt="{{ site.name }}" class="popular-logo">
{% else %}
<div class="popular-logo" style="background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);"></div>
{% endif %}
<div class="popular-name">{{ site.name }}</div>
<div class="popular-views">
<span class="popular-fire">👁</span>
<span>{% if site.view_count >= 1000 %}{{ (site.view_count / 1000) | round(1) }}k{% else %}{{ site.view_count | default(0) }}{% endif %}</span>
</div>
</a>
{% endfor %}
</div>
</div>
{% endif %}
<!-- 分类过滤 -->
<div class="categories" id="categories">
<div class="category-tabs" id="categoryTabs">
@@ -557,6 +439,27 @@
</div>
{% endif %}
</div>
<!-- 排序标签 -->
<div class="sort-tabs">
<div class="sort-tabs-container">
<a href="/?{% if selected_tag %}tag={{ selected_tag.slug }}&{% endif %}tab=latest"
class="sort-tab {% if not current_tab or current_tab == 'latest' %}active{% endif %}">
<span class="icon">🕐</span>
最新
</a>
<a href="/?{% if selected_tag %}tag={{ selected_tag.slug }}&{% endif %}tab=popular"
class="sort-tab {% if current_tab == 'popular' %}active{% endif %}">
<span class="icon">🔥</span>
热门
</a>
<a href="/?{% if selected_tag %}tag={{ selected_tag.slug }}&{% endif %}tab=recommended"
class="sort-tab {% if current_tab == 'recommended' %}active{% endif %}">
<span class="icon">⭐</span>
推荐
</a>
</div>
</div>
</div>
<!-- 工具网格 -->
@@ -604,7 +507,7 @@
<div class="pagination">
<!-- 上一页 -->
{% if pagination.has_prev %}
<a href="?page={{ pagination.prev_num }}{% if selected_tag %}&tag={{ selected_tag.slug }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}">
<a href="?page={{ pagination.prev_num }}{% if selected_tag %}&tag={{ selected_tag.slug }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}{% if current_tab and current_tab != 'latest' %}&tab={{ current_tab }}{% endif %}">
<span>◀</span>
</a>
{% else %}
@@ -618,7 +521,7 @@
{% set end_page = [pagination.pages, pagination.page + 2]|min %}
{% if start_page > 1 %}
<a href="?page=1{% if selected_tag %}&tag={{ selected_tag.slug }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}">1</a>
<a href="?page=1{% if selected_tag %}&tag={{ selected_tag.slug }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}{% if current_tab and current_tab != 'latest' %}&tab={{ current_tab }}{% endif %}">1</a>
{% if start_page > 2 %}
<span>...</span>
{% endif %}
@@ -628,7 +531,7 @@
{% if page_num == pagination.page %}
<span class="active">{{ page_num }}</span>
{% else %}
<a href="?page={{ page_num }}{% if selected_tag %}&tag={{ selected_tag.slug }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}">{{ page_num }}</a>
<a href="?page={{ page_num }}{% if selected_tag %}&tag={{ selected_tag.slug }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}{% if current_tab and current_tab != 'latest' %}&tab={{ current_tab }}{% endif %}">{{ page_num }}</a>
{% endif %}
{% endfor %}
@@ -636,12 +539,12 @@
{% if end_page < pagination.pages - 1 %}
<span>...</span>
{% endif %}
<a href="?page={{ pagination.pages }}{% if selected_tag %}&tag={{ selected_tag.slug }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}">{{ pagination.pages }}</a>
<a href="?page={{ pagination.pages }}{% if selected_tag %}&tag={{ selected_tag.slug }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}{% if current_tab and current_tab != 'latest' %}&tab={{ current_tab }}{% endif %}">{{ pagination.pages }}</a>
{% endif %}
<!-- 下一页 -->
{% if pagination.has_next %}
<a href="?page={{ pagination.next_num }}{% if selected_tag %}&tag={{ selected_tag.slug }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}">
<a href="?page={{ pagination.next_num }}{% if selected_tag %}&tag={{ selected_tag.slug }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}{% if current_tab and current_tab != 'latest' %}&tab={{ current_tab }}{% endif %}">
<span>▶</span>
</a>
{% else %}