local-knowledge-graph 1.10.3 → 1.11.0

package/public/app.js

@@ -16,6 +16,10 @@ const state = {
   meta: null,              // /api/meta 缓存（图例与下拉框用）
   aliases: {},             // entityId -> [别名]（/api/graph 附带）
   confFilter: '',          // 关系置信度过滤：''=全部 | 确证 | 推测 | 存疑
+  hiddenCats: new Set(),   // 图例点击隐藏的大类：'e:物理实体' / 'r:互动'
+  attrFilter: null,        // 实体属性过滤 {key, op, value}
+  multiSel: null,          // 多选模式：Set<entityId>，null=未开启
+  subGraph: null,          // 子图模式：Set<entityId>，仅显示集合内实体及互相关系
   pathHi: null,            // 画布路径高亮 { nodes:Set, rels:Set }
   lastAsk: null,           // 最近一次智能提问响应（证据路径高亮用）
   ingViewId: null,         // 文档入图：当前审核任务id
@@ -298,6 +302,56 @@ function makeRelLine(pa, pb, arc, color, dashed, opacity, dashSize, gapSize) {
   return line;
 }
 
+/* ---- 关系方向箭头 ---- */
+// 锥体尖端默认朝 +Y，用四元数对齐到边切线方向；互惠对(同名双向)画双锥
+const CONE_UP = new THREE.Vector3(0, 1, 0);
+function makeCone(color, opacity) {
+  const geo = new THREE.ConeGeometry(1.1, 3.2, 12);
+  const mat = new THREE.MeshBasicMaterial({ color, transparent: true, opacity });
+  return new THREE.Mesh(geo, mat);
+}
+
+// 锥体沿曲线放置：t 为弧上参数，直线时退化为线性插值；tipAhead 表示尖端朝行进方向
+function placeCone(cone, a, b, arc, t) {
+  let p, dir;
+  if (arc) {
+    _arcDir.subVectors(b, a);
+    _arcOff.copy(arcOffsetVec(_arcDir, arc));
+    p = arcPoint(new THREE.Vector3(), a, b, _arcDir, _arcOff, t);
+    dir = arcPoint(new THREE.Vector3(), a, b, _arcDir, _arcOff, Math.min(t + 0.06, 1)).sub(p);
+    if (dir.lengthSq() < 1e-9) dir = new THREE.Vector3().subVectors(b, a);
+  } else {
+    dir = new THREE.Vector3().subVectors(b, a);
+    const len = dir.length();
+    if (len < 1e-6) return;
+    dir.multiplyScalar(1 / len);
+    p = new THREE.Vector3().copy(a).addScaledVector(dir, len * t);
+  }
+  cone.position.copy(p);
+  dir.normalize();
+  cone.quaternion.setFromUnitVectors(CONE_UP, dir);
+}
+
+// 每帧同步锥体位置与透明度（跟随线高亮/淡化）
+function updateRelCones(l) {
+  if (!l.cone) return;
+  const op = l.line.material.opacity;
+  if (l.cone) { l.cone.material.opacity = op; placeCone(l.cone, l.a.pos, l.b.pos, l.arc, 0.84); }
+  if (l.cone2) { l.cone2.material.opacity = op; placeCone(l.cone2, l.b.pos, l.a.pos, l.arc ? flipArc(l.arc) : null, 0.84); }
+}
+
+// 反向端锥体取对称弧位：镜像 idx，使双锥各走各的弧道
+function flipArc(arc) {
+  return { idx: arc.total - 1 - arc.idx, total: arc.total };
+}
+
+// 统一设置一条边的透明度（线+锥体），高亮/淡化共用
+function setLinkOpacity(l, op) {
+  l.line.material.opacity = op;
+  if (l.cone) l.cone.material.opacity = op;
+  if (l.cone2) l.cone2.material.opacity = op;
+}
+
 // 每帧根据节点最新位置刷新弧线几何与标签位置（Sprite 标签贴线、近大远小）
 const _arcDir = new THREE.Vector3(), _arcOff = new THREE.Vector3(), _arcTmp = new THREE.Vector3();
 function updateRelLine(l) {
@@ -308,6 +362,7 @@ function updateRelLine(l) {
     posAttr.needsUpdate = true;
     if (l.dashed) l.line.computeLineDistances();
     if (l.label) l.label.position.copy(l.a.pos).add(l.b.pos).multiplyScalar(0.5);
+    updateRelCones(l);
     return;
   }
   _arcDir.subVectors(l.b.pos, l.a.pos);
@@ -319,11 +374,12 @@ function updateRelLine(l) {
   }
   posAttr.needsUpdate = true;
   if (l.dashed) l.line.computeLineDistances();
-  // 标签置于弧顶（t=0.5）外移一点，跟随弧线弯曲
+  // 标签置于弧顶（t=0.5），贴合弧线
   if (l.label) {
     arcPoint(_arcTmp, l.a.pos, l.b.pos, _arcDir, _arcOff, 0.5);
-    l.label.position.copy(_arcTmp).addScaledVector(_arcOff, 6);
+    l.label.position.copy(_arcTmp);
   }
+  updateRelCones(l);
 }
 
 // 弧顶标签初始定位（构建时用；此后每帧由 updateRelLine 跟随）
@@ -331,8 +387,7 @@ function setRelLabelPos(lbl, pa, pb, arc) {
   if (!arc) { lbl.position.copy(pa).add(pb).multiplyScalar(0.5); return; }
   const dir = pb.clone().sub(pa);
   const off = arcOffsetVec(dir, arc);
-  const p = arcPoint(new THREE.Vector3(), pa, pb, dir, off, 0.5);
-  lbl.position.copy(p).addScaledVector(off, 6);
+  lbl.position.copy(arcPoint(new THREE.Vector3(), pa, pb, dir, off, 0.5));
 }
 
 function buildNodeMesh(category) {
@@ -356,24 +411,62 @@ function buildNodeMesh(category) {
   return mesh;
 }
 
+// 属性条件匹配：返回 ents 中通过过滤条件的 id 数组；op: eq 等值 / contains 包含 / gt 大于 / lt 小于
+function attrMatchEnts(ents) {
+  const { key, op, value } = state.attrFilter;
+  if (!key) return ents.map((e) => e.id);
+  const kw = String(value);
+  const numKw = Number(kw);
+  const hasNumKw = kw !== '' && Number.isFinite(numKw);
+  return ents.filter((e) => {
+    let attrs = {};
+    try { attrs = JSON.parse(e.attributes || '{}'); } catch (_) {}
+    if (!(key in attrs)) return false;
+    const v = attrs[key];
+    if (op === 'eq') return String(v) === kw;
+    if (op === 'contains') return String(v).includes(kw);
+    if (op === 'exists') return true;
+    const numV = Number(v);
+    if (op === 'gt') return hasNumKw && Number.isFinite(numV) && numV > numKw;
+    if (op === 'lt') return hasNumKw && Number.isFinite(numV) && numV < numKw;
+    return false;
+  }).map((e) => e.id);
+}
+
 function rebuildGraph() {
   scene.remove(nodeGroup, linkGroup, labelGroup);
   nodeGroup = new THREE.Group(); linkGroup = new THREE.Group(); labelGroup = new THREE.Group();
   scene.add(nodeGroup, linkGroup, labelGroup);
   simNodes.length = 0; simLinks.length = 0;
 
-  // 中心层级模式：仅构建子图；全图模式：构建全部
-  const sub = state.ego ? calcEgo(state.ego.centerId, state.ego.depth) : null;
-  const ents = sub ? sub.entities : state.entities;
+  // 中心层级模式：仅构建子图；子图模式：仅显示所选集合；全图模式：构建全部
+  let sub = null;
+  if (state.ego) sub = calcEgo(state.ego.centerId, state.ego.depth);
+  else if (state.subGraph) {
+    const se = state.entities.filter((e) => state.subGraph.has(e.id));
+    const sids = new Set(se.map((e) => e.id));
+    sub = { plain: true, entities: se, relations: state.relations.filter((r) => sids.has(r.source_id) && sids.has(r.target_id)) };
+  }
+  let ents = sub ? sub.entities : state.entities;
   const allRels = sub ? sub.relations : state.relations;
-  const rels = allRels.filter((r) => !state.confFilter || (r.confidence || '确证') === state.confFilter);
+  let rels = allRels.filter((r) => !state.confFilter || (r.confidence || '确证') === state.confFilter);
+  // 图例点击隐藏的大类：实体与关系分别过滤
+  if (state.hiddenCats.size) {
+    ents = ents.filter((e) => !state.hiddenCats.has('e:' + e.category));
+    rels = rels.filter((r) => !state.hiddenCats.has('r:' + r.category));
+  }
+  // 属性条件过滤：仅保留属性匹配的实体（关联边因端点缺失自动不画）
+  if (state.attrFilter) {
+    const okIds = new Set(attrMatchEnts(ents));
+    ents = ents.filter((e) => okIds.has(e.id));
+  }
   state.pathHi = null;
 
   state.entityMap.clear();
   const N = ents.length;
   ents.forEach((e, i) => {
     const mesh = buildNodeMesh(e.category);
-    if (sub) {
+    if (sub && !sub.plain) {
       // 层级球壳分布：中心固定原点，每层外扩
       if (e.level === 0) {
         mesh.position.set(0, 0, 0);
@@ -432,6 +525,11 @@ function rebuildGraph() {
     return n > 1 ? { idx: i, total: n } : null;
   };
 
+  // 互惠对检测：A→B 与 B→A 存在同名关系时，该边两端各画一个箭头
+  const dirKeys = new Set();
+  for (const r of rels) dirKeys.add(`${r.source_id}>${r.target_id}>${r.name}`);
+  const isReciprocal = (r) => dirKeys.has(`${r.target_id}>${r.source_id}>${r.name}`);
+
   rels.forEach((r) => {
     const a = simNodes.find((n) => n.id === r.source_id);
     const b = simNodes.find((n) => n.id === r.target_id);
@@ -439,19 +537,33 @@ function rebuildGraph() {
     const st = RELATION_STYLE[r.category] || { color: 0x999999, dashed: false };
     const conf = r.confidence || '确证';
     const baseOp = st.opacity === undefined ? 0.9 : st.opacity;
-    const op = conf === '存疑' ? Math.min(baseOp, 0.35) : baseOp; // 存疑降不透明度
+    let op = conf === '存疑' ? Math.min(baseOp, 0.35) : baseOp; // 存疑降不透明度
+    // 属性 weight 数值映射不透明度：weight=1 → ×0.65，每级 +0.09，上限 ×1（WebGL 线宽不可靠，用明暗表达强弱）
+    let rAttrs = {};
+    try { rAttrs = JSON.parse(r.attributes || '{}'); } catch (_) {}
+    const w = Number(rAttrs.weight);
+    if (Number.isFinite(w) && w > 0) op *= Math.min(0.65 + 0.09 * w, 1);
     const dashed = st.dashed || conf === '推测';                  // 推测强制虚线
     const arc = arcOf(r);
     const line = makeRelLine(a.pos, b.pos, arc, st.color, dashed, op, st.dashSize || 6, st.gapSize || 4);
     line.userData.relationId = r.id;
     line.userData.baseOpacity = op;
     linkGroup.add(line);
+    const rec = isReciprocal(r);
+    let cone = null, cone2 = null;
+    if (rec) {
+      cone = makeCone(st.color, op); cone2 = makeCone(st.color, op);
+      linkGroup.add(cone, cone2);
+    } else {
+      cone = makeCone(st.color, op);
+      linkGroup.add(cone);
+    }
     // 线标注显示具体关系名（如"父子"），线型/颜色仍由大类规定；Sprite 保持贴线与近大远小
     const lbl = makeLabelSprite(r.name, st.css, 24);
     lbl.userData.text = r.name;
     setRelLabelPos(lbl, a.pos, b.pos, arc);
     labelGroup.add(lbl);
-    simLinks.push({ id: r.id, a, b, line, label: lbl, dashed, confidence: conf, arc });
+    simLinks.push({ id: r.id, a, b, line, label: lbl, dashed, confidence: conf, arc, cone, cone2 });
   });
 
   // 推理关系叠加：虚化虚线 + "(推)"标注，负数id与库中显式关系区分；仅显示两端均在当前视图的边
@@ -576,7 +688,15 @@ renderer.domElement.addEventListener('pointerup', (e) => {
   raycaster.setFromCamera(mouse, camera);
   const meshHits = raycaster.intersectObjects(nodeGroup.children, false);
   if (meshHits.length) {
-    state.selected = { type: 'entity', id: meshHits[0].object.userData.entityId };
+    const eid = meshHits[0].object.userData.entityId;
+    // 多选模式：点击节点 toggle 选区，标记金色光圈；点线/空白仍维持选区
+    if (state.multiSel) {
+      if (state.multiSel.has(eid)) { state.multiSel.delete(eid); setMsRing(meshHits[0].object, false); }
+      else { state.multiSel.add(eid); setMsRing(meshHits[0].object, true); }
+      updateMsBar();
+      return;
+    }
+    state.selected = { type: 'entity', id: eid };
     renderInfoCard();
     return;
   }
@@ -726,12 +846,21 @@ function renderInfoCard() {
           ${['确证', '推测', '存疑'].map((c) => `<option value="${c}"${(r.confidence || '确证') === c ? ' selected' : ''}>${c}</option>`).join('')}
         </select></div>
       <div class="kv"><b>来源引用</b>：<input id="rel-sref" value="${escapeHtml(r.source_ref || '')}" placeholder="URL/文献+页码" style="width:150px"></div>
+      <div class="kv"><b>关系属性</b>：<span style="color:#5c6f92">（JSON 对象，如 {"开始时间":"2024-01","weight":4}）</span></div>
+      <textarea id="rel-attrs" class="mcp-snippet" style="width:100%;min-height:56px;font-size:11px">${escapeHtml(relAttrsText(r))}</textarea>
       ${rimgHtml}
       <div class="btns"><button onclick="saveRelMeta(${r.id})">保存标注</button><button onclick="$('entity-img-input').click()">绑图片</button><button class="danger" onclick="delRelation(${r.id})">删除</button></div>`;
     card.style.display = 'block';
     if (!rimgs) loadRelationImages(rid);
   }
 }
+
+// 关系属性文本化：库行为 JSON 字符串或对象，统一pretty输出；空对象显示空 {}
+function relAttrsText(r) {
+  let a = {};
+  try { a = typeof r.attributes === 'string' ? JSON.parse(r.attributes || '{}') : (r.attributes || {}); } catch (_) { return String(r.attributes || ''); }
+  return Object.keys(a).length ? JSON.stringify(a, null, 1) : '';
+}
 function escapeHtml(s) {
   return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 }
@@ -778,6 +907,7 @@ function updateEgoBar() {
 
 function focusEgo(id) {
   state.ego = { centerId: id, depth: null };
+  if (state.subGraph) { state.subGraph = null; updateSubBar(); }
   updateEgoBar();
   rebuildGraph();
   const m = state.entityMap.get(id);
@@ -799,6 +929,13 @@ function focusEntity(id) {
     updateEgoBar();
     rebuildGraph();
   }
+  if (state.subGraph && !simNodes.some((n) => n.id === id)) {
+    toast('目标实体不在当前子图内，已退出子图模式');
+    state.subGraph = null;
+    updateSubBar();
+    rebuildGraph();
+  }
+  if (!state.entityMap.has(id)) { toast('该实体的样式大类已被图例隐藏，点击图例条目可恢复显示', true); return; }
   state.selected = { type: 'entity', id };
   renderInfoCard();
   const nd = simNodes.find((n) => n.id === id);
@@ -825,6 +962,87 @@ $('ego-depth').addEventListener('change', () => {
 $('ego-rebuild').addEventListener('click', () => { if (state.ego) rebuildGraph(); });
 $('ego-exit').addEventListener('click', exitEgo);
 
+/* ================= 多选与子图提取 ================= */
+function updateMsBar() {
+  const bar = $('ms-bar');
+  if (!state.multiSel) { bar.classList.remove('show'); return; }
+  $('ms-count').textContent = `已选 ${state.multiSel.size} 个`;
+  bar.classList.add('show');
+}
+
+function updateSubBar() {
+  const bar = $('sub-bar');
+  if (!state.subGraph) { bar.classList.remove('show'); return; }
+  const names = state.entities.filter((e) => state.subGraph.has(e.id)).map((e) => e.name);
+  $('sub-name').textContent = names.length <= 3 ? names.join('、') : `${names.slice(0, 3).join('、')} 等 ${names.length} 个`;
+  bar.classList.add('show');
+}
+
+// 多选标记：金色光圈 Sprite，userData.msRing 便于移除
+function setMsRing(mesh, on) {
+  const old = mesh.children.find((c) => c.userData && c.userData.msRing);
+  if (old) { mesh.remove(old); old.material.map && old.material.map.dispose(); old.material.dispose(); }
+  if (on) {
+    const ring = makeRingSprite('#ffd75f', false);
+    ring.userData.msRing = true;
+    mesh.add(ring);
+  }
+}
+
+function toggleMultiSel() {
+  if (state.multiSel) {
+    for (const m of state.entityMap.values()) setMsRing(m.mesh, false);
+    state.multiSel = null;
+    $('btn-multisel').classList.remove('active');
+    updateMsBar();
+    return;
+  }
+  state.ego = null; updateEgoBar();
+  state.subGraph = null; updateSubBar();
+  state.multiSel = new Set();
+  $('btn-multisel').classList.add('active');
+  updateMsBar();
+  toast('多选模式已开启：点击图上节点加入/移出选区');
+}
+$('btn-multisel').addEventListener('click', toggleMultiSel);
+
+$('ms-clear').addEventListener('click', () => {
+  if (!state.multiSel) return;
+  for (const m of state.entityMap.values()) setMsRing(m.mesh, false);
+  state.multiSel.clear();
+  updateMsBar();
+});
+$('ms-exit').addEventListener('click', toggleMultiSel);
+
+// 提取子图：以当前选区为集合进入子图模式（互斥退出多选）
+$('ms-extract').addEventListener('click', () => {
+  if (!state.multiSel || !state.multiSel.size) return toast('请先在图上点选至少一个实体', true);
+  state.subGraph = new Set(state.multiSel);
+  for (const m of state.entityMap.values()) setMsRing(m.mesh, false);
+  state.multiSel = null;
+  $('btn-multisel').classList.remove('active');
+  updateMsBar();
+  updateSubBar();
+  rebuildGraph();
+  toast(`已提取子图：${state.subGraph.size} 个实体`);
+});
+
+function subExportIds() {
+  if (!state.subGraph) return null;
+  return [...state.subGraph].join(',');
+}
+$('ms-export-json').addEventListener('click', () => {
+  if (!state.multiSel || !state.multiSel.size) return toast('请先在图上点选至少一个实体', true);
+  downloadUrl('/api/export/json?ids=' + [...state.multiSel].join(','));
+});
+$('ms-export-csv').addEventListener('click', () => {
+  if (!state.multiSel || !state.multiSel.size) return toast('请先在图上点选至少一个实体', true);
+  downloadUrl('/api/export/csv?ids=' + [...state.multiSel].join(','));
+});
+$('sub-export-json').addEventListener('click', () => { const q = subExportIds(); if (q) downloadUrl('/api/export/json?ids=' + q); });
+$('sub-export-csv').addEventListener('click', () => { const q = subExportIds(); if (q) downloadUrl('/api/export/csv?ids=' + q); });
+$('sub-exit').addEventListener('click', () => { state.subGraph = null; updateSubBar(); rebuildGraph(); });
+
 /* ================= 实体图片绑定与灯箱 ================= */
 const imgInput = document.createElement('input');
 imgInput.type = 'file';
@@ -1000,9 +1218,37 @@ function initTabs() {
     document.querySelectorAll('.tabbody').forEach((b) => b.classList.toggle('active', b.id === 'tab-' + t.dataset.tab));
     if (t.dataset.tab === 'log') loadLogs();
     if (t.dataset.tab === 'version') loadHistory();
+    if (t.dataset.tab === 'stats') loadStats();
   });
 }
 
+/* ================= 统计页签 ================= */
+async function loadStats() {
+  try {
+    const s = await api('/api/stats');
+    $('st-status').textContent = `共 ${s.entities} 实体 / ${s.relations} 关系`;
+    $('st-overview').innerHTML = `
+      <div class="kv">实体 <b>${s.entities}</b>　关系 <b>${s.relations}</b>　平均度 <b>${s.avg_degree}</b>　最高度 <b>${s.max_degree}</b></div>`;
+    const maxCnt = Math.max(...s.degree_distribution.map((d) => d.count), 1);
+    $('st-dist').innerHTML = s.degree_distribution.map((d) => `
+      <div class="kv" style="display:flex;align-items:center;gap:6px"><span style="width:34px">度${d.degree}</span>
+        <span style="flex:1;height:8px;background:#1c2740;border-radius:4px;overflow:hidden"><span style="display:block;height:100%;width:${(d.count / maxCnt) * 100}%;background:#4f8cff"></span></span>
+        <span style="width:36px;text-align:right">${d.count}</span></div>`).join('') || '<div class="kv">暂无数据</div>';
+    $('st-hubs').innerHTML = s.hubs.map((h, i) => `
+      <div class="list-item" style="cursor:pointer" onclick="focusEntity(${h.id})">
+        <b>${i + 1}. ${escapeHtml(h.name)}</b>
+        <span class="tag" style="color:${ENTITY_STYLE[h.category].css};border-color:${ENTITY_STYLE[h.category].css}55">${h.category}</span>
+        <div class="kv">总度 ${h.degree}（出 ${h.out} / 入 ${h.in}）${h.relations.length ? '　常涉关系：' + h.relations.map(escapeHtml).join('、') : ''}</div>
+      </div>`).join('') || '<div class="kv">暂无数据</div>';
+    const maxCat = Math.max(...s.categories.map((c) => c.count), 1);
+    $('st-cats').innerHTML = s.categories.map((c) => `
+      <div class="kv" style="display:flex;align-items:center;gap:6px">
+        <span style="width:70px;color:${ENTITY_STYLE[c.category] ? ENTITY_STYLE[c.category].css : '#ccc'}">${escapeHtml(c.category)}</span>
+        <span style="flex:1;height:8px;background:#1c2740;border-radius:4px;overflow:hidden"><span style="display:block;height:100%;width:${(c.count / maxCat) * 100}%;background:${ENTITY_STYLE[c.category] ? ENTITY_STYLE[c.category].css : '#8fa3c0'}"></span></span>
+        <span style="width:36px;text-align:right">${c.count}</span></div>`).join('') || '<div class="kv">暂无数据</div>';
+  } catch (e) { $('st-status').textContent = '加载失败: ' + e.message; }
+}
+
 async function api(url, opts) {
   const res = await fetch(url, opts);
   const data = await res.json().catch(() => ({}));
@@ -1021,14 +1267,29 @@ function fillCategorySelects(meta) {
 function renderLegend() {
   const meta = state.meta;
   if (!meta) return;
+  const swatch = (kind, cat, cls, css, label) => {
+    const hidden = state.hiddenCats.has(kind + ':' + cat);
+    return `<span class="lg-item" data-kind="${kind}" data-cat="${escapeHtml(cat)}" style="cursor:pointer;opacity:${hidden ? 0.25 : 1};${hidden ? 'text-decoration:line-through;' : ''}" title="点击显示/隐藏该大类"><span class="${cls}" style="background:${cls === 'sw' ? css : 'transparent'};${cls === 'ln' ? 'border-color:' + css : ''}"></span>${label}</span>`;
+  };
   $('legend').innerHTML = '<b>实体样式</b><br>' +
-    meta.entity_categories.map((c) => `<span class="sw" style="background:${ENTITY_STYLE[c].css}"></span>${c} · ${ENTITY_STYLE[c].shape}`).join('<br>') +
+    meta.entity_categories.map((c) => swatch('e', c, 'sw', ENTITY_STYLE[c].css, `${c} · ${ENTITY_STYLE[c].shape}`)).join('<br>') +
     '<br><b>关系线型</b><br>' +
-    meta.relation_categories.map((c) => `<span class="ln ${RELATION_STYLE[c].dashed ? 'dash' : ''}" style="border-color:${RELATION_STYLE[c].css}"></span>${c}关系`).join('<br>') +
+    meta.relation_categories.map((c) => swatch('r', c, 'ln', RELATION_STYLE[c].css, `${c}关系${RELATION_STYLE[c].dashed ? '（虚线）' : ''}`)).join('<br>') +
     '<br><b>置信度</b><br>' +
-    ['确证', '推测', '存疑'].map((c) => `<span class="sw" style="background:${CONF_STYLE[c]}"></span>${c}${c === '推测' ? '（虚线）' : c === '存疑' ? '（淡化）' : ''}`).join('<br>');
+    ['确证', '推测', '存疑'].map((c) => `<span><span class="sw" style="background:${CONF_STYLE[c]}"></span>${c}${c === '推测' ? '（虚线）' : c === '存疑' ? '（淡化）' : ''}</span>`).join('<br>');
 }
 
+// 图例点击切换大类显隐；重建时实体/关系分别按 e:/r: 前缀过滤
+$('legend').addEventListener('click', (ev) => {
+  const item = ev.target.closest('.lg-item');
+  if (!item) return;
+  const key = item.dataset.kind + ':' + item.dataset.cat;
+  if (state.hiddenCats.has(key)) state.hiddenCats.delete(key);
+  else state.hiddenCats.add(key);
+  renderLegend();
+  rebuildGraph();
+});
+
 function refreshEntityOptions() {
   const opts = state.entities.map((e) => `<option value="${e.id}">#${e.id} ${escapeHtml(e.name)}（${e.category}）</option>`).join('');
   $('r-source').innerHTML = opts || '<option value="">（请先创建实体）</option>';
@@ -1117,15 +1378,26 @@ async function submitRelation() {
     $('r-source-ref').value = '';
     toast('关系已添加');
     await refreshAll();
-  } catch (e) { toast(e.message, true); }
+  } catch (e) {
+    if (/重复|同名/.test(e.message)) toast(`重复三元组被拒绝：${e.message}。同一起点到同一终点的同名关系只能有一条，可在图上点选该关系修改标注，或更换关系名称。`, true);
+    else toast(e.message, true);
+  }
 }
 
-// 保存关系标注（置信度+来源引用）
+// 保存关系标注（置信度+来源引用+关系属性）
 async function saveRelMeta(id) {
+  let attrs = {};
+  const raw = $('rel-attrs') ? $('rel-attrs').value.trim() : '';
+  if (raw) {
+    try {
+      attrs = JSON.parse(raw);
+      if (!attrs || typeof attrs !== 'object' || Array.isArray(attrs)) throw new Error('必须是JSON对象');
+    } catch (e) { return toast('关系属性JSON不合法: ' + e.message, true); }
+  }
   try {
     await api(`/api/relations/${id}`, {
       method: 'PUT', headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ confidence: $('rel-conf').value, source_ref: $('rel-sref').value.trim() }),
+      body: JSON.stringify({ confidence: $('rel-conf').value, source_ref: $('rel-sref').value.trim(), attributes: attrs }),
     });
     toast('标注已保存');
     await refreshAll();
@@ -1525,7 +1797,7 @@ function applyCanvasHi(nodes, rels) {
   for (const l of simLinks) {
     const base = l.line.userData.baseOpacity === undefined ? 0.9 : l.line.userData.baseOpacity;
     const on = rels.has(l.id);
-    l.line.material.opacity = on ? Math.max(base, 0.95) : 0.05;
+    setLinkOpacity(l, on ? Math.max(base, 0.95) : 0.05);
     if (l.label) l.label.material.opacity = on ? 1 : 0.06;
   }
 }
@@ -1538,7 +1810,7 @@ function clearCanvasHi() {
     if (n.label) n.label.material.opacity = 1;
   }
   for (const l of simLinks) {
-    l.line.material.opacity = l.line.userData.baseOpacity === undefined ? 0.9 : l.line.userData.baseOpacity;
+    setLinkOpacity(l, l.line.userData.baseOpacity === undefined ? 0.9 : l.line.userData.baseOpacity);
     if (l.label) l.label.material.opacity = 1;
   }
 }
@@ -1832,6 +2104,9 @@ function applyStyleLight(dirty) {
         : new THREE.LineBasicMaterial({ color: st.color, transparent: true, opacity: op });
       if (st.dashed) l.line.computeLineDistances();
       l.dashed = st.dashed;
+      l.line.userData.baseOpacity = op;
+      if (l.cone) { l.cone.material.color.setHex(st.color); l.cone.material.opacity = l.line.material.opacity; }
+      if (l.cone2) { l.cone2.material.color.setHex(st.color); l.cone2.material.opacity = l.line.material.opacity; }
       const fresh = relabel(l.label, st.css, 24);
       if (fresh) l.label = fresh;
     }
@@ -2067,6 +2342,28 @@ $('fm-savehtml').addEventListener('click', () => {
   toast('单文件查看器已开始下载：纯静态HTML，内嵌全部图谱数据与图片，发给他人用浏览器打开即可浏览');
 });
 $('fm-rdf').addEventListener('click', () => { window.open('/api/export/rdf', '_blank'); $('file-menu').classList.remove('show'); });
+$('fm-export-json').addEventListener('click', () => { downloadUrl('/api/export/json'); $('file-menu').classList.remove('show'); });
+$('fm-export-csv').addEventListener('click', () => { downloadUrl('/api/export/csv'); $('file-menu').classList.remove('show'); });
+$('fm-import-triples').addEventListener('click', () => { $('file-menu').classList.remove('show'); $('triples-file-input').click(); });
+$('triples-file-input').addEventListener('change', async () => {
+  const f = $('triples-file-input').files[0];
+  $('triples-file-input').value = '';
+  if (!f) return;
+  const isCsv = /\.csv$/i.test(f.name), isJson = /\.json$/i.test(f.name);
+  if (!isCsv && !isJson) return toast('请选择 .json 或 .csv 三元组文件', true);
+  if (!confirm(`导入《${f.name}》将合并到当前图谱（同名实体复用、重复关系自动跳过）。是否继续？`)) return;
+  try {
+    const content = await f.text();
+    const r = await api('/api/import/triples', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ content, format: isJson ? 'json' : 'csv' }) });
+    let msg = `导入完成：新建实体 ${r.entities_added}（复用 ${r.entities_reused}），新建关系 ${r.relations_added}（跳过重复 ${r.relations_skipped_duplicate}）`;
+    if (r.errors.length) msg += `；失败 ${r.errors.length} 条：${r.errors.slice(0, 3).join('；')}`;
+    if (r.warnings.length) msg += `；警告 ${r.warnings.length} 条：${r.warnings.slice(0, 2).join('；')}`;
+    toast(msg);
+    exitEgo();
+    await refreshAll();
+    loadHistory();
+  } catch (e) { toast('导入失败: ' + e.message, true); }
+});
 $('fm-open').addEventListener('click', () => { $('file-menu').classList.remove('show'); $('db-file-input').click(); });
 $('db-file-input').addEventListener('change', async () => {
   const f = $('db-file-input').files[0];
@@ -2130,14 +2427,100 @@ async function refreshAll(rebuild = true) {
   $('stat-badge').textContent = `实体 ${meta.counts.entities} / 关系 ${meta.counts.relations} / 日志 ${meta.counts.logs}`;
   loadIngestTasks();
   const badge = $('agent-badge');
-  if (meta.agent_available) { badge.textContent = 'OpenCode 已就绪'; badge.className = 'badge ok'; }
-  else { badge.textContent = 'OpenCode 未安装'; badge.className = 'badge off'; }
+  if (meta.agent_available) {
+    badge.textContent = 'OpenCode 已就绪'; badge.className = 'badge ok';
+    badge.style.cursor = ''; badge.title = ''; badge.onclick = null;
+    ocShowInstallCard(false);
+  } else {
+    badge.textContent = 'OpenCode 未安装'; badge.className = 'badge off';
+    badge.style.cursor = 'pointer';
+    badge.title = '点击前往一键安装';
+    badge.onclick = () => gotoInstallCard();
+    ocShowInstallCard(true);
+    try { ocRenderInstall(await api('/api/agent/install')); } catch (_) { /* 状态接口异常时仅显示卡片 */ }
+  }
   refreshEntityOptions();
   rebuildGraph();
   renderEntityList();
   renderRelationList();
 }
 
+/* ================= OpenCode 一键安装 ================= */
+let ocInstallPollTimer = null;
+
+function gotoInstallCard() {
+  document.querySelector('[data-tab="search"]').click();
+  setTimeout(() => $('oc-install-card').scrollIntoView({ behavior: 'smooth', block: 'center' }), 60);
+}
+
+function ocShowInstallCard(show) {
+  const card = $('oc-install-card');
+  if (card) card.style.display = show ? '' : 'none';
+  if (!show && ocInstallPollTimer) { clearInterval(ocInstallPollTimer); ocInstallPollTimer = null; }
+}
+
+function ocRenderInstall(st) {
+  const btn = $('oc-install-btn');
+  const stEl = $('oc-install-status');
+  const logEl = $('oc-install-log');
+  const busy = st.phase === 'installing' || st.phase === 'configuring';
+  btn.disabled = busy;
+  btn.textContent = busy ? '安装中…' : (st.phase === 'error' ? '重试安装' : (st.phase === 'done' ? '重新安装（force）' : '下载并安装 OpenCode'));
+  if (st.phase === 'done') {
+    stEl.textContent = `安装完成 ✓ ${st.model ? st.model.detail : ''}`;
+    stEl.style.color = '#7ee787';
+  } else if (st.phase === 'error') {
+    stEl.textContent = `失败：${st.error}`;
+    stEl.style.color = '#f0883e';
+  } else {
+    stEl.textContent = st.step || '未检测到 opencode，点击按钮自动完成安装';
+    if (busy && st.started_at) {
+      const secs = Math.max(0, Math.round((Date.now() - st.started_at) / 1000));
+      stEl.textContent += ` 已耗时 ${secs >= 60 ? `${Math.floor(secs / 60)} 分 ${secs % 60} 秒` : `${secs} 秒`}`;
+    }
+    stEl.style.color = '';
+  }
+  if (st.log && st.log.length && st.phase !== 'idle') {
+    logEl.style.display = '';
+    logEl.textContent = st.log.join('\n');
+    logEl.scrollTop = logEl.scrollHeight;
+  } else {
+    logEl.style.display = 'none';
+  }
+}
+
+function ocPollInstall() {
+  if (ocInstallPollTimer) return;
+  ocInstallPollTimer = setInterval(async () => {
+    try {
+      const st = await api('/api/agent/install');
+      ocRenderInstall(st);
+      if (st.phase === 'done' || st.phase === 'error') {
+        clearInterval(ocInstallPollTimer); ocInstallPollTimer = null;
+        if (st.phase === 'done') { toast('OpenCode 安装完成，已可使用'); await refreshAll(); }
+      }
+    } catch (_) { /* 下次轮询重试 */ }
+  }, 1500);
+}
+
+$('oc-install-btn').addEventListener('click', async () => {
+  const btn = $('oc-install-btn');
+  btn.disabled = true;
+  $('oc-install-status').textContent = '正在发起安装…';
+  try {
+    const r = await api('/api/agent/install', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ force: btn.textContent.includes('force') }),
+    });
+    ocRenderInstall(r.install);
+    ocPollInstall();
+  } catch (e) {
+    $('oc-install-status').textContent = `发起失败：${e.message}`;
+    $('oc-install-status').style.color = '#f0883e';
+  }
+});
+
 function initPolling() {
   setInterval(async () => {
     try {
@@ -2236,6 +2619,26 @@ function renderSynthesis(text, entities) {
   });
 }
 
+// 属性过滤：应用/清除后重建图（过滤仅影响画布显示，数据保持完整）
+$('af-apply').addEventListener('click', () => {
+  const key = $('af-key').value.trim();
+  if (!key) return toast('请先输入属性键', true);
+  const op = $('af-op').value;
+  const value = $('af-value').value.trim();
+  if ((op === 'gt' || op === 'lt') && !Number.isFinite(Number(value))) return toast('大于/小于条件需要填写数字', true);
+  if (op !== 'exists' && value === '') return toast('请输入比较值', true);
+  state.attrFilter = { key, op, value };
+  const n = attrMatchEnts(state.entities).length;
+  $('af-status').textContent = `匹配 ${n} / ${state.entities.length} 个实体`;
+  rebuildGraph();
+});
+$('af-clear').addEventListener('click', () => {
+  state.attrFilter = null;
+  $('af-key').value = ''; $('af-value').value = '';
+  $('af-status').textContent = '';
+  rebuildGraph();
+});
+
 async function loadSearchStatus() {
   try {
     const [st, cfg] = await Promise.all([api('/api/embeddings/status'), api('/api/embeddings/settings')]);
@@ -2249,12 +2652,21 @@ async function loadSearchStatus() {
 function renderSearchResults(r) {
   $('s-mode').textContent = r.mode === 'hybrid' ? '语义+关键词融合' : '仅关键词（未配置key或未建向量）';
   if (!r.results.length) { $('s-results').innerHTML = '<div class="kv" style="margin-top:8px">无匹配结果</div>'; return; }
-  $('s-results').innerHTML = r.results.map((x, i) => `
+  state._lastSearchIds = r.results.map((x) => x.entity.id);
+  $('s-results').innerHTML = `<div class="row" style="margin-bottom:6px"><button class="ghost" id="s-hi-all">全部高亮（${r.results.length} 个实体及互相关系）</button><button class="ghost" id="s-hi-clear">清除高亮</button></div>` +
+    r.results.map((x, i) => `
     <div class="list-item" style="cursor:pointer" onclick="focusEntity(${x.entity.id})">
       <b>${i + 1}. ${escapeHtml(x.entity.name)}</b>
       <span class="tag" style="color:${ENTITY_STYLE[x.entity.category].css};border-color:${ENTITY_STYLE[x.entity.category].css}55">${x.entity.category}</span>
       <div class="kv">语义 ${x.semantic_score ?? '—'}　关键词 ${x.keyword_score ?? '—'}　RRF ${x.rrf_score}　关联 ${x.hit_relations} 条</div>
     </div>`).join('');
+  $('s-hi-all').addEventListener('click', () => {
+    const ids = new Set(state._lastSearchIds || []);
+    const rels = new Set(state.relations.filter((x) => ids.has(x.source_id) && ids.has(x.target_id)).map((x) => x.id));
+    applyCanvasHi(ids, rels);
+    toast(`已高亮 ${ids.size} 个实体、${rels.size} 条互相关系`);
+  });
+  $('s-hi-clear').addEventListener('click', () => clearCanvasHi());
 }
 
 // 智能提问设置：启动时读综述开关，变更即保存
@@ -2430,6 +2842,28 @@ $('btn-resetview').addEventListener('click', () => {
   controls.target.set(0, 0, 0);
 });
 
+// PNG快照：2倍像素比渲染一帧后立即读取画布（WebGL默认帧缓冲渲染即清空，须同步toDataURL）
+$('btn-screenshot').addEventListener('click', () => {
+  const w = renderer.domElement.clientWidth, h = renderer.domElement.clientHeight;
+  const oldPr = renderer.getPixelRatio();
+  try {
+    renderer.setPixelRatio(2);
+    renderer.setSize(w, h, false);
+    renderer.render(scene, camera);
+    const url = renderer.domElement.toDataURL('image/png');
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `kg-snapshot-${new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-')}.png`;
+    a.click();
+    toast(`已保存截图（${w * 2}x${h * 2}）`);
+  } catch (e) {
+    toast('截图失败: ' + e.message, true);
+  } finally {
+    renderer.setPixelRatio(oldPr);
+    renderer.setSize(w, h, false);
+  }
+});
+
 (async function boot() {
   resize();
   try {