@aicupa/plugin-todo-dependency 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aicupa/plugin-todo-dependency",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Set and visualize dependencies between todo items",
   "description_zh": "设置并可视化待办事项之间的依赖关系",
   "main": "./service",

package/service.js

@@ -11,6 +11,7 @@ module.exports = (api) => {
           id: node.todo.id,
           content: node.todo.content,
           done: node.todo.done,
+          focus: node.todo.focus || false,
           level: node.todo.level,
           depIds: node.todo.depIds || [],
         })
@@ -83,6 +84,32 @@ module.exports = (api) => {
       }
     },
 
+    async toggleFocus({ todoId, focus, filePath }) {
+      try {
+        const content = await api.readFile(filePath)
+        const data = JSON.parse(content)
+        const todotree = data.todotree
+
+        function findAndUpdate(nodes) {
+          for (const node of nodes) {
+            if (node.todo && node.todo.id === todoId) {
+              node.todo.focus = focus
+              return true
+            }
+            if (node.children?.length && findAndUpdate(node.children)) return true
+          }
+          return false
+        }
+
+        findAndUpdate(todotree.tree)
+        await api.store('todotree', todotree, filePath)
+        await api.reload(filePath)
+        return { ok: true }
+      } catch (e) {
+        return { ok: false, error: e.message }
+      }
+    },
+
     async toggleDone({ todoId, done, filePath }) {
       try {
         const content = await api.readFile(filePath)

package/view/index.html

@@ -52,7 +52,7 @@
       padding: 10px 12px; cursor: default;
       box-shadow: 0 1px 4px rgba(0,0,0,0.06);
       transition: box-shadow 0.2s, transform 0.15s;
-      display: flex; align-items: flex-start; gap: 10px;
+      display: flex; align-items: flex-start; gap: 8px;
     }
     .node:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); transform: translateY(-1px); }
     .dark .node { background: #2d2d2d; border-color: #3c3c3c; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
@@ -79,7 +79,22 @@
     .dark .node-check.checked { border-color: #73d13d; background: #73d13d; }
     .dark .node-check.checked::after { border-color: #2d2d2d; }
 
-    .node-body { flex: 1; min-width: 0; }
+    .node-body { flex: 1; min-width: 0; position: relative; }
+
+    .node-focus {
+      position: absolute; top: -2px; right: -4px;
+      width: 16px; height: 16px; cursor: pointer;
+      border: none; background: none; padding: 0;
+      color: #bbb; transition: color 0.15s;
+      display: flex; align-items: center; justify-content: center;
+      opacity: 0; transition: opacity 0.15s, color 0.15s;
+    }
+    .node:hover .node-focus { opacity: 1; }
+    .node-focus.active { opacity: 1; color: #1890ff; }
+    .node-focus:hover { color: #1890ff; }
+    .dark .node-focus { color: #555; }
+    .dark .node-focus:hover { color: #40a9ff; }
+    .dark .node-focus.active { color: #40a9ff; }
 
     .node-content {
       font-size: 12px; line-height: 1.5; word-break: break-word;
@@ -91,12 +106,14 @@
       display: inline-block; font-size: 10px; padding: 1px 6px;
       border-radius: 10px; margin-top: 5px;
     }
-    .badge-pending { background: #fff7e6; color: #d46b08; }
-    .badge-done    { background: #f6ffed; color: #389e0d; }
-    .badge-blocked { background: #fff1f0; color: #cf1322; }
-    .dark .badge-pending { background: #3a3000; color: #ffc53d; }
-    .dark .badge-done    { background: #1e3a1e; color: #73d13d; }
-    .dark .badge-blocked { background: #3a1a1a; color: #ff4d4f; }
+    .badge-pending  { background: #fff7e6; color: #d46b08; }
+    .badge-done     { background: #f6ffed; color: #389e0d; }
+    .badge-blocked  { background: #fff1f0; color: #cf1322; }
+    .badge-focus    { background: #e6f7ff; color: #096dd9; }
+    .dark .badge-pending  { background: #3a3000; color: #ffc53d; }
+    .dark .badge-done     { background: #1e3a1e; color: #73d13d; }
+    .dark .badge-blocked  { background: #3a1a1a; color: #ff4d4f; }
+    .dark .badge-focus    { background: #111d2c; color: #40a9ff; }
 
     .node.blocked { border-style: dashed; opacity: 0.7; }
     .dark .node.blocked { opacity: 0.7; }
@@ -109,10 +126,16 @@
 
     #edgeSvg { position: absolute; top: 0; left: 0; pointer-events: none; }
 
+    #graphInner { transition: opacity 0.35s ease; }
+    #graphInner.fade-out { opacity: 0; }
+
     .empty-state {
       display: flex; flex-direction: column; align-items: center; justify-content: center;
-      height: 100%; color: #aaa; padding: 40px 24px; text-align: center; user-select: none;
+      position: absolute; inset: 0;
+      color: #aaa; padding: 40px 24px; text-align: center; user-select: none;
+      opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
     }
+    .empty-state.visible { opacity: 1; pointer-events: auto; }
     .empty-icon { width: 64px; height: 64px; margin-bottom: 16px; opacity: 0.35; }
     .empty-title { font-size: 15px; font-weight: 500; margin-bottom: 10px; color: #888; }
     .dark .empty-title { color: #777; }
@@ -128,20 +151,19 @@
     </div>
     <div id="warnings"></div>
     <div id="graphArea">
-      <div id="graphContainer">
-        <div class="empty-state" id="emptyState">
-          <svg class="empty-icon" viewBox="0 0 80 80" fill="none" stroke="currentColor" stroke-width="2">
-            <rect x="8" y="10" width="24" height="16" rx="4"/>
-            <rect x="48" y="10" width="24" height="16" rx="4"/>
-            <rect x="28" y="50" width="24" height="16" rx="4"/>
-            <line x1="26" y1="26" x2="36" y2="50" stroke-dasharray="3,2"/>
-            <line x1="54" y1="26" x2="44" y2="50" stroke-dasharray="3,2"/>
-            <polygon points="36,50 33,45 39,45" fill="currentColor" stroke="none"/>
-            <polygon points="44,50 41,45 47,45" fill="currentColor" stroke="none"/>
-          </svg>
-          <div class="empty-title" data-i18n="emptyTitle"></div>
-          <div class="empty-hint" data-i18n="emptyHint"></div>
-        </div>
+      <div id="graphContainer"></div>
+      <div class="empty-state visible" id="emptyState">
+        <svg class="empty-icon" viewBox="0 0 80 80" fill="none" stroke="currentColor" stroke-width="2">
+          <rect x="8" y="10" width="24" height="16" rx="4"/>
+          <rect x="48" y="10" width="24" height="16" rx="4"/>
+          <rect x="28" y="50" width="24" height="16" rx="4"/>
+          <line x1="26" y1="26" x2="36" y2="50" stroke-dasharray="3,2"/>
+          <line x1="54" y1="26" x2="44" y2="50" stroke-dasharray="3,2"/>
+          <polygon points="36,50 33,45 39,45" fill="currentColor" stroke="none"/>
+          <polygon points="44,50 41,45 47,45" fill="currentColor" stroke="none"/>
+        </svg>
+        <div class="empty-title" data-i18n="emptyTitle"></div>
+        <div class="empty-hint" data-i18n="emptyHint"></div>
       </div>
     </div>
   </div>
@@ -153,14 +175,18 @@
         title: '依赖图谱', refresh: '刷新',
         emptyTitle: '暂无依赖关系',
         emptyHint: '右键 Todo 节点，选择「设置依赖」<br>即可建立待办之间的依赖关系',
-        done: '已完成', pending: '待完成', blocked: '阻塞中', notFound: '未找到该 Todo',
+        allDoneTitle: '所有依赖任务已完成 🎉',
+        allDoneHint: '当前依赖链路中的任务均已完成<br>如有新的依赖关系，请重新创建',
+        done: '已完成', pending: '待完成', blocked: '阻塞中', focus: '进行中', unfocus: '取消进行', notFound: '未找到该 Todo',
         cycleWarning: '检测到循环依赖，部分节点的层级可能不准确',
       },
       en: {
         title: 'Dependency Graph', refresh: 'Refresh',
         emptyTitle: 'No dependencies yet',
         emptyHint: 'Right-click a Todo and select "Set Dependencies"<br>to create dependency relationships',
-        done: 'Done', pending: 'Pending', blocked: 'Blocked', notFound: 'Todo not found',
+        allDoneTitle: 'All dependency tasks completed 🎉',
+        allDoneHint: 'All tasks in dependency chains are done<br>Create new dependencies if needed',
+        done: 'Done', pending: 'Pending', blocked: 'Blocked', focus: 'In Progress', unfocus: 'Cancel Focus', notFound: 'Todo not found',
         cycleWarning: 'Cycle detected — some nodes may be positioned incorrectly',
       },
     }
@@ -243,6 +269,7 @@
       if (!data) return
 
       const { todos, edges: allEdges } = data
+      hideEmpty()
 
       // Build adjacency (both directions) to find connected components
       const allIds = new Set()
@@ -275,7 +302,7 @@
       }
       const edges = allEdges.filter(([from, to]) => visibleIds.has(from) && visibleIds.has(to))
       const nodeIds = [...visibleIds]
-      if (!nodeIds.length) { showEmpty(); return }
+      if (!nodeIds.length) { fadeToEmpty(allEdges.length > 0); return }
 
       const { layers, hasCycle } = assignLayers(nodeIds, edges)
       if (hasCycle) {
@@ -285,11 +312,23 @@
       renderGraph(nodeIds, edges, layout.positions, todos, layout)
     }
 
-    function showEmpty() {
-      const c = document.getElementById('graphContainer')
+    function showEmpty(allDone) {
+      document.getElementById('graphContainer').innerHTML = ''
       const e = document.getElementById('emptyState')
-      c.innerHTML = ''; c.style.width = ''; c.style.height = ''
-      c.appendChild(e); e.style.display = 'flex'
+      e.querySelector('.empty-title').innerHTML = allDone ? t.allDoneTitle : t.emptyTitle
+      e.querySelector('.empty-hint').innerHTML = allDone ? t.allDoneHint : t.emptyHint
+      e.classList.add('visible')
+    }
+
+    function hideEmpty() {
+      document.getElementById('emptyState').classList.remove('visible')
+    }
+
+    function fadeToEmpty(allDone) {
+      const inner = document.getElementById('graphInner')
+      if (!inner) { showEmpty(allDone); return }
+      inner.classList.add('fade-out')
+      inner.addEventListener('transitionend', () => showEmpty(allDone), { once: true })
     }
 
     // ── Layout algorithm ──
@@ -352,6 +391,13 @@
       autoScan()
     }
 
+    async function toggleTodoFocus(todoId, focus) {
+      try {
+        await callPlugin('toggleFocus', { todoId, focus, filePath: currentFilePath })
+      } catch {}
+      autoScan()
+    }
+
     function renderGraph(nodeIds, edges, positions, todoData, layout) {
       const container = document.getElementById('graphContainer')
       container.innerHTML = ''
@@ -442,6 +488,18 @@
         }
 
         const body = document.createElement('div'); body.className = 'node-body'
+
+        if (todo && !todo.done && !blocked) {
+          const focusBtn = document.createElement('button')
+          focusBtn.className = 'node-focus' + (todo.focus ? ' active' : '')
+          focusBtn.title = todo.focus ? t.unfocus : t.focus
+          focusBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2" fill="currentColor"/></svg>'
+          focusBtn.addEventListener('click', e => {
+            e.stopPropagation()
+            toggleTodoFocus(id, !todo.focus)
+          })
+          body.appendChild(focusBtn)
+        }
         const content = document.createElement('div'); content.className = 'node-content'
         if (todo) {
           content.textContent = todo.content
@@ -459,6 +517,9 @@
           } else if (blocked) {
             sb.className = 'node-badge badge-blocked'
             sb.textContent = t.blocked
+          } else if (todo.focus) {
+            sb.className = 'node-badge badge-focus'
+            sb.textContent = t.focus
           } else {
             sb.className = 'node-badge badge-pending'
             sb.textContent = t.pending