@qnote/q-ai-note 1.0.5 → 1.0.7

package/dist/web/index.html

@@ -21,7 +21,8 @@
         <li><a href="#/sandboxes" data-nav="sandboxes">沙盘</a></li>
         <li><a href="#/diaries" data-nav="diaries">日记</a></li>
         <li><a href="#/changes" data-nav="changes">变化</a></li>
-        <li><a href="#/settings" data-nav="settings">设置</a></li>
+        <li><a href="#/settings" data-nav="settings">项目设置</a></li>
+        <li><a href="#/system-settings" data-nav="system-settings">系统设置</a></li>
       </ul>
     </nav>
     <main class="content">
@@ -39,7 +40,10 @@
         <div class="action-strip">
           <button class="btn btn-secondary btn-sm" id="generate-insight-btn">智能总结</button>
           <button class="btn btn-secondary btn-sm" id="generate-report-btn">生成汇报</button>
-          <button class="btn btn-secondary btn-sm" id="toggle-sandbox-present-btn" type="button">展示态布局</button>
+          <button class="btn btn-secondary btn-sm ai-toggle-btn" id="toggle-sandbox-chat-btn" type="button">
+            <span class="icon" aria-hidden="true">🤖</span>
+            <span>显示 AI 助手</span>
+          </button>
           <button class="btn btn-secondary btn-sm" id="toggle-sandbox-fullscreen-btn" type="button">全屏</button>
         </div>
         <div class="insight-box hidden" id="sandbox-insight-output" hidden>
@@ -109,72 +113,83 @@
                 <div class="drawer-subtitle" id="drawer-node-title"></div>
               </div>
               <div class="drawer-header-actions">
-                <button class="btn btn-secondary btn-sm" id="toggle-node-entity-form-btn" type="button">+ 新建记录</button>
                 <button class="btn btn-secondary btn-sm" id="close-node-drawer-btn">关闭</button>
               </div>
             </div>
-            <div class="summary-strip compact" id="node-entity-summary"></div>
-            <div class="drawer-diary-quick-form">
-              <div class="sandbox-diary-quick-meta">
-                <span id="sandbox-diary-target-label">快速日记：未选中节点</span>
-              </div>
-              <textarea id="drawer-diary-content" placeholder="记录进展（日记支持 Markdown）"></textarea>
-              <div class="sandbox-diary-quick-actions">
-                <button class="btn btn-primary btn-sm" id="drawer-diary-save-btn" type="button">记录日记</button>
-              </div>
-            </div>
-            <div class="entity-filter-tabs" id="entity-filter-tabs">
-              <button class="btn btn-secondary btn-sm active" data-entity-filter="all">全部</button>
-              <button class="btn btn-secondary btn-sm" data-entity-filter="issue">Issue</button>
-              <button class="btn btn-secondary btn-sm" data-entity-filter="knowledge">Knowledge</button>
-              <button class="btn btn-secondary btn-sm" data-entity-filter="capability">Capability</button>
-              <button class="btn btn-secondary btn-sm" data-entity-filter="diary">Diary</button>
-            </div>
-
-            <div class="drawer-create-form hidden" id="drawer-create-form">
-              <select id="entity-type-select">
-                <option value="issue">Issue</option>
-                <option value="knowledge">Knowledge</option>
-                <option value="capability">Capability</option>
-              </select>
-              <input type="text" id="entity-title-input" placeholder="标题（必填）">
-              <div class="entity-field-group" id="entity-assignee-group">
-                <input type="text" id="entity-assignee-input" placeholder="负责人（Issue可选）">
+            <section class="drawer-section">
+              <div class="drawer-section-title">节点概览</div>
+              <div class="summary-strip compact" id="node-entity-summary"></div>
+            </section>
+            <section class="drawer-section">
+              <div class="drawer-section-title">快速日记</div>
+              <div class="drawer-diary-quick-form">
+                <div class="sandbox-diary-quick-meta">
+                  <span id="sandbox-diary-target-label">快速日记：未选中节点</span>
+                </div>
+                <textarea id="drawer-diary-content" placeholder="记录进展（日记支持 Markdown）"></textarea>
+                <div class="sandbox-diary-quick-actions">
+                  <button class="btn btn-primary btn-sm" id="drawer-diary-save-btn" type="button">记录日记</button>
+                </div>
               </div>
