@qnote/q-ai-note 1.0.18 → 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,
@@ -1645,6 +1646,40 @@ 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');
@@ -1652,8 +1687,11 @@ function renderDrawerWorkItemQuickEdit(nodeId) {
   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');
-  if (!nameInput || !assigneeInput || !statusInput || !priorityInput || !descriptionInput || !saveBtn) return;
+  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 = '';
@@ -1664,16 +1702,89 @@ function renderDrawerWorkItemQuickEdit(nodeId) {
     [nameInput, assigneeInput, statusInput, priorityInput, descriptionInput, saveBtn].forEach((el) => {
       el.disabled = true;
     });
+    saveBtn.dataset.original = '';
+    dirtyHint.textContent = '无修改';
+    dirtyHint.classList.remove('dirty');
     return;
   }
-  nameInput.value = String(row.name || '');
-  assigneeInput.value = String(row.assignee || '');
-  statusInput.value = String(row.status || 'pending');
-  priorityInput.value = String(row.priority || 'medium');
-  descriptionInput.value = String(row.description || '');
+  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 }) {
@@ -1797,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');
@@ -2123,6 +2260,7 @@ 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;
@@ -3947,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();
@@ -3954,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();
@@ -4075,8 +4232,31 @@ async function initApp() {
       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

@@ -152,25 +152,34 @@
             </div>
             <section class="drawer-section">
               <div class="drawer-section-title">工作项快速编辑</div>
-              <div class="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 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>
-                <textarea id="drawer-work-item-description" rows="3" placeholder="描述（可选）"></textarea>
-                <div class="drawer-work-item-quick-edit-actions">
-                  <button class="btn btn-primary btn-sm" id="save-drawer-work-item-btn" type="button">保存工作项</button>
+                <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>

package/dist/web/styles.css

@@ -3670,6 +3670,62 @@ 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;
@@ -3679,6 +3735,10 @@ dialog::backdrop {
   border-radius: 10px;
 }
 
+.drawer-work-item-quick-edit.hidden {
+  display: none;
+}
+
 .drawer-work-item-quick-edit-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -3698,7 +3758,23 @@ dialog::backdrop {
 
 .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 {

package/package.json

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