@qnote/q-ai-note 1.0.5 → 1.0.7

package/dist/web/vueRenderers.js

@@ -14,7 +14,7 @@ function byId(targetId) {
 export function mountSandboxGrid(targetId, options) {
   const container = byId(targetId);
   if (!container) return;
-  const { sandboxes = [], emptyText = '暂无数据', onOpen, onDelete } = options || {};
+  const { sandboxes = [], emptyText = '暂无数据', onOpen, onDelete, readonly = false } = options || {};
 
   if (!sandboxes.length) {
     container.innerHTML = `<div class="empty-state"><p>${esc(emptyText)}</p></div>`;
@@ -28,7 +28,7 @@ export function mountSandboxGrid(targetId, options) {
       <div class="sandbox-meta">
         <span>${esc(new Date(sandbox.updated_at).toLocaleDateString())}</span>
       </div>
-      <button class="btn btn-secondary btn-sm sandbox-delete" data-delete-id="${esc(sandbox.id)}">删除</button>
+      ${readonly ? '' : `<button class="btn btn-secondary btn-sm sandbox-delete" data-delete-id="${esc(sandbox.id)}">删除</button>`}
     </div>
   `).join('');
 
@@ -60,6 +60,7 @@ export function mountDiaryTimeline(targetId, options) {
     onIgnore,
     onEdit,
     onOpenWorkItem,
+    readonly = false,
     renderContent,
   } = options || {};
 
@@ -84,13 +85,15 @@ export function mountDiaryTimeline(targetId, options) {
             >${esc(getWorkItemName?.(diary.sandbox_id, diary.work_item_id) || diary.work_item_id)}</button>
           ` : ''}
         </div>
-        <div class="diary-actions">
-          <button class="edit" data-edit-id="${esc(diary.id)}">编辑</button>
-          ${diary.processed ? '' : `
-            <button class="confirm" data-confirm-id="${esc(diary.id)}">采纳</button>
-            <button class="ignore" data-ignore-id="${esc(diary.id)}">忽略</button>
-          `}
-        </div>
+        ${readonly ? '' : `
+          <div class="diary-actions">
+            <button class="edit" data-edit-id="${esc(diary.id)}">编辑</button>
+            ${diary.processed ? '' : `
+              <button class="confirm" data-confirm-id="${esc(diary.id)}">采纳</button>
+              <button class="ignore" data-ignore-id="${esc(diary.id)}">忽略</button>
+            `}
+          </div>
+        `}
       </div>
       <div class="diary-content">${typeof renderContent === 'function' ? renderContent(diary.content) : esc(diary.content)}</div>
     </div>
@@ -173,28 +176,30 @@ function renderEntityPreviewBoxes(nodeId, entityRowsByNodeId, mode) {
   `;
 }
 
-function renderTreeNode(node, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee = false, entityRowsByNodeId = {}, elementPreviewMode = 'none') {
+function renderTreeNode(node, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee = false, entityRowsByNodeId = {}, elementPreviewMode = 'none', readonly = false, selectedId = '') {
   const children = byParent.get(node.id) || [];
   const hasChildren = children.length > 0;
   const isExpanded = expandedIdSet.has(node.id);
   const isShort = String(node.name || '').trim().length <= 10;
   const nodeSummary = entitySummaryByNodeId?.[node.id] || { issue: 0, knowledge: 0, capability: 0 };
   const previewHtml = renderEntityPreviewBoxes(node.id, entityRowsByNodeId, elementPreviewMode);
+  const isSelected = String(selectedId || '') === String(node.id || '');
 
   if (!hasChildren) {
     return `
-      <div class="tree-leaf-node" data-id="${esc(node.id)}" data-select-id="${esc(node.id)}" tabindex="0">
-        <span class="node-status ${esc(node.status)}"></span>
+      <div class="tree-leaf-node ${isSelected ? 'is-selected' : ''}" data-id="${esc(node.id)}" data-select-id="${esc(node.id)}" tabindex="0">
         <span class="node-name ${isShort ? 'short-name' : ''}" data-select-id="${esc(node.id)}">${esc(node.name)}</span>
         ${renderEntityBadges(nodeSummary)}
         ${previewHtml}
-        <div class="node-actions">
-          <button class="node-action-btn chat" data-action="quick-chat" data-id="${esc(node.id)}" title="快捷提问">💬</button>
-          <button class="node-action-btn" data-action="add-diary" data-id="${esc(node.id)}" title="记录日记">📝</button>
-          <button class="node-action-btn add-child" data-action="add-child" data-id="${esc(node.id)}" title="添加子任务">+</button>
-          <button class="node-action-btn" data-action="edit" data-id="${esc(node.id)}" title="编辑">✎</button>
-          <button class="node-action-btn delete" data-action="delete" data-id="${esc(node.id)}" title="删除">✕</button>
-        </div>
+        ${readonly ? '' : `
+          <div class="node-actions">
+            <button class="node-action-btn chat" data-action="quick-chat" data-id="${esc(node.id)}" title="快捷提问">💬</button>
+            <button class="node-action-btn" data-action="add-diary" data-id="${esc(node.id)}" title="记录日记">📝</button>
+            <button class="node-action-btn add-child" data-action="add-child" data-id="${esc(node.id)}" title="添加子任务">+</button>
+            <button class="node-action-btn" data-action="edit" data-id="${esc(node.id)}" title="编辑">✎</button>
+            <button class="node-action-btn delete" data-action="delete" data-id="${esc(node.id)}" title="删除">✕</button>
+          </div>
+        `}
       </div>
     `;
   }
@@ -204,7 +209,7 @@ function renderTreeNode(node, byParent, expandedIdSet, entitySummaryByNodeId, sh
 
   return `
     <div class="tree-parent-card ${isExpanded ? 'expanded' : 'collapsed'}">
-      <div class="tree-parent-header" data-select-id="${esc(node.id)}" tabindex="0" aria-expanded="${isExpanded ? 'true' : 'false'}">
+      <div class="tree-parent-header ${isSelected ? 'is-selected' : ''}" data-select-id="${esc(node.id)}" tabindex="0" aria-expanded="${isExpanded ? 'true' : 'false'}">
         <button
           class="node-expand-btn ${isExpanded ? 'expanded' : ''}"
           data-action="toggle"
@@ -215,22 +220,23 @@ function renderTreeNode(node, byParent, expandedIdSet, entitySummaryByNodeId, sh
         >
           <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
         </button>
-        <span class="node-status ${esc(node.status)}"></span>
         <span class="node-name">${esc(node.name)}</span>
         ${renderEntityBadges(nodeSummary)}
         ${showAssignee && node.assignee ? `<span class="node-meta">@${esc(node.assignee)}</span>` : ''}
-        <div class="node-actions">
-          <button class="node-action-btn chat" data-action="quick-chat" data-id="${esc(node.id)}" title="快捷提问">💬</button>
-          <button class="node-action-btn" data-action="add-diary" data-id="${esc(node.id)}" title="记录日记">📝</button>
-          <button class="node-action-btn add-child" data-action="add-child" data-id="${esc(node.id)}" title="添加子任务">+</button>
-          <button class="node-action-btn" data-action="edit" data-id="${esc(node.id)}" title="编辑">✎</button>
-          <button class="node-action-btn delete" data-action="delete" data-id="${esc(node.id)}" title="删除">✕</button>
-        </div>
+        ${readonly ? '' : `
+          <div class="node-actions">
+            <button class="node-action-btn chat" data-action="quick-chat" data-id="${esc(node.id)}" title="快捷提问">💬</button>
+            <button class="node-action-btn" data-action="add-diary" data-id="${esc(node.id)}" title="记录日记">📝</button>
+            <button class="node-action-btn add-child" data-action="add-child" data-id="${esc(node.id)}" title="添加子任务">+</button>
+            <button class="node-action-btn" data-action="edit" data-id="${esc(node.id)}" title="编辑">✎</button>
+            <button class="node-action-btn delete" data-action="delete" data-id="${esc(node.id)}" title="删除">✕</button>
+          </div>
+        `}
       </div>
       ${isExpanded ? `
         ${previewHtml ? `<div class="tree-node-preview-wrapper">${previewHtml}</div>` : ''}
         <div class="tree-parent-children">
-          ${branchChildren.map((child) => renderTreeNode(child, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee, entityRowsByNodeId, elementPreviewMode)).join('')}
+          ${branchChildren.map((child) => renderTreeNode(child, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee, entityRowsByNodeId, elementPreviewMode, readonly, selectedId)).join('')}
           ${leafChildren.length ? `
             <div class="tree-leaf-container">
               <div class="tree-leaf-grid">
@@ -239,18 +245,19 @@ function renderTreeNode(node, byParent, expandedIdSet, entitySummaryByNodeId, sh
                   const childSummary = entitySummaryByNodeId?.[child.id] || { issue: 0, knowledge: 0, capability: 0 };
                   const childPreviewHtml = renderEntityPreviewBoxes(child.id, entityRowsByNodeId, elementPreviewMode);
                   return `
-                    <div class="tree-leaf-node" data-id="${esc(child.id)}" data-select-id="${esc(child.id)}" tabindex="0">
-                      <span class="node-status ${esc(child.status)}"></span>
+                    <div class="tree-leaf-node ${String(selectedId || '') === String(child.id || '') ? 'is-selected' : ''}" data-id="${esc(child.id)}" data-select-id="${esc(child.id)}" tabindex="0">
                       <span class="node-name ${shortName ? 'short-name' : ''}" data-select-id="${esc(child.id)}">${esc(child.name)}</span>
                       ${renderEntityBadges(childSummary)}
                       ${childPreviewHtml}
-                      <div class="node-actions">
-                        <button class="node-action-btn chat" data-action="quick-chat" data-id="${esc(child.id)}" title="快捷提问">💬</button>
-                        <button class="node-action-btn" data-action="add-diary" data-id="${esc(child.id)}" title="记录日记">📝</button>
-                        <button class="node-action-btn add-child" data-action="add-child" data-id="${esc(child.id)}" title="添加子任务">+</button>
-                        <button class="node-action-btn" data-action="edit" data-id="${esc(child.id)}" title="编辑">✎</button>
-                        <button class="node-action-btn delete" data-action="delete" data-id="${esc(child.id)}" title="删除">✕</button>
-                      </div>
+                      ${readonly ? '' : `
+                        <div class="node-actions">
+                          <button class="node-action-btn chat" data-action="quick-chat" data-id="${esc(child.id)}" title="快捷提问">💬</button>
+                          <button class="node-action-btn" data-action="add-diary" data-id="${esc(child.id)}" title="记录日记">📝</button>
+                          <button class="node-action-btn add-child" data-action="add-child" data-id="${esc(child.id)}" title="添加子任务">+</button>
+                          <button class="node-action-btn" data-action="edit" data-id="${esc(child.id)}" title="编辑">✎</button>
+                          <button class="node-action-btn delete" data-action="delete" data-id="${esc(child.id)}" title="删除">✕</button>
+                        </div>
+                      `}
                     </div>
                   `;
                 }).join('')}
@@ -306,19 +313,22 @@ function applyAdaptiveRootMixedGridLayout(container) {
   });
 }
 
-function renderDenseLaneNode(node, byParent, expandedIdSet, entitySummaryByNodeId, depth = 0, showAssignee = false, entityRowsByNodeId = {}, elementPreviewMode = 'none') {
+function renderDenseLaneNode(node, byParent, expandedIdSet, entitySummaryByNodeId, depth = 0, showAssignee = false, entityRowsByNodeId = {}, elementPreviewMode = 'none', readonly = false, selectedId = '') {
   const children = byParent.get(node.id) || [];
   const hasChildren = children.length > 0;
   const isExpanded = expandedIdSet.has(node.id);
   const nodeSummary = entitySummaryByNodeId?.[node.id] || { issue: 0, knowledge: 0, capability: 0 };
   const useStackSummary = depth >= 3;
+  const summaryBadgeHtml = renderEntityBadges(nodeSummary);
+  const summaryAssigneeHtml = showAssignee && node.assignee ? `<span class="node-meta">@${esc(node.assignee)}</span>` : '';
   const previewHtml = renderEntityPreviewBoxes(node.id, entityRowsByNodeId, elementPreviewMode);
   const childrenHtml = hasChildren && isExpanded
-    ? `<div class="lane-tree-children">${children.map((child) => renderDenseLaneNode(child, byParent, expandedIdSet, entitySummaryByNodeId, depth + 1, showAssignee, entityRowsByNodeId, elementPreviewMode)).join('')}</div>`
+    ? `<div class="lane-tree-children">${children.map((child) => renderDenseLaneNode(child, byParent, expandedIdSet, entitySummaryByNodeId, depth + 1, showAssignee, entityRowsByNodeId, elementPreviewMode, readonly, selectedId)).join('')}</div>`
     : '';
+  const isSelected = String(selectedId || '') === String(node.id || '');
   return `
     <div class="lane-tree-node" data-depth="${depth}">
-      <div class="lane-tree-node-row" data-select-id="${esc(node.id)}" data-node-id="${esc(node.id)}" tabindex="0" draggable="true">
+      <div class="lane-tree-node-row ${isSelected ? 'is-selected' : ''}" data-select-id="${esc(node.id)}" data-node-id="${esc(node.id)}" tabindex="0" draggable="${readonly ? 'false' : 'true'}">
         ${hasChildren ? `
           <button
             class="node-expand-btn dense-expand-btn ${isExpanded ? 'expanded' : ''}"
@@ -335,22 +345,24 @@ function renderDenseLaneNode(node, byParent, expandedIdSet, entitySummaryByNodeI
         <div class="lane-tree-node-main ${useStackSummary ? 'stack-summary' : ''}">
           <div class="lane-tree-title-line">
             <span class="dense-node-name">${esc(node.name)}</span>
-            ${!useStackSummary ? renderEntityBadges(nodeSummary) : ''}
-            ${!useStackSummary && showAssignee && node.assignee ? `<span class="node-meta">@${esc(node.assignee)}</span>` : ''}
+            ${!useStackSummary ? summaryBadgeHtml : ''}
+            ${!useStackSummary ? summaryAssigneeHtml : ''}
           </div>
-          ${useStackSummary ? `
+          ${useStackSummary && (summaryBadgeHtml || summaryAssigneeHtml) ? `
             <div class="lane-tree-summary-line">
-              ${renderEntityBadges(nodeSummary)}
-              ${showAssignee && node.assignee ? `<span class="node-meta">@${esc(node.assignee)}</span>` : ''}
+              ${summaryBadgeHtml}
+              ${summaryAssigneeHtml}
             </div>
           ` : ''}
         </div>
-        <div class="node-actions">
-          <button class="node-action-btn chat" data-action="quick-chat" data-id="${esc(node.id)}" title="快捷提问">💬</button>
-          <button class="node-action-btn add-child" data-action="add-child" data-id="${esc(node.id)}" title="添加子任务">+</button>
-          <button class="node-action-btn" data-action="edit" data-id="${esc(node.id)}" title="编辑">✎</button>
-          <button class="node-action-btn delete" data-action="delete" data-id="${esc(node.id)}" title="删除">✕</button>
-        </div>
+        ${readonly ? '' : `
+          <div class="node-actions">
+            <button class="node-action-btn chat" data-action="quick-chat" data-id="${esc(node.id)}" title="快捷提问">💬</button>
+            <button class="node-action-btn add-child" data-action="add-child" data-id="${esc(node.id)}" title="添加子任务">+</button>
+            <button class="node-action-btn" data-action="edit" data-id="${esc(node.id)}" title="编辑">✎</button>
+            <button class="node-action-btn delete" data-action="delete" data-id="${esc(node.id)}" title="删除">✕</button>
+          </div>
+        `}
       </div>
       ${previewHtml ? `<div class="lane-node-preview-wrapper">${previewHtml}</div>` : ''}
       ${childrenHtml}
@@ -392,7 +404,7 @@ function getDenseLaneWidthPx(root, byParent, showAssignee = false) {
   return Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, preferred));
 }
 
-function renderDenseTree(roots, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee = false, entityRowsByNodeId = {}, elementPreviewMode = 'none') {
+function renderDenseTree(roots, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee = false, entityRowsByNodeId = {}, elementPreviewMode = 'none', readonly = false, selectedId = '') {
   return `
     <div class="dense-tree dense-horizontal dense-lane-board">
       ${roots.map((root) => {
@@ -400,9 +412,9 @@ function renderDenseTree(roots, byParent, expandedIdSet, entitySummaryByNodeId,
         const laneNameMax = Math.max(120, laneWidth - 86);
         return `
         <section class="dense-lane" data-root-id="${esc(root.id)}" style="--lane-width:${laneWidth}px;--lane-name-max:${laneNameMax}px;">
-          <div class="dense-lane-drag-handle" data-lane-drag-id="${esc(root.id)}" draggable="true" title="拖拽调整泳道顺序">⋮⋮</div>
+          ${readonly ? '' : `<div class="dense-lane-drag-handle" data-lane-drag-id="${esc(root.id)}" draggable="true" title="拖拽调整泳道顺序">⋮⋮</div>`}
           <div class="dense-lane-body">
-            ${renderDenseLaneNode(root, byParent, expandedIdSet, entitySummaryByNodeId, 0, showAssignee, entityRowsByNodeId, elementPreviewMode)}
+            ${renderDenseLaneNode(root, byParent, expandedIdSet, entitySummaryByNodeId, 0, showAssignee, entityRowsByNodeId, elementPreviewMode, readonly, selectedId)}
           </div>
         </section>
       `;
@@ -433,6 +445,8 @@ export function mountWorkTree(targetId, options) {
     elementPreviewMode = 'none',
     renderMode = 'card',
     showAssignee = false,
+    readonly = false,
+    selectedId = '',
   } = options || {};
 
   const byParent = new Map();
@@ -476,13 +490,13 @@ export function mountWorkTree(targetId, options) {
     return;
   }
   if (renderMode === 'dense') {
-    container.innerHTML = renderDenseTree(roots, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee, entityRowsByNodeId, elementPreviewMode);
+    container.innerHTML = renderDenseTree(roots, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee, entityRowsByNodeId, elementPreviewMode, readonly, selectedId);
   } else {
   const htmlParts = roots.map((root) => {
     const hasChildren = ((byParent.get(root.id) || []).length > 0);
     return `
       <div class="root-grid-item ${hasChildren ? 'branch' : 'leaf'}" data-root-item-type="${hasChildren ? 'branch' : 'leaf'}">
-        ${renderTreeNode(root, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee, entityRowsByNodeId, elementPreviewMode)}
+        ${renderTreeNode(root, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee, entityRowsByNodeId, elementPreviewMode, readonly, selectedId)}
       </div>
     `;
   });

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@qnote/q-ai-note",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "type": "module",
   "description": "AI-assisted personal work sandbox and diary system",
   "main": "dist/server/index.js",
   "bin": {
     "q-ai-note": "dist/cli.js",
-    "q-ai-note-server": "dist/cli-server.js"
+    "q-ai-note-server": "dist/cli.js"
   },
   "files": [
     "dist/**/*",