-              <div class="entity-field-group" id="entity-status-group">
-                <select id="entity-status-select"></select>
+            </section>
+            <section class="drawer-section">
+              <div class="drawer-section-title-row">
+                <div class="drawer-section-title">记录管理</div>
+                <button class="btn btn-secondary btn-sm" id="toggle-node-entity-form-btn" type="button">+ 新建记录</button>
               </div>
-              <div class="entity-field-group" id="entity-priority-group">
-                <select id="entity-priority-select">
-                  <option value="">优先级（Issue可选）</option>
-                  <option value="low">low</option>
-                  <option value="medium">medium</option>
-                  <option value="high">high</option>
-                  <option value="critical">critical</option>
-                </select>
+              <div class="entity-filter-tabs" id="entity-filter-tabs">
+                <button class="btn btn-secondary btn-sm active" data-entity-filter="all">全部</button>
+                <button class="btn btn-secondary btn-sm" data-entity-filter="issue">Issue</button>
+                <button class="btn btn-secondary btn-sm" data-entity-filter="knowledge">Knowledge</button>
+                <button class="btn btn-secondary btn-sm" data-entity-filter="capability">Capability</button>
+                <button class="btn btn-secondary btn-sm" data-entity-filter="diary">Diary</button>
               </div>
-              <div class="entity-field-group" id="entity-capability-type-group">
-                <select id="entity-capability-type-input">
-                  <option value="">能力类型（Capability可选）</option>
-                  <option value="workflow">workflow（流程能力）</option>
-                  <option value="automation">automation（自动化能力）</option>
-                  <option value="tooling">tooling（工具能力）</option>
-                  <option value="collaboration">collaboration（协作能力）</option>
-                  <option value="analysis">analysis（分析能力）</option>
-                  <option value="delivery">delivery（交付能力）</option>
-                  <option value="governance">governance（治理能力）</option>
-                  <option value="other">other（其他）</option>
+
+              <div class="drawer-create-form hidden" id="drawer-create-form">
+                <select id="entity-type-select">
+                  <option value="issue">Issue</option>
+                  <option value="knowledge">Knowledge</option>
+                  <option value="capability">Capability</option>
                 </select>
+                <input type="text" id="entity-title-input" placeholder="标题（必填）">
+                <div class="entity-field-group" id="entity-assignee-group">
+                  <input type="text" id="entity-assignee-input" placeholder="负责人（Issue可选）">
+                </div>
+                <div class="entity-field-group" id="entity-status-group">
+                  <select id="entity-status-select"></select>
+                </div>
+                <div class="entity-field-group" id="entity-priority-group">
+                  <select id="entity-priority-select">
+                    <option value="">优先级（Issue可选）</option>
+                    <option value="low">low</option>
+                    <option value="medium">medium</option>
+                    <option value="high">high</option>
+                    <option value="critical">critical</option>
+                  </select>
+                </div>
+                <div class="entity-field-group" id="entity-capability-type-group">
+                  <select id="entity-capability-type-input">
+                    <option value="">能力类型（Capability可选）</option>
+                    <option value="workflow">workflow（流程能力）</option>
+                    <option value="automation">automation（自动化能力）</option>
+                    <option value="tooling">tooling（工具能力）</option>
+                    <option value="collaboration">collaboration（协作能力）</option>
+                    <option value="analysis">analysis（分析能力）</option>
+                    <option value="delivery">delivery（交付能力）</option>
+                    <option value="governance">governance（治理能力）</option>
+                    <option value="other">other（其他）</option>
+                  </select>
+                </div>
+                <textarea id="entity-content-input" rows="4" placeholder="Markdown 内容（Knowledge/Capability 推荐）"></textarea>
+                <div class="entity-form-hint" id="entity-form-hint"></div>
+                <div class="entity-form-actions">
+                  <button class="btn btn-secondary btn-sm hidden" id="cancel-edit-entity-btn" type="button">取消编辑</button>
+                  <button class="btn btn-primary btn-sm" id="create-node-entity-btn" type="button">添加记录</button>
+                </div>
               </div>
