6.9 KiB
6.9 KiB
模板显示限制功能实现说明
🎯 功能概述
为了解决"全部"分类下模板过多导致页面过长的问题，实现了模板显示限制功能。默认只显示前8个模板，用户可以通过"显示更多"按钮查看全部模板。
📋 实现内容
1. 功能特性
1.1 默认显示限制
- 显示数量：默认只显示前8个模板
- 隐藏逻辑：超过8个的模板自动隐藏
- 智能判断：只在模板数量超过8个时显示"更多"按钮
1.2 显示更多功能
- 动态按钮：显示剩余模板数量
- 切换状态：支持展开和收起
- 动画效果：按钮图标旋转动画
1.3 筛选联动
- 筛选同步：筛选条件变化时重新计算显示逻辑
- 状态保持：筛选后保持展开/收起状态
- 重置功能：重置筛选时恢复默认状态
2. 技术实现
2.1 HTML结构
<div class="template-grid" id="templateGrid">
{% for template in templates %}
<div class="template-card {% if loop.index > 8 %}template-hidden{% endif %}"
data-category="{{ template.category }}"
data-industry="{{ template.industry }}"
data-profession="{{ template.profession }}"
data-subcategory="{{ template.sub_category }}">
<!-- 模板内容 -->
</div>
{% endfor %}
</div>
<!-- 显示更多按钮 -->
<div class="show-more-section" id="showMoreSection" style="display: none;">
<button class="btn btn-outline-primary show-more-btn" id="showMoreBtn">
<i class="fas fa-chevron-down"></i>
显示更多模板
</button>
</div>
2.2 CSS样式
/* 模板显示控制 */
.template-hidden {
display: none !important;
}
.show-more-section {
text-align: center;
margin-top: 2rem;
padding: 1rem;
}
.show-more-btn {
padding: 0.75rem 2rem;
font-size: 1rem;
font-weight: 600;
border-radius: 8px;
transition: all 0.3s ease;
background: white;
border: 2px solid var(--primary-color);
color: var(--primary-color);
}
.show-more-btn:hover {
background: var(--primary-color);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}
.show-more-btn i {
margin-right: 0.5rem;
transition: transform 0.3s ease;
}
.show-more-btn.expanded i {
transform: rotate(180deg);
}
2.3 JavaScript逻辑
// 更新显示更多按钮
function updateShowMoreButton(visibleCount) {
const showMoreSection = document.getElementById('showMoreSection');
const showMoreBtn = document.getElementById('showMoreBtn');
if (visibleCount > 8) {
showMoreSection.style.display = 'block';
showMoreBtn.innerHTML = `
<i class="fas fa-chevron-down"></i>
显示更多模板 (${visibleCount - 8}个)
`;
} else {
showMoreSection.style.display = 'none';
}
}
// 切换显示更多
function toggleShowMore() {
const showMoreBtn = document.getElementById('showMoreBtn');
const hiddenCards = document.querySelectorAll('.template-card.template-hidden:not(.hidden)');
if (hiddenCards.length > 0) {
// 显示所有隐藏的模板
hiddenCards.forEach(card => {
card.classList.remove('template-hidden');
});
showMoreBtn.innerHTML = `
<i class="fas fa-chevron-up"></i>
收起模板
`;
showMoreBtn.classList.add('expanded');
} else {
// 隐藏多余的模板
const visibleCards = document.querySelectorAll('.template-card:not(.hidden)');
visibleCards.forEach((card, index) => {
if (index >= 8) {
card.classList.add('template-hidden');
}
});
showMoreBtn.innerHTML = `
<i class="fas fa-chevron-down"></i>
显示更多模板
`;
showMoreBtn.classList.remove('expanded');
}
}
3. 用户体验
3.1 默认状态
- 页面简洁：默认只显示8个模板，页面不会过长
- 快速浏览：用户可以快速浏览主要模板
- 清晰提示：显示剩余模板数量
3.2 展开状态
- 完整查看：点击后可以查看所有模板
- 状态指示：按钮变为"收起模板"
- 图标变化：箭头向上，表示可以收起
3.3 交互反馈
- 悬停效果：按钮有悬停动画效果
- 图标动画：展开/收起时图标旋转
- 即时响应：点击后立即显示/隐藏
4. 筛选联动
4.1 筛选变化
- 重新计算：筛选条件变化时重新计算显示逻辑
- 状态保持：保持当前的展开/收起状态
- 数量更新：动态更新剩余模板数量
4.2 重置功能
- 状态重置：重置筛选时恢复默认收起状态
- 显示重置：重新应用8个模板的限制
- 按钮隐藏：如果模板数量≤8，隐藏按钮
5. 性能优化
5.1 渲染优化
- CSS隐藏：使用CSS隐藏而非JavaScript移除
- DOM保持：保持DOM结构，避免重新渲染
- 事件保持：保持事件监听器，避免重复绑定
5.2 交互优化
- 防抖处理：避免频繁的状态切换
- 状态缓存：缓存当前显示状态
- 平滑动画：使用CSS过渡动画
6. 响应式适配
6.1 移动端
- 触摸友好：按钮大小适合触摸操作
- 间距优化：移动端减少按钮间距
- 文字适配：移动端简化按钮文字
6.2 桌面端
- 悬停效果：桌面端显示悬停效果
- 键盘支持：支持键盘Tab导航
- 焦点状态：清晰的焦点指示
7. 使用场景
7.1 全部分类
- 默认限制：选择"全部"分类时默认显示8个
- 智能显示：根据筛选结果动态显示按钮
- 用户控制：用户可以选择是否查看全部
7.2 其他分类
- 无限制：其他分类下不限制显示数量
- 自动隐藏：如果模板数量≤8，自动隐藏按钮
- 一致体验：保持统一的交互体验
8. 后续优化
8.1 功能增强
- 自定义数量：允许用户自定义显示数量
- 记住状态：记住用户的展开/收起偏好
- 分页显示：支持分页显示大量模板
8.2 性能优化
- 懒加载：对隐藏的模板进行懒加载
- 虚拟滚动：大量模板时使用虚拟滚动
- 缓存机制：缓存模板数据和状态
8.3 用户体验
- 动画优化：更流畅的展开/收起动画
- 状态提示：更清晰的状态提示信息
- 快捷键：支持键盘快捷键操作
🎯 总结
模板显示限制功能有效解决了页面过长的问题，通过智能的显示控制和用户友好的交互设计，让用户可以在简洁的界面中快速浏览模板，同时保留了查看全部模板的灵活性。这个功能为后续的性能优化和用户体验提升奠定了良好的基础。