20250115 添加全部已读、全部未读功能

1. 添加全部已读、全部未读功能。支持一键将内容标记为已读或未读

已知问题：全部已读、全部未读功能存在性能问题。在阅读清单中项目过多的情况下使用会卡顿2-3s。

batchWorker.js

@@ -0,0 +1,26 @@
+self.onmessage = async function(event) {
+    const { urls, readStatus, batchSize } = event.data;
+
+    const promises = []; // 存储所有的 Promise
+
+    for (let i = 0; i < urls.length; i += batchSize) {
+        const batch = urls.slice(i, i + batchSize);
+
+        // 处理每个批次的更新
+        const promise = (async () => {
+            // 通知主线程更新状态
+            self.postMessage({ batch, readStatus });
+
+            // 模拟异步操作
+            await new Promise(resolve => setTimeout(resolve, 0));
+        })();
+
+        promises.push(promise); // 将 Promise 添加到数组中
+    }
+
+    // 等待所有的 Promise 完成
+    await Promise.all(promises);
+
+    // 通知主线程任务完成
+    self.postMessage({ done: true });
+};

manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "BetterReadinglist",
-  "version": "1.0",
+  "version": "1.1",
   "manifest_version": 3,
   "description": "一个更强大的的Chrome阅读列表",
   "permissions": [
@@ -29,5 +29,11 @@
     "32": "icon.png",
     "48": "icon.png",
     "128": "icon.png"
-  }
+  },
+  "web_accessible_resources": [
+    {
+      "resources": ["batchWorker.js"],
+      "matches": ["<all_urls>"]
+    }
+  ]
 }

sidebar.html

@@ -80,6 +80,8 @@
     .tabs-section {
       background: white;
       padding: 0 10px;
+      display: flex;
+      flex-direction: column;
     }
 
     .tabs {
@@ -103,20 +105,48 @@
       color: #4CAF50;
     }
 
-    .stats {
+    .stats-readmanage {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
       padding: 8px 0;
+    }
+
+    .stats {
       font-size: 13px;
       color: #666;
     }
 
+    .readmanagebutton {
+      display: flex;
+      gap: 10px;
+    }
+
+    .readmanagebutton .action-btn {
+      padding: 6px 12px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 13px;
+      color: white;
+    }
+
+    #alreadyread {
+      background-color: #dc3545; /* 红色 */
+    }
+
+    #havenotread {
+      background-color: #28a745; /* 绿色 */
+    }
+
     /* 内容区域 */
     #reading-list {
       height: calc(100vh - 220px);
       /* 计算剩余可用高度 */
       overflow-y: auto;
       /* 只允许内容区域滚动 */
       padding: 10px;
-      padding-top: 0;
+      padding-top: 15px;
       /* 移除顶部内边距 */
     }
 
@@ -240,7 +270,13 @@
         <div class="tab" data-tab="unread">未读</div>
         <div class="tab" data-tab="read">已读</div>
       </div>
-      <div class="stats"></div>
+      <div class="stats-readmanage">
+        <div class="stats"></div>
+        <div class="readmanagebutton">
+          <button id="alreadyread" class="action-btn read-all">全部已读</button>
+          <button id="havenotread" class="action-btn unread-all">全部未读</button>
+        </div>
+      </div>
     </div>
   </div>
 

sidebar.js

@@ -265,3 +265,58 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
         updateAddButtonState(); // 当URL改变时更新按钮状态
     }
 });
+
+document.addEventListener('DOMContentLoaded', function() {
+    // 选择按钮
+    const alreadyReadButton = document.getElementById('alreadyread');
+    const haveNotReadButton = document.getElementById('havenotread');
+
+    // 选择阅读列表
+    const readingList = document.getElementById('reading-list');
+
+    // 创建 Web Worker
+    const worker = new Worker(chrome.runtime.getURL('batchWorker.js'));
+
+    // 监听 Web Worker 消息
+    worker.onmessage = function(event) {
+        const { batch, readStatus, done } = event.data;
+
+        if (batch) {
+            // 更新 DOM
+            batch.forEach(url => {
+                const item = readingList.querySelector(`a[href="${url}"]`).parentElement;
+                if (readStatus) {
+                    item.classList.add('read');
+                } else {
+                    item.classList.remove('read');
+                }
+                toggleReadStatus(url, !readStatus);
+            });
+        }
+
+        if (done) {
+            requestAnimationFrame(updateAllStates); // 使用 requestAnimationFrame
+        }
+    };
+
+    // 批量更新阅读状态
+    function batchUpdateReadStatus(items, readStatus) {
+        const urls = Array.from(items).map(item => item.querySelector('a').href);//获取所有url
+        const batchSize = 100; // 每批处理的项目数量
+
+        // 发送任务到 Web Worker
+        worker.postMessage({ urls, readStatus, batchSize });
+    }
+
+    // “全部已读”按钮功能
+    alreadyReadButton.addEventListener('click', function() {
+        const unreadItems = readingList.querySelectorAll('.reading-item:not(.read)');
+        batchUpdateReadStatus(unreadItems, true);
+    });
+
+    // “全部未读”按钮功能
+    haveNotReadButton.addEventListener('click', function() {
+        const readItems = readingList.querySelectorAll('.reading-item.read');
+        batchUpdateReadStatus(readItems, false);
+    });
+});