-              <textarea id="entity-content-input" rows="4" placeholder="Markdown 内容（Knowledge/Capability 推荐）"></textarea>
-              <div class="entity-form-hint" id="entity-form-hint"></div>
-              <div class="entity-form-actions">
-                <button class="btn btn-secondary btn-sm hidden" id="cancel-edit-entity-btn" type="button">取消编辑</button>
-                <button class="btn btn-primary btn-sm" id="create-node-entity-btn" type="button">添加记录</button>
-              </div>
-            </div>
 
-            <div class="drawer-list" id="node-entity-list"></div>
+              <div class="drawer-list" id="node-entity-list"></div>
+            </section>
           </aside>
         </div>
       </div>
@@ -246,7 +261,35 @@
       </div>
       
       <div id="page-settings" class="page hidden">
-        <h2>设置</h2>
+        <h2>项目设置</h2>
+        <div class="settings-form">
+          <div class="setting-group project-setting-section">
+            <div class="project-setting-header">
+              <label>Users（按 IP 精确匹配，IP 不能复用）</label>
+              <button class="btn btn-secondary btn-sm" id="add-project-user-btn" type="button">+ 添加用户</button>
+            </div>
+            <div class="project-setting-list" id="project-users-list"></div>
+          </div>
+          <div class="setting-group project-setting-section">
+            <div class="project-setting-header">
+              <label>Profiles（支持 apply_to_all_users）</label>
+              <button class="btn btn-secondary btn-sm" id="add-project-profile-btn" type="button">+ 添加 Profile</button>
+            </div>
+            <div class="project-setting-list" id="project-profiles-list"></div>
+          </div>
+          <div class="setting-group project-setting-section">
+            <div class="project-setting-header">
+              <label>Bindings（user -> profiles）</label>
+              <button class="btn btn-secondary btn-sm" id="add-project-binding-btn" type="button">+ 添加绑定</button>
+            </div>
+            <div class="project-setting-list" id="project-bindings-list"></div>
+          </div>
+          <button class="btn btn-primary" id="save-project-settings-btn">保存项目设置</button>
+        </div>
+      </div>
+
+      <div id="page-system-settings" class="page hidden">
+        <h2>系统设置</h2>
         <div class="settings-form">
           <div class="setting-group">
             <label>API URL</label>
@@ -265,6 +308,10 @@
             <div class="settings-kv-list" id="setting-headers-list"></div>
             <button class="btn btn-secondary btn-sm" id="add-setting-header-btn" type="button">+ 添加 Header</button>
           </div>
+          <div class="setting-group">
+            <label>系统可编辑 IP（精确 IP，一行一个）</label>
+            <textarea id="setting-editable-ips" rows="5" placeholder="10.1.2.3&#10;192.168.1.20"></textarea>
+          </div>
           <button class="btn btn-primary" id="save-settings-btn">保存</button>
         </div>
       </div>

package/dist/web/styles.css

@@ -138,6 +138,10 @@ body {
   display: none;
 }
 
