229 lines
6.9 KiB
Markdown
229 lines
6.9 KiB
Markdown
# 模板显示限制功能实现说明
|
||
|
||
## 🎯 **功能概述**
|
||
|
||
为了解决"全部"分类下模板过多导致页面过长的问题，实现了模板显示限制功能。默认只显示前8个模板，用户可以通过"显示更多"按钮查看全部模板。
|
||
|
||
## 📋 **实现内容**
|
||
|
||
### 1. **功能特性**
|
||
|
||
#### 1.1 默认显示限制
|
||
- **显示数量**：默认只显示前8个模板
|
||
- **隐藏逻辑**：超过8个的模板自动隐藏
|
||
- **智能判断**：只在模板数量超过8个时显示"更多"按钮
|
||
|
||
#### 1.2 显示更多功能
|
||
- **动态按钮**：显示剩余模板数量
|
||
- **切换状态**：支持展开和收起
|
||
- **动画效果**：按钮图标旋转动画
|
||
|
||
#### 1.3 筛选联动
|
||
- **筛选同步**：筛选条件变化时重新计算显示逻辑
|
||
- **状态保持**：筛选后保持展开/收起状态
|
||
- **重置功能**：重置筛选时恢复默认状态
|
||
|
||
### 2. **技术实现**
|
||
|
||
#### 2.1 HTML结构
|
||
```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样式
|
||
```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逻辑
|
||
```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 用户体验
|
||
- **动画优化**：更流畅的展开/收起动画
|
||
- **状态提示**：更清晰的状态提示信息
|
||
- **快捷键**：支持键盘快捷键操作
|
||
|
||
## 🎯 **总结**
|
||
|
||
模板显示限制功能有效解决了页面过长的问题，通过智能的显示控制和用户友好的交互设计，让用户可以在简洁的界面中快速浏览模板，同时保留了查看全部模板的灵活性。这个功能为后续的性能优化和用户体验提升奠定了良好的基础。
|