nanhaoluo/argon-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 为TODO列表添加折叠已完成任务功能

Browse Source 
- 添加折叠/展开已完成任务的按钮，显示已完成数量
- 实现流畅的折叠展开动画效果（高度、透明度、位移）
- 优化删除和完成任务的动画，增加缩放效果
- 同时支持桌面端和移动端
- 折叠按钮在没有已完成任务时自动隐藏
- 使用 CSS transition 实现平滑的进入退出动画
This commit is contained in:
nanhaoluo
2026-01-23 13:04:43 +08:00
parent 7d3dd6e2a6
commit 9f8b560d20
3 changed files with 201 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
sidebar.php
View File

@@ -165,6 +165,15 @@ $author_desc = get_option('argon_sidebar_author_description');
<i class="fa fa-check-square-o collapse-icon"></i>
<span class="collapse-title"><?php _e('TODO', 'argon'); ?></span>
<span class="collapse-badge" id="mobile_todo_count"><?php echo $mobile_uncompleted_count; ?></span>
<?php
$mobile_completed_count = count(array_filter($mobile_todos, function($t) { return !empty($t['completed']); }));
if ($mobile_completed_count > 0) :
?>
<button class="mobile-todo-collapse-btn" id="mobile-todo-collapse-btn" title="<?php _e('折叠/展开已完成', 'argon'); ?>">
<i class="fa fa-chevron-down"></i>
<span class="mobile-todo-completed-count"><?php echo $mobile_completed_count; ?></span>
</button>
<?php endif; ?>
</div>
<i class="fa fa-chevron-down collapse-arrow"></i>
</div>
@@ -854,8 +863,15 @@ $author_desc = get_option('argon_sidebar_author_description');
<i class="fa fa-list-ul"></i> <?php _e('TODO', 'argon'); ?>
<?php
$uncompleted_count = count(array_filter($todos, function($t) { return empty($t['completed']); }));
$completed_count = count(array_filter($todos, function($t) { return !empty($t['completed']); }));
?>
<span class="todo-count" title="<?php echo $is_author ? __('未完成', 'argon') : __('待办事项', 'argon'); ?>"><?php echo $uncompleted_count; ?></span>
<?php if ($completed_count > 0) : ?>
<button class="todo-collapse-btn" id="todo-collapse-btn" title="<?php _e('折叠/展开已完成', 'argon'); ?>">
<i class="fa fa-chevron-down"></i>
<span class="todo-completed-count"><?php echo $completed_count; ?></span>
</button>
<?php endif; ?>
</h6>
<?php if ($is_author) : ?>
@@ -950,9 +966,26 @@ $author_desc = get_option('argon_sidebar_author_description');
function updateCount() {
var count = document.querySelectorAll('.todo-item:not(.todo-completed)').length;
var completedCount = document.querySelectorAll('.todo-item.todo-completed').length;
var countEl = document.querySelector('.todo-count');
if (countEl) countEl.textContent = count;
// 更新折叠按钮
var collapseBtn = document.getElementById('todo-collapse-btn');
var completedCountEl = collapseBtn ? collapseBtn.querySelector('.todo-completed-count') : null;
if (completedCountEl) {
completedCountEl.textContent = completedCount;
}
// 显示/隐藏折叠按钮
if (collapseBtn) {
if (completedCount > 0) {
collapseBtn.style.display = 'flex';
} else {
collapseBtn.style.display = 'none';
}
}
var totalCount = document.querySelectorAll('.todo-item').length;
var list = document.getElementById('todo-list');
if (totalCount > 4) {
@@ -970,6 +1003,30 @@ $author_desc = get_option('argon_sidebar_author_description');
}
}
// 折叠/展开已完成任务
var collapseBtn = document.getElementById('todo-collapse-btn');
if (collapseBtn) {
collapseBtn.addEventListener('click', function(e) {
e.stopPropagation();
var completedItems = document.querySelectorAll('.todo-item.todo-completed');
var isCollapsed = collapseBtn.classList.contains('collapsed');
if (isCollapsed) {
// 展开
collapseBtn.classList.remove('collapsed');
completedItems.forEach(function(item) {
item.classList.remove('collapsed');
});
} else {
// 折叠
collapseBtn.classList.add('collapsed');
completedItems.forEach(function(item) {
item.classList.add('collapsed');
});
}
});
}
// 添加 TODO
if (isAuthor) {
var input = document.getElementById('todo-input');