@qnote/q-ai-note 1.0.17 → 1.0.19

package/dist/web/app.js

@@ -32,6 +32,7 @@ const state = {
   nodeEntityFilter: 'all',
   editingNodeEntityId: null,
   nodeEntityFormExpanded: false,
+  drawerWorkItemEditMode: false,
   sandboxChatVisible: false,
   sandboxChatVisibleBeforeFullscreen: false,
   sandboxFullscreenMode: false,
@@ -804,6 +805,9 @@ function applyReadonlyMode() {
     closeQuickChatPopover();
   }
   applySandboxChatVisibility();
+  if (state.selectedNodeId) {
+    renderDrawerWorkItemQuickEdit(state.selectedNodeId);
+  }
   if (aserRuntimeView) {
     aserRuntimeView.setAccessContext({
       readonly: state.readonly,
@@ -1642,6 +1646,147 @@ function renderQuickDiaryTargetLabel() {
   el.textContent = `快速日记：${state.currentSandbox.name} / ${getWorkItemNameById(nodeId)}`;
 }
 
+function setDrawerWorkItemQuickEditMode(editing) {
+  state.drawerWorkItemEditMode = Boolean(editing);
+  const readPanel = document.getElementById('drawer-work-item-quick-read');
+  const editPanel = document.getElementById('drawer-work-item-quick-edit');
+  readPanel?.classList.toggle('hidden', state.drawerWorkItemEditMode);
+  editPanel?.classList.toggle('hidden', !state.drawerWorkItemEditMode);
+}
+
+function renderDrawerWorkItemQuickRead(row) {
+  const titleEl = document.getElementById('drawer-work-item-read-title');
+  const metaEl = document.getElementById('drawer-work-item-read-meta');
+  const descriptionEl = document.getElementById('drawer-work-item-read-description');
+  if (!(titleEl instanceof HTMLElement) || !(metaEl instanceof HTMLElement) || !(descriptionEl instanceof HTMLElement)) return;
+  if (!row) {
+    titleEl.textContent = '-';
+    metaEl.innerHTML = '';
+    descriptionEl.innerHTML = '';
+    return;
+  }
+  titleEl.textContent = String(row.name || '-');
+  const assignee = String(row.assignee || '').trim() || '-';
+  const status = String(row.status || 'pending').trim() || 'pending';
+  const priority = String(row.priority || 'medium').trim() || 'medium';
+  metaEl.innerHTML = [
+    `<span class="drawer-work-item-read-meta-item">负责人: ${safeText(assignee)}</span>`,
+    `<span class="drawer-work-item-read-meta-item">状态: ${safeText(status)}</span>`,
+    `<span class="drawer-work-item-read-meta-item">优先级: ${safeText(priority)}</span>`,
+  ].join('');
+  const description = String(row.description || '').trim();
+  descriptionEl.innerHTML = description
+    ? renderMarkdownSnippet(description)
+    : '<div class="empty-state"><p>暂无描述（双击进入编辑）</p></div>';
+}
+
+function renderDrawerWorkItemQuickEdit(nodeId) {
+  const nameInput = document.getElementById('drawer-work-item-name');
+  const assigneeInput = document.getElementById('drawer-work-item-assignee');
+  const statusInput = document.getElementById('drawer-work-item-status');
+  const priorityInput = document.getElementById('drawer-work-item-priority');
+  const descriptionInput = document.getElementById('drawer-work-item-description');
+  const saveBtn = document.getElementById('save-drawer-work-item-btn');
+  const dirtyHint = document.getElementById('drawer-work-item-dirty-hint');
+  if (!nameInput || !assigneeInput || !statusInput || !priorityInput || !descriptionInput || !saveBtn || !dirtyHint) return;
+  const row = getNodeById(nodeId);
+  renderDrawerWorkItemQuickRead(row);
+  setDrawerWorkItemQuickEditMode(state.drawerWorkItemEditMode);
+  const canEdit = !state.readonly && state.currentSandboxWritable;
+  if (!row) {
+    nameInput.value = '';
+    assigneeInput.value = '';
+    statusInput.value = 'pending';
+    priorityInput.value = 'medium';
+    descriptionInput.value = '';
+    [nameInput, assigneeInput, statusInput, priorityInput, descriptionInput, saveBtn].forEach((el) => {
+      el.disabled = true;
+    });
+    saveBtn.dataset.original = '';
+    dirtyHint.textContent = '无修改';
+    dirtyHint.classList.remove('dirty');
+    return;
+  }
+  const baseline = {
+    name: String(row.name || '').trim(),
+    assignee: String(row.assignee || '').trim(),
+    status: String(row.status || 'pending').trim() || 'pending',
+    priority: String(row.priority || 'medium').trim() || 'medium',
+    description: String(row.description || '').trim(),
+  };
+  nameInput.value = baseline.name;
+  assigneeInput.value = baseline.assignee;
+  statusInput.value = baseline.status;
+  priorityInput.value = baseline.priority;
+  descriptionInput.value = baseline.description;
+  saveBtn.dataset.original = JSON.stringify(baseline);
+  [nameInput, assigneeInput, statusInput, priorityInput, descriptionInput, saveBtn].forEach((el) => {
+    el.disabled = !canEdit;
+  });
+  if (canEdit) {
+    saveBtn.disabled = true;
+    dirtyHint.textContent = '无修改';
+    dirtyHint.classList.remove('dirty');
+  } else {
+    dirtyHint.textContent = '只读模式';
+    dirtyHint.classList.remove('dirty');
+    setDrawerWorkItemQuickEditMode(false);
+  }
+}
+
+function refreshDrawerWorkItemSaveButtonState() {
+  const nameInput = document.getElementById('drawer-work-item-name');
+  const assigneeInput = document.getElementById('drawer-work-item-assignee');
+  const statusInput = document.getElementById('drawer-work-item-status');
+  const priorityInput = document.getElementById('drawer-work-item-priority');
+  const descriptionInput = document.getElementById('drawer-work-item-description');
+  const saveBtn = document.getElementById('save-drawer-work-item-btn');
+  const dirtyHint = document.getElementById('drawer-work-item-dirty-hint');
+  if (!nameInput || !assigneeInput || !statusInput || !priorityInput || !descriptionInput || !saveBtn || !dirtyHint) return;
+  if (state.readonly || !state.currentSandboxWritable || !state.selectedNodeId) {
+    saveBtn.disabled = true;
+    dirtyHint.textContent = '只读模式';
+    dirtyHint.classList.remove('dirty');
+    return;
+  }
+  const originalRaw = String(saveBtn.dataset.original || '').trim();
+  if (!originalRaw) {
+    saveBtn.disabled = true;
+    dirtyHint.textContent = '无修改';
+    dirtyHint.classList.remove('dirty');
+    return;
+  }
+  let original = null;
+  try {
+    original = JSON.parse(originalRaw);
+  } catch {
+    original = null;
+  }
+  if (!original || typeof original !== 'object') {
+    saveBtn.disabled = true;
+    dirtyHint.textContent = '无修改';
+    dirtyHint.classList.remove('dirty');
+    return;
+  }
+  const current = {
+    name: String(nameInput.value || '').trim(),
+    assignee: String(assigneeInput.value || '').trim(),
+    status: String(statusInput.value || 'pending').trim() || 'pending',
+    priority: String(priorityInput.value || 'medium').trim() || 'medium',
+    description: String(descriptionInput.value || '').trim(),
+  };
+  if (!current.name) {
+    saveBtn.disabled = true;
+    dirtyHint.textContent = '名称不能为空';
+    dirtyHint.classList.add('dirty');
+    return;
+  }
+  const hasChanged = JSON.stringify(current) !== JSON.stringify(original);
+  saveBtn.disabled = !hasChanged;
+  dirtyHint.textContent = hasChanged ? '有未保存修改' : '无修改';
+  dirtyHint.classList.toggle('dirty', hasChanged);
+}
+
 async function saveDiaryEntry({ content, sandboxId = null, workItemId = null }) {
   const payload = {
     sandbox_id: sandboxId,
@@ -1763,9 +1908,35 @@ function closeNodeEntityDrawer() {
   state.nodeEntityFilter = 'all';
   state.editingNodeEntityId = null;
   state.nodeEntityFormExpanded = false;
+  state.drawerWorkItemEditMode = false;
   renderWorkTree();
 }
 
+function getVisibleTreeSelectNodeIds() {
+  const tree = document.getElementById('work-tree');
+  if (!(tree instanceof HTMLElement)) return [];
+  const seen = new Set();
+  const ids = [];
+  tree.querySelectorAll('[data-select-id]').forEach((el) => {
+    if (!(el instanceof HTMLElement)) return;
+    if (el.offsetParent === null) return;
+    const id = String(el.getAttribute('data-select-id') || '').trim();
+    if (!id || seen.has(id)) return;
+    seen.add(id);
+    ids.push(id);
+  });
+  return ids;
+}
+
+function isTypingElement(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  if (target.isContentEditable) return true;
+  if (target instanceof HTMLInputElement) return true;
+  if (target instanceof HTMLTextAreaElement) return true;
+  if (target instanceof HTMLSelectElement) return true;
+  return false;
+}
+
 function setNodeEntityFormExpanded(expanded) {
   state.nodeEntityFormExpanded = expanded;
   const form = document.getElementById('drawer-create-form');
@@ -2089,9 +2260,11 @@ function showNodeEntityDrawer(nodeId, preferredFilter = 'all') {
   const node = getNodeById(nodeId);
   if (!drawer || !title || !node) return;
   state.selectedNodeId = nodeId;
+  state.drawerWorkItemEditMode = false;
   const filter = ['all', 'todo', 'issue', 'knowledge', 'capability', 'diary'].includes(preferredFilter) ? preferredFilter : 'all';
   state.nodeEntityFilter = filter;
   title.textContent = node.name || nodeId;
+  renderDrawerWorkItemQuickEdit(nodeId);
   renderNodeEntitySummary(nodeId);
   renderWorkTree();
   renderQuickDiaryTargetLabel();
@@ -3912,6 +4085,26 @@ async function initApp() {
   document.getElementById('entity-content-input')?.addEventListener('keydown', entitySubmitByShortcut);
 
   document.addEventListener('keydown', (event) => {
+    const drawer = document.getElementById('node-entity-drawer');
+    const isDrawerOpen = Boolean(drawer && !drawer.classList.contains('hidden'));
+    const isArrowKey = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key);
+    if (isDrawerOpen && isArrowKey && !event.metaKey && !event.ctrlKey && !event.altKey && !isTypingElement(event.target)) {
+      const ids = getVisibleTreeSelectNodeIds();
+      if (ids.length > 0) {
+        const currentId = String(state.selectedNodeId || '');
+        const currentIdx = ids.indexOf(currentId);
+        const baseIdx = currentIdx >= 0 ? currentIdx : 0;
+        const offset = (event.key === 'ArrowUp' || event.key === 'ArrowLeft') ? -1 : 1;
+        const nextIdx = Math.max(0, Math.min(ids.length - 1, baseIdx + offset));
+        const nextId = ids[nextIdx];
+        if (nextId && nextId !== currentId) {
+          event.preventDefault();
+          event.stopPropagation();
+          showNodeEntityDrawer(nextId, state.nodeEntityFilter || 'all');
+          return;
+        }
+      }
+    }
     if (event.key !== 'Escape') return;
     if (quickChatPopover) {
       event.preventDefault();
@@ -3919,8 +4112,7 @@ async function initApp() {
       closeQuickChatPopover();
       return;
     }
-    const drawer = document.getElementById('node-entity-drawer');
-    if (drawer && !drawer.classList.contains('hidden')) {
+    if (isDrawerOpen) {
       event.preventDefault();
       event.stopPropagation();
       closeNodeEntityDrawer();
@@ -4004,6 +4196,67 @@ async function initApp() {
       setButtonState(btn, { disabled: false, text: originalText || '保存' });
     }
   });
+
+  document.getElementById('save-drawer-work-item-btn')?.addEventListener('click', async () => {
+    if (state.readonly || !state.currentSandboxWritable) return;
+    if (!state.currentSandbox || !state.selectedNodeId) return;
+    const nodeId = String(state.selectedNodeId || '');
+    const current = getNodeById(nodeId);
+    if (!current) return;
+    const name = String(document.getElementById('drawer-work-item-name')?.value || '').trim();
+    if (!name) {
+      alert('请输入任务名称');
+      return;
+    }
+    const payload = {
+      name,
+      description: String(document.getElementById('drawer-work-item-description')?.value || '').trim(),
+      assignee: String(document.getElementById('drawer-work-item-assignee')?.value || '').trim(),
+      status: String(document.getElementById('drawer-work-item-status')?.value || 'pending'),
+      priority: String(document.getElementById('drawer-work-item-priority')?.value || 'medium'),
+      parent_id: current.parent_id || null,
+      extra_data: {
+        ...(current.extra_data || {}),
+      },
+    };
+    const saveBtn = document.getElementById('save-drawer-work-item-btn');
+    const originalText = saveBtn?.textContent || '保存工作项';
+    if (saveBtn) setButtonState(saveBtn, { disabled: true, text: '保存中...' });
+    try {
+      await apiRequest(`${API_BASE}/items/${nodeId}`, {
+        method: 'PUT',
+        body: JSON.stringify(payload),
+      });
+      const activeFilter = state.nodeEntityFilter || 'all';
+      await loadSandbox(state.currentSandbox.id);
+      showNodeEntityDrawer(nodeId, activeFilter);
+    } finally {
+      if (saveBtn) setButtonState(saveBtn, { disabled: false, text: originalText });
+      refreshDrawerWorkItemSaveButtonState();
+    }
+  });
+
+  const bindDrawerQuickEditDirtyState = (eventName) => {
+    ['drawer-work-item-name', 'drawer-work-item-assignee', 'drawer-work-item-status', 'drawer-work-item-priority', 'drawer-work-item-description']
+      .forEach((id) => {
+        document.getElementById(id)?.addEventListener(eventName, refreshDrawerWorkItemSaveButtonState);
+      });
+  };
+  bindDrawerQuickEditDirtyState('input');
+  bindDrawerQuickEditDirtyState('change');
+
+  document.getElementById('drawer-work-item-quick-read')?.addEventListener('dblclick', () => {
+    if (state.readonly || !state.currentSandboxWritable || !state.selectedNodeId) return;
+    setDrawerWorkItemQuickEditMode(true);
+    const nameInput = document.getElementById('drawer-work-item-name');
+    if (nameInput instanceof HTMLInputElement) nameInput.focus();
+  });
+
+  document.getElementById('cancel-drawer-work-item-edit-btn')?.addEventListener('click', () => {
+    if (!state.selectedNodeId) return;
+    state.drawerWorkItemEditMode = false;
+    renderDrawerWorkItemQuickEdit(state.selectedNodeId);
+  });
   
   document.getElementById('rollback-btn')?.addEventListener('click', async () => {
     if (state.readonly) return;

package/dist/web/index.html

@@ -150,6 +150,39 @@
                 <button class="btn btn-secondary btn-sm" id="close-node-drawer-btn">关闭</button>
               </div>
             </div>
+            <section class="drawer-section">
+              <div class="drawer-section-title">工作项快速编辑</div>
+              <div class="drawer-work-item-quick" id="drawer-work-item-quick">
+                <div class="drawer-work-item-quick-read" id="drawer-work-item-quick-read" title="双击进入编辑">
+                  <div class="drawer-work-item-read-title" id="drawer-work-item-read-title">-</div>
+                  <div class="drawer-work-item-read-meta" id="drawer-work-item-read-meta"></div>
+                  <div class="drawer-work-item-read-description diary-content" id="drawer-work-item-read-description"></div>
+                </div>
+                <div class="drawer-work-item-quick-edit hidden" id="drawer-work-item-quick-edit">
+                  <div class="drawer-work-item-quick-edit-grid">
+                    <input type="text" id="drawer-work-item-name" placeholder="工作项名称">
+                    <input type="text" id="drawer-work-item-assignee" placeholder="负责人（可选）">
+                    <select id="drawer-work-item-status">
+                      <option value="pending">待处理</option>
+                      <option value="in_progress">进行中</option>
+                      <option value="done">已完成</option>
+                      <option value="archived">已归档</option>
+                    </select>
+                    <select id="drawer-work-item-priority">
+                      <option value="low">低优先级</option>
+                      <option value="medium">中优先级</option>
+                      <option value="high">高优先级</option>
+                    </select>
+                  </div>
+                  <textarea id="drawer-work-item-description" rows="3" placeholder="描述（可选，支持 Markdown）"></textarea>
+                  <div class="drawer-work-item-quick-edit-actions">
+                    <span class="drawer-work-item-dirty-hint" id="drawer-work-item-dirty-hint">无修改</span>
+                    <button class="btn btn-secondary btn-sm" id="cancel-drawer-work-item-edit-btn" type="button">取消编辑</button>
+                    <button class="btn btn-primary btn-sm" id="save-drawer-work-item-btn" type="button">保存工作项</button>
+                  </div>
+                </div>
+              </div>
+            </section>
             <section class="drawer-section">
               <div class="drawer-section-title">节点概览</div>
               <div class="summary-strip compact" id="node-entity-summary"></div>

package/dist/web/styles.css

@@ -3670,6 +3670,113 @@ dialog::backdrop {
   margin-bottom: 8px;
 }
 
+.drawer-work-item-quick {
+  display: grid;
+  gap: 8px;
+}
+
+.drawer-work-item-quick-read {
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+  background: #fff;
+  border: 1px dashed var(--border);
+  border-radius: 10px;
+  cursor: default;
+}
+
+.drawer-work-item-quick-read:hover {
+  border-color: #c7dafc;
+  background: #f8fbff;
+}
+
+.drawer-work-item-read-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.drawer-work-item-read-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.drawer-work-item-read-meta-item {
+  font-size: 12px;
+  color: var(--text-secondary);
+  background: #f3f4f6;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 2px 8px;
+}
+
+.drawer-work-item-read-description {
+  font-size: 13px;
+  color: var(--text-primary);
+}
+
+.drawer-work-item-read-description .empty-state {
+  padding: 6px 0;
+  text-align: left;
+  color: var(--text-secondary);
+}
+
+.drawer-work-item-read-description .empty-state p {
+  margin: 0;
+}
+
+.drawer-work-item-quick-edit {
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+  background: #f8f9fb;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+}
+
+.drawer-work-item-quick-edit.hidden {
+  display: none;
+}
+
+.drawer-work-item-quick-edit-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.drawer-work-item-quick-edit input,
+.drawer-work-item-quick-edit select,
+.drawer-work-item-quick-edit textarea {
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px 10px;
+  font-size: 13px;
+  background: #fff;
+}
+
+.drawer-work-item-quick-edit-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.drawer-work-item-dirty-hint {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.drawer-work-item-dirty-hint.dirty {
+  color: #92400e;
+  font-weight: 600;
+  background: #fef3c7;
+  border: 1px solid #f59e0b;
+  border-radius: 999px;
+  padding: 2px 8px;
+}
+
 .drawer-create-form {
   display: grid;
   gap: 8px;

package/package.json

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