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

30
argontheme.js
View File

@@ -3198,11 +3198,41 @@ $(document).on("click" , "#blog_categories .tag" , function(){
// ========== 移动端TODO交互 ==========
function updateMobileTodoCount() {
var count = $("#mobile-todo-list .mobile-todo-item:not(.todo-completed)").length;
var completedCount = $("#mobile-todo-list .mobile-todo-item.todo-completed").length;
$("#mobile_todo_count").text(count);
// 同步更新桌面端计数
$(".todo-count").text(count);
// 更新折叠按钮
var collapseBtn = $("#mobile-todo-collapse-btn");
if (collapseBtn.length) {
collapseBtn.find(".mobile-todo-completed-count").text(completedCount);
if (completedCount > 0) {
collapseBtn.show();
} else {
collapseBtn.hide();
}
}
}
// 移动端折叠/展开已完成任务
$(document).on("click", "#mobile-todo-collapse-btn", function(e) {
e.stopPropagation();
var btn = $(this);
var completedItems = $("#mobile-todo-list .mobile-todo-item.todo-completed");
var isCollapsed = btn.hasClass("collapsed");
if (isCollapsed) {
// 展开
btn.removeClass("collapsed");
completedItems.removeClass("collapsed");
} else {
// 折叠
btn.addClass("collapsed");
completedItems.addClass("collapsed");
}
});
// 添加TODO
$(document).on("click", "#mobile-todo-add-btn", function() {
addMobileTodo();

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');

115
style.css
View File

@@ -10973,11 +10973,31 @@ html.darkmode.amoled-dark #content:after {
opacity: 0.6;
order: 1;
transform: scale(0.98);
max-height: 500px;
overflow: hidden;
transition: all var(--animation-normal) var(--ease-emphasized),
max-height var(--animation-normal) var(--ease-emphasized),
margin var(--animation-normal) var(--ease-emphasized),
padding var(--animation-normal) var(--ease-emphasized),
opacity var(--animation-normal) var(--ease-emphasized);
}
.mobile-todo-item.todo-completed.collapsed {
max-height: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
transform: translateY(-10px) scale(0.9);
}
.mobile-todo-item.todo-completing {
opacity: 0;
transform: translateX(40px) scale(0.85);
max-height: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
transition: all 0.4s var(--ease-emphasized-accelerate);
}
@@ -10997,6 +11017,43 @@ html.darkmode.amoled-dark #content:after {
opacity: 0.35;
}
/* 移动端折叠已完成按钮 */
.mobile-todo-collapse-btn {
display: flex;
align-items: center;
gap: 3px;
background: rgba(var(--themecolor-rgbstr), 0.12);
color: var(--themecolor);
border: none;
border-radius: 8px;
padding: 2px 6px;
font-size: 10px;
font-weight: 600;
cursor: pointer;
transition: all var(--animation-fast) var(--ease-standard);
margin-left: 6px;
flex-shrink: 0;
}
.mobile-todo-collapse-btn:active {
background: rgba(var(--themecolor-rgbstr), 0.25);
transform: scale(0.92);
}
.mobile-todo-collapse-btn i {
font-size: 8px;
transition: transform var(--animation-fast) var(--ease-standard);
}
.mobile-todo-collapse-btn.collapsed i {
transform: rotate(-90deg);
}
.mobile-todo-completed-count {
min-width: 10px;
text-align: center;
}
#navbar_global {
background: var(--color-foreground);
}
@@ -12559,6 +12616,42 @@ html.navbar-absolute #leftbar_part3.sticky {
margin-left: auto;
}
/* 折叠已完成按钮 */
.todo-collapse-btn {
display: flex;
align-items: center;
gap: 4px;
background: rgba(var(--themecolor-rgbstr), 0.1);
color: var(--themecolor);
border: none;
border-radius: 8px;
padding: 2px 7px;
font-size: 10px;
font-weight: 600;
cursor: pointer;
transition: all var(--animation-fast) var(--ease-standard);
margin-left: 6px;
}
.todo-collapse-btn:hover {
background: rgba(var(--themecolor-rgbstr), 0.2);
transform: scale(1.05);
}
.todo-collapse-btn i {
font-size: 9px;
transition: transform var(--animation-fast) var(--ease-standard);
}
.todo-collapse-btn.collapsed i {
transform: rotate(-90deg);
}
.todo-completed-count {
min-width: 12px;
text-align: center;
}
/* 站长端：显示未完成数<E68890>?*/
.todo-count::before {
content: '';
@@ -12734,7 +12827,11 @@ html.navbar-absolute #leftbar_part3.sticky {
.todo-item.todo-completing {
opacity: 0;
transform: translateX(30px);
transform: translateX(30px) scale(0.9);
max-height: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@@ -12746,6 +12843,22 @@ html.navbar-absolute #leftbar_part3.sticky {
.todo-item.todo-completed {
opacity: 0.7;
order: 1;
max-height: 500px;
overflow: hidden;
transition: all var(--animation-normal) var(--ease-emphasized),
max-height var(--animation-normal) var(--ease-emphasized),
margin var(--animation-normal) var(--ease-emphasized),
padding var(--animation-normal) var(--ease-emphasized),
opacity var(--animation-normal) var(--ease-emphasized);
}
.todo-item.todo-completed.collapsed {
max-height: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
transform: translateY(-10px);
}
.todo-item.todo-completed:hover {