@qnote/q-ai-note 1.0.2 → 1.0.4

package/dist/web/vueRenderers.js

@@ -83,18 +83,46 @@ export function mountDiaryTimeline(targetId, options) {
   });
 }
 
-function renderTreeNode(node, byParent, expandedIdSet) {
+function renderEntityBadges(summary) {
+  const issue = Number(summary?.issue || 0);
+  const knowledge = Number(summary?.knowledge || 0);
+  const capability = Number(summary?.capability || 0);
+  const issueOpen = Number(summary?.issue_open || 0);
+  const issueClosed = Number(summary?.issue_closed || 0);
+  const isBlindSpot = issue + knowledge + capability === 0;
+  const issueStateClass = issue === 0
+    ? 'issue-none'
+    : issueOpen > 0
+      ? 'issue-open'
+      : issueClosed > 0
+        ? 'issue-closed'
+        : 'issue-none';
+  return `
+    <span
+      class="node-entity-mini-badges ${isBlindSpot ? 'blind-spot' : ''} ${issueStateClass}"
+      title="节点摘要：${issue}/${knowledge}/${capability}（Issue/Knowledge/Capability）"
+    >
+      <span class="node-entity-mini-badge ${issue > 0 || knowledge > 0 || capability > 0 ? 'active' : ''}">${issue}/${knowledge}/${capability}</span>
+    </span>
+  `;
+}
+
+function renderTreeNode(node, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee = false) {
   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 };
 
   if (!hasChildren) {
     return `
-      <div class="tree-leaf-node" data-id="${esc(node.id)}" tabindex="0">
+      <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>
-        <span class="node-name ${isShort ? 'short-name' : ''}">${esc(node.name)}</span>
+        <span class="node-name ${isShort ? 'short-name' : ''}" data-select-id="${esc(node.id)}">${esc(node.name)}</span>
+        ${renderEntityBadges(nodeSummary)}
         <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>
@@ -106,15 +134,24 @@ function renderTreeNode(node, byParent, expandedIdSet) {
   const leafChildren = children.filter((child) => ((byParent.get(child.id) || []).length === 0));
 
   return `
-    <div class="tree-parent-card">
-      <div class="tree-parent-header" data-action="toggle" data-id="${esc(node.id)}" tabindex="0">
-        <span class="node-expand ${isExpanded ? 'expanded' : ''}">
+    <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'}">
+        <button
+          class="node-expand-btn ${isExpanded ? 'expanded' : ''}"
+          data-action="toggle"
+          data-id="${esc(node.id)}"
+          aria-label="${isExpanded ? '折叠节点' : '展开节点'}"
+          aria-expanded="${isExpanded ? 'true' : 'false'}"
+          type="button"
+        >
           <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>
-        </span>
+        </button>
         <span class="node-status ${esc(node.status)}"></span>
         <span class="node-name">${esc(node.name)}</span>
-        ${node.assignee ? `<span class="node-meta">@${esc(node.assignee)}</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 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>
@@ -122,17 +159,21 @@ function renderTreeNode(node, byParent, expandedIdSet) {
       </div>
       ${isExpanded ? `
         <div class="tree-parent-children">
-          ${branchChildren.map((child) => renderTreeNode(child, byParent, expandedIdSet)).join('')}
+          ${branchChildren.map((child) => renderTreeNode(child, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee)).join('')}
           ${leafChildren.length ? `
             <div class="tree-leaf-container">
               <div class="tree-leaf-grid">
                 ${leafChildren.map((child) => {
                   const shortName = String(child.name || '').trim().length <= 10;
+                  const childSummary = entitySummaryByNodeId?.[child.id] || { issue: 0, knowledge: 0, capability: 0 };
                   return `
-                    <div class="tree-leaf-node" data-id="${esc(child.id)}" tabindex="0">
+                    <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>
-                      <span class="node-name ${shortName ? 'short-name' : ''}">${esc(child.name)}</span>
+                      <span class="node-name ${shortName ? 'short-name' : ''}" data-select-id="${esc(child.id)}">${esc(child.name)}</span>
+                      ${renderEntityBadges(childSummary)}
                       <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 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>
@@ -148,6 +189,151 @@ function renderTreeNode(node, byParent, expandedIdSet) {
   `;
 }
 
+function applyAdaptiveLeafGridLayout(container) {
+  const MIN_WIDTH = 180;
+  const MAX_WIDTH = 320;
+  const GAP = 8;
+  const grids = container.querySelectorAll('.tree-leaf-grid, .tree-root-leaf-grid');
+  grids.forEach((grid) => {
+    const cards = grid.querySelectorAll(':scope > .tree-leaf-node');
+    const count = cards.length;
+    if (!count) return;
+    const availableWidth = Math.max(0, grid.clientWidth);
+    if (!availableWidth) return;
+    const maxColsByWidth = Math.max(1, Math.floor((availableWidth + GAP) / (MIN_WIDTH + GAP)));
+    const cols = Math.max(1, Math.min(count, maxColsByWidth));
+    const rawWidth = Math.floor((availableWidth - GAP * (cols - 1)) / cols);
+    const cardWidth = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, rawWidth));
+    grid.style.gridTemplateColumns = `repeat(${cols}, minmax(${cardWidth}px, 1fr))`;
+  });
+}
+
+function applyAdaptiveRootMixedGridLayout(container) {
+  const MIN_COLUMN_WIDTH = 240;
+  const GAP = 10;
+  const grids = container.querySelectorAll('.tree-root-mixed-grid');
+  grids.forEach((grid) => {
+    const cards = grid.querySelectorAll(':scope > .root-grid-item');
+    const count = cards.length;
+    if (!count) return;
+    const availableWidth = Math.max(0, grid.clientWidth);
+    if (!availableWidth) return;
+    const cols = Math.max(1, Math.floor((availableWidth + GAP) / (MIN_COLUMN_WIDTH + GAP)));
+    grid.style.gridTemplateColumns = `repeat(${cols}, minmax(0, 1fr))`;
+    cards.forEach((card) => {
+      const type = card.getAttribute('data-root-item-type');
+      if (type === 'branch') {
+        const span = Math.min(2, cols);
+        card.style.gridColumn = `span ${span}`;
+      } else {
+        card.style.gridColumn = 'span 1';
+      }
+    });
+  });
+}
+
+function renderDenseLaneNode(node, byParent, expandedIdSet, entitySummaryByNodeId, depth = 0, showAssignee = false) {
+  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 childrenHtml = hasChildren && isExpanded
+    ? `<div class="lane-tree-children">${children.map((child) => renderDenseLaneNode(child, byParent, expandedIdSet, entitySummaryByNodeId, depth + 1, showAssignee)).join('')}</div>`
+    : '';
+  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">
+        ${hasChildren ? `
+          <button
+            class="node-expand-btn dense-expand-btn ${isExpanded ? 'expanded' : ''}"
+            data-action="toggle"
+            data-id="${esc(node.id)}"
+            aria-label="${isExpanded ? '折叠节点' : '展开节点'}"
+            aria-expanded="${isExpanded ? 'true' : 'false'}"
+            type="button"
+          >
+            <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>
+        <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>` : ''}
+          </div>
+          ${useStackSummary ? `
+            <div class="lane-tree-summary-line">
+              ${renderEntityBadges(nodeSummary)}
+              ${showAssignee && node.assignee ? `<span class="node-meta">@${esc(node.assignee)}</span>` : ''}
+            </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>
+      </div>
+      ${childrenHtml}
+    </div>
+  `;
+}
+
+function collectDenseLaneMetrics(root, byParent, depth = 0) {
+  const stack = [{ node: root, depth }];
+  let maxDepth = depth;
+  let maxNameLength = String(root?.name || '').trim().length;
+  let maxAssigneeLength = String(root?.assignee || '').trim().length;
+  let totalNodes = 0;
+  while (stack.length) {
+    const current = stack.pop();
+    if (!current?.node) continue;
+    totalNodes += 1;
+    maxDepth = Math.max(maxDepth, current.depth);
+    maxNameLength = Math.max(maxNameLength, String(current.node.name || '').trim().length);
+    maxAssigneeLength = Math.max(maxAssigneeLength, String(current.node.assignee || '').trim().length);
+    const children = byParent.get(current.node.id) || [];
+    for (const child of children) {
+      stack.push({ node: child, depth: current.depth + 1 });
+    }
+  }
+  return { maxDepth, maxNameLength, maxAssigneeLength, totalNodes };
+}
+
+function getDenseLaneWidthPx(root, byParent, showAssignee = false) {
+  const MIN_WIDTH = 190;
+  const MAX_WIDTH = 420;
+  const { maxDepth, maxNameLength, maxAssigneeLength, totalNodes } = collectDenseLaneMetrics(root, byParent, 0);
+  const base = 150;
+  const nameFactor = Math.min(maxNameLength, 28) * 6;
+  const depthFactor = Math.min(maxDepth, 8) * 8;
+  const assigneeFactor = showAssignee ? Math.min(maxAssigneeLength, 18) * 5 : 0;
+  const densityFactor = Math.min(totalNodes, 20) * 2;
+  const preferred = base + nameFactor + depthFactor + assigneeFactor + densityFactor;
+  return Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, preferred));
+}
+
+function renderDenseTree(roots, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee = false) {
+  return `
+    <div class="dense-tree dense-horizontal dense-lane-board">
+      ${roots.map((root) => {
+        const laneWidth = getDenseLaneWidthPx(root, byParent, showAssignee);
+        const laneNameMax = Math.max(120, laneWidth - 86);
+        return `
+        <section class="dense-lane" style="--lane-width:${laneWidth}px;--lane-name-max:${laneNameMax}px;">
+          <div class="dense-lane-body">
+            ${renderDenseLaneNode(root, byParent, expandedIdSet, entitySummaryByNodeId, 0, showAssignee)}
+          </div>
+        </section>
+      `;
+      }).join('')}
+    </div>
+  `;
+}
+
 export function mountWorkTree(targetId, options) {
   const container = byId(targetId);
   if (!container) return;
@@ -158,6 +344,11 @@ export function mountWorkTree(targetId, options) {
     onAddChild,
     onEdit,
     onDelete,
+    onQuickChat,
+    onSelect,
+    entitySummaryByNodeId = {},
+    renderMode = 'card',
+    showAssignee = false,
   } = options || {};
 
   const byParent = new Map();
@@ -173,8 +364,19 @@ export function mountWorkTree(targetId, options) {
     container.innerHTML = '<div class="empty-state"><p>当前筛选条件下没有任务</p></div>';
     return;
   }
-
-  container.innerHTML = roots.map((root) => renderTreeNode(root, byParent, expandedIdSet)).join('');
+  if (renderMode === 'dense') {
+    container.innerHTML = renderDenseTree(roots, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee);
+  } 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)}
+      </div>
+    `;
+  });
+  container.innerHTML = `<div class="tree-root-mixed-grid">${htmlParts.join('')}</div>`;
+  }
 
   container.querySelectorAll('[data-action]').forEach((el) => {
     el.addEventListener('click', (e) => {
@@ -186,6 +388,19 @@ export function mountWorkTree(targetId, options) {
       if (action === 'add-child') onAddChild?.(id);
       if (action === 'edit') onEdit?.(id);
       if (action === 'delete') onDelete?.(id);
+      if (action === 'quick-chat') onQuickChat?.(id, el);
     });
   });
+  container.querySelectorAll('[data-select-id]').forEach((el) => {
+    el.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const id = el.getAttribute('data-select-id');
+      if (!id) return;
+      onSelect?.(id);
+    });
+  });
+  if (renderMode !== 'dense') {
+    applyAdaptiveLeafGridLayout(container);
+    applyAdaptiveRootMixedGridLayout(container);
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qnote/q-ai-note",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "type": "module",
   "description": "AI-assisted personal work sandbox and diary system",
   "main": "dist/server/index.js",