From 9f8b560d202d5ca1d643e366c923c9bcd0f4de04 Mon Sep 17 00:00:00 2001 From: nanhaoluo <3075912108@qq.com> Date: Fri, 23 Jan 2026 13:04:43 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BATODO=E5=88=97=E8=A1=A8?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=8A=98=E5=8F=A0=E5=B7=B2=E5=AE=8C=E6=88=90?= =?UTF-8?q?=E4=BB=BB=E5=8A=A1=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 添加折叠/展开已完成任务的按钮，显示已完成数量 - 实现流畅的折叠展开动画效果（高度、透明度、位移） - 优化删除和完成任务的动画，增加缩放效果 - 同时支持桌面端和移动端 - 折叠按钮在没有已完成任务时自动隐藏 - 使用 CSS transition 实现平滑的进入退出动画 --- argontheme.js | 30 +++++++++++++ sidebar.php | 57 +++++++++++++++++++++++++ style.css | 115 +++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 201 insertions(+), 1 deletion(-) diff --git a/argontheme.js b/argontheme.js index d7ef059..2a85de9 100644 --- a/argontheme.js +++ b/argontheme.js @@ -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(); diff --git a/sidebar.php b/sidebar.php index 90ce01c..7208d17 100644 --- a/sidebar.php +++ b/sidebar.php @@ -165,6 +165,15 @@ $author_desc = get_option('argon_sidebar_author_description'); + 0) : + ?> + + @@ -854,8 +863,15 @@ $author_desc = get_option('argon_sidebar_author_description'); + 0) : ?> + + @@ -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'); diff --git a/style.css b/style.css index 7a5ca1d..f26533e 100644 --- a/style.css +++ b/style.css @@ -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); } @@ -10996,6 +11016,43 @@ html.darkmode.amoled-dark #content:after { margin-bottom: 8px; 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; +} + /* 站长端：显示未完成数�?*/ .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 {