+.hidden {
+  display: none !important;
+}
+
 @keyframes fadeIn {
   from { opacity: 0; transform: translateY(8px); }
   to { opacity: 1; transform: translateY(0); }
@@ -453,6 +457,11 @@ h2 {
   background: linear-gradient(135deg, #e8f0fe 0%, #f0f7ff 100%);
 }
 
+.tree-parent-header.is-selected {
+  background: linear-gradient(135deg, #dbeafe 0%, #eef6ff 100%);
+  box-shadow: inset 0 0 0 1px #8bb8ff;
+}
+
 .tree-parent-header .node-status {
   width: 10px;
   height: 10px;
@@ -772,6 +781,12 @@ h2 {
   background: #f7faff;
 }
 
+.lane-tree-node-row.is-selected {
+  border-color: #80aef5;
+  background: #edf5ff;
+  box-shadow: inset 0 0 0 1px #80aef5;
+}
+
 .lane-tree-node-row:focus-visible {
   outline: 2px solid #c2dbff;
   outline-offset: 1px;
@@ -793,6 +808,18 @@ h2 {
   border-top: 1.2px solid #9bb3d8;
 }
 
+/* Last sibling ends with an "L" connector */
+.lane-tree-children > .lane-tree-node:last-child::after {
+  content: '';
+  position: absolute;
+  left: -10px;
+  top: 13px;
+  bottom: -2px;
+  width: 2px;
+  background: var(--bg-secondary);
+  pointer-events: none;
+}
+
 .dense-lane > .dense-lane-body > .lane-tree-node > .lane-tree-node-row::before {
   display: none;
 }
@@ -936,6 +963,12 @@ h2 {
   box-shadow: 0 4px 10px rgba(0,0,0,0.1);
 }
 
+.tree-leaf-node.is-selected {
+  border-color: #7aa9f8;
+  background: linear-gradient(180deg, #f5f9ff 0%, #ffffff 100%);
+  box-shadow: 0 0 0 2px rgba(122, 169, 248, 0.28), 0 6px 14px rgba(58, 108, 196, 0.12);
+}
+
 .tree-leaf-node .node-status {
   display: inline-flex;
   width: 6px;
@@ -1560,7 +1593,7 @@ h2 {
   background: var(--bg);
   border-radius: 12px;
   padding: 24px;
-  max-width: 600px;
+  max-width: 980px;
   box-shadow: var(--shadow);
 }
 
@@ -1607,6 +1640,160 @@ h2 {
   width: 100%;
 }
 
+.project-setting-section {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 12px;
+  background: #fcfdff;
+}
+
+.project-setting-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.project-setting-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.project-empty {
+  font-size: 12px;
+  color: var(--text-secondary);
+  background: var(--bg);
+  border: 1px dashed var(--border);
+  border-radius: 8px;
+  padding: 10px;
+}
+
+.project-row {
+  display: grid;
+  grid-template-columns: minmax(150px, 0.9fr) minmax(180px, 1fr) minmax(360px, 1.8fr) auto;
+  gap: 8px;
+  align-items: center;
+}
+
+.project-row select,
+.project-profile-grid select,
+.project-profile-grid input,
+.project-row input {
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px 10px;
+  font-size: 13px;
+  background: var(--bg);
+}
+
+.project-ip-editor {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.project-ip-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-height: 24px;
+}
+
+.project-ip-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: #eef4ff;
+  border: 1px solid #c7d9ff;
+  color: #1d4fae;
+  font-size: 12px;
+}
+
+.project-ip-remove {
+  border: none;
+  background: transparent;
+  color: #1d4fae;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.project-ip-input-row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 8px;
+  align-items: center;
+}
+
+.project-row.compact {
+  grid-template-columns: 1fr 160px auto;
+}
+
+.project-profile-card,
+.project-binding-card {
+  border: 1px solid var(--border);
+  background: var(--bg);
+  border-radius: 8px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.project-profile-grid {
+  display: grid;
+  grid-template-columns: minmax(170px, 1fr) minmax(200px, 1.2fr) minmax(240px, 0.8fr) auto;
+  gap: 8px;
+  align-items: center;
+}
+
+.project-profile-pages {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.project-sandbox-items {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.project-profile-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.project-binding-profiles {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+@media (max-width: 1180px) {
+  .settings-form {
+    max-width: 100%;
+  }
+  .project-row {
+    grid-template-columns: 1fr;
+  }
+  .project-row.compact {
+    grid-template-columns: 1fr;
+  }
+  .project-profile-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
 /* Dialog */
 dialog {
   position: fixed;
@@ -1753,16 +1940,24 @@ dialog::backdrop {
 /* Sandbox Layout - Left/Right */
 .sandbox-layout {
   display: grid;
-  grid-template-columns: minmax(0, 72fr) minmax(280px, 28fr);
+  grid-template-columns: minmax(0, 1fr);
   gap: 16px;
-  height: calc(100vh - 180px);
+  min-height: 320px;
   padding-right: 8px;
   box-sizing: border-box;
   position: relative;
 }
 
-.sandbox-layout.presentation-mode {
-  grid-template-columns: minmax(0, 82fr) minmax(240px, 18fr);
+.sandbox-layout.show-chat {
+  grid-template-columns: minmax(0, 72fr) minmax(280px, 28fr);
+}
+
+.sandbox-layout .sandbox-chat-section {
+  display: none;
+}
+
+.sandbox-layout.show-chat .sandbox-chat-section {
+  display: flex;
 }
 
 .sandbox-layout.is-fullscreen {
@@ -1774,12 +1969,24 @@ dialog::backdrop {
   align-items: stretch;
 }
 
+.sandbox-layout.is-fullscreen.show-chat {
+  grid-template-columns: minmax(0, 72fr) minmax(280px, 28fr);
+}
+
 .sandbox-layout.is-fullscreen .sandbox-tree-section,
 .sandbox-layout.is-fullscreen .sandbox-chat-section {
   min-height: 0;
 }
 
-.sandbox-layout.is-fullscreen .sandbox-chat-section {
+.sandbox-layout.is-fullscreen:not(.show-chat) .sandbox-chat-section {
+  display: none;
+}
+
+#page-sandbox-detail.is-sandbox-fullscreen #sandbox-overview {
+  display: none;
+}
+
+#page-sandbox-detail.is-sandbox-fullscreen .back-link {
   display: none;
 }
 
@@ -1898,7 +2105,7 @@ dialog::backdrop {
 }
 
 .summary-strip.compact {
-  margin-bottom: 10px;
+  margin-bottom: 0;
   gap: 8px;
 }
 
@@ -1912,6 +2119,25 @@ dialog::backdrop {
   font-size: 14px;
 }
 
+.drawer-section {
+  margin-bottom: 12px;
+}
+
+.drawer-section-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin: 0 0 8px;
+}
+
+.drawer-section-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
 .drawer-create-form {
   display: grid;
   gap: 8px;
@@ -1919,7 +2145,7 @@ dialog::backdrop {
   background: #f8f9fb;
   border: 1px solid var(--border);
   border-radius: 10px;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 }
 
 .drawer-create-form.hidden {
@@ -2012,7 +2238,7 @@ dialog::backdrop {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 }
 
 .entity-filter-tabs .btn.active {
@@ -2121,11 +2347,15 @@ dialog::backdrop {
 
 @media (max-width: 1366px) {
   .sandbox-layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .sandbox-layout.show-chat {
     grid-template-columns: minmax(0, 70fr) minmax(260px, 30fr);
   }
 
-  .sandbox-layout.presentation-mode {
-    grid-template-columns: minmax(0, 80fr) minmax(220px, 20fr);
+  .sandbox-layout.is-fullscreen.show-chat {
+    grid-template-columns: minmax(0, 70fr) minmax(260px, 30fr);
   }
 
   .node-entity-drawer {
@@ -2138,6 +2368,21 @@ dialog::backdrop {
   }
 }
 
+.ai-toggle-btn {
+  background: linear-gradient(135deg, #2563eb, #1d4ed8);
+  color: #fff;
+  border-color: transparent;
+  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.24);
+}
+
+.ai-toggle-btn:hover {
+  background: linear-gradient(135deg, #1d4ed8, #1e40af);
+}
+
+.ai-toggle-btn .icon {
+  margin-right: 4px;
+}
+
 .sandbox-chat-section .chat-container {
   flex: 1;
   height: auto;