local-knowledge-graph 1.5.0 → 1.6.1

package/HELP.md

@@ -72,6 +72,7 @@ kg
 - **语义检索**：配置硅基流动 API Key 后支持语义+关键词混合检索（未配置时自动退化为关键词模式）
 - **最短路径 / 中心子图 / 推理**：挖掘实体间关联链路、层级范围与隐性关系
 - **撤销**：Ctrl+Z 或按钮，可连续撤销
+- **浅色主题**：视图设置 → 界面主题 → 浅色，整站配色与 3D 画布同步切换，选择本地记忆
 - **保存点与回溯**：版本页签打保存点，随时回滚；每次保存点自动滚动备份到 `data/backups/`
 - **图片绑定**：实体信息卡上传本地图片
 - **导出**：RDF(Turtle)、整库 .db、单文件只读网页版
@@ -96,11 +97,17 @@ kg
 **Q：数据会上传到云端吗？**
 图谱数据只存在本机。仅当你在"检索"页签配置了语义检索 API Key 时，检索向量化的文本片段才会发往你配置的模型服务；OpenCode 补全公开知识时按其自身机制联网。其余全部本地完成。
 
+**Q：GitHub 仓库和 npm 包版本如何保持一致？**
+仓库内置 GitHub Actions（`.github/workflows/publish.yml`）：只要推送 `v*` 格式的标签，流水线会自动校验"标签版本 = package.json 版本"→ 跑全部测试 → 发布 npm → 创建 GitHub Release。即：改 package.json 版本 → 提交 → 打同名 tag → push，两端自动同步，人工只需打一次标签。
+
 **Q：如何回滚某次误操作？**
 优先用「撤销」（可连续）；需要回到更早状态时在"版本"页签回溯到对应保存点。
 
 ## 版本历史摘要
 
+- **v1.6.1**：修复浅色主题切换导致画布空白的问题；标题栏按钮防挤压（窄屏可横滑）；修复3D样式主题刷新后不恢复的问题；新增脚本异常提示
+- **v1.6.0**：界面主题新增浅色配色（视图设置一键切换，本地记忆）；GitHub 仓库与 npm 包通过 Actions 自动同步（打 tag 即测试+发布+Release）
+
 - **v1.5.0**：npm 包化（`npm i -g local-knowledge-graph` + `kg` 一键安装启动）；数据目录迁至用户目录（升级无损）；应用内更新支持 npm 与 git 双模式
 
 - **v1.4.0**：设置与帮助面板内置版本号、检查更新、一键更新；项目目录新增本帮助文档

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "local-knowledge-graph",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "description": "本地知识图谱整合器：3D可视化 + AI对话建图 + 智能检索 + Git回溯 + RDF合规，全流程本地运行",
   "main": "server.js",
   "bin": {

package/public/app.js

@@ -111,6 +111,35 @@ function makeRingSprite(cssColor, isCenter) {
   return sprite;
 }
 
+/* ================= 界面主题（深色/浅色，独立于3D样式主题） ================= */
+const UI_THEME_KEY = 'kg_ui_theme_v1';
+const UI_THEMES = {
+  dark: { grid1: 0x1c2a47, grid2: 0x141e35 },
+  light: { grid1: 0xb7c6dd, grid2: 0xcdd9ea },
+};
+let UI_THEME = 'dark';
+try { if (localStorage.getItem(UI_THEME_KEY) === 'light') UI_THEME = 'light'; } catch (_) {}
+document.documentElement.dataset.theme = UI_THEME;
+
+function applyUiTheme(mode) {
+  UI_THEME = UI_THEMES[mode] ? mode : 'dark';
+  document.documentElement.dataset.theme = UI_THEME;
+  try { localStorage.setItem(UI_THEME_KEY, UI_THEME); } catch (_) {}
+  if (typeof scene !== 'undefined' && typeof grid !== 'undefined' && grid) {
+    const t = UI_THEMES[UI_THEME];
+    scene.remove(grid);
+    if (typeof grid.dispose === 'function') grid.dispose(); // three r128 GridHelper 无 dispose
+    grid = new THREE.GridHelper(480, 48, t.grid1, t.grid2);
+    grid.position.y = -60;
+    scene.add(grid);
+  }
+}
+
+/* 启动期兜底：任何未捕获异常立刻弹出提示，避免画布空白却无感知 */
+window.addEventListener('error', (e) => {
+  try { toast('脚本异常: ' + (e.message || '未知错误'), 6000); } catch (_) {}
+});
+
 /* ================= Three.js 场景 ================= */
 const wrap = $('canvas-wrap');
 const scene = new THREE.Scene();
@@ -129,9 +158,13 @@ scene.add(new THREE.AmbientLight(0xffffff, 0.55));
 const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
 dirLight.position.set(120, 200, 100);
 scene.add(dirLight);
-const grid = new THREE.GridHelper(480, 48, 0x1c2a47, 0x141e35);
+let grid = new THREE.GridHelper(480, 48, 0x1c2a47, 0x141e35);
 grid.position.y = -60;
 scene.add(grid);
+applyUiTheme(UI_THEME); // 按存储的主题重建网格（CSS背景经 data-theme 生效）
+
+const savedTheme = loadTheme();
+if (savedTheme && applyTheme(savedTheme)) { /* 启动时恢复用户保存的3D样式主题 */ }
 
 let nodeGroup = new THREE.Group();
 let linkGroup = new THREE.Group();
@@ -1292,6 +1325,13 @@ function renderStylePanel() {
     </div>`).join('');
   p.innerHTML = `
     <h4>视图设置<span id="style-close" title="关闭">x</span></h4>
+    <div class="style-sec">界面主题</div>
+    <div class="style-row"><span class="sname">配色</span>
+      <select id="ui-theme-select" style="flex:1">
+        <option value="dark">深色（默认）</option>
+        <option value="light">浅色</option>
+      </select>
+    </div>
     <div class="style-sec">实体 · 颜色 / 大小倍率</div>${entRows}
     <div class="style-sec">关系 · 颜色 / 虚线 / 段长 / 间隔 / 不透明度</div>${relRows}
     <div class="row">
@@ -1300,8 +1340,13 @@ function renderStylePanel() {
     </div>
     <div class="hint-text">修改即时生效并应用于3D画布与图例；「保存主题」写入浏览器本地存储。受WebGL限制线宽恒为1px，虚线可通过段长/间隔调节密度。</div>`;
   $('style-close').addEventListener('click', () => $('style-panel').classList.remove('show'));
+  const themeSel = $('ui-theme-select');
+  themeSel.value = UI_THEME;
+  themeSel.addEventListener('change', () => { applyUiTheme(themeSel.value); toast(themeSel.value === 'light' ? '已切换浅色主题' : '已切换深色主题'); });
   $('style-save').addEventListener('click', () => {
-    localStorage.setItem(THEME_KEY, JSON.stringify(currentThemeJson()));
+    const t = currentThemeJson();
+    localStorage.setItem(THEME_KEY, JSON.stringify(t));
+    applyTheme(t);
     toast('主题已保存到本地');
   });
   $('style-reset').addEventListener('click', () => {

package/public/style.css

@@ -12,9 +12,10 @@
     height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 14px;
     background: #101728; border-bottom: 1px solid #1e2a44; flex-shrink: 0;
   }
-  header h1 { font-size: 15px; font-weight: 600; color: #7fd1ff; letter-spacing: 1px; }
+  header h1 { font-size: 15px; font-weight: 600; color: #7fd1ff; letter-spacing: 1px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   header .spacer { flex: 1; }
   header .badge { font-size: 11px; color: #8fa3c0; border: 1px solid #2a3a5c; border-radius: 10px; padding: 2px 9px; }
+  header button, header .badge { flex-shrink: 0; }
   header .badge.ok { color: #7ee787; border-color: #2ea04366; }
   header .badge.off { color: #f0883e; border-color: #f0883e66; }
 
@@ -277,13 +278,15 @@
     /* 主题设置移动端可达：按钮保留，面板收窄为屏幕内浮层 */
     #style-panel { max-width: calc(100vw - 16px); width: 288px; top: 8px; right: 8px; }
 
-    /* 隐藏大标题，所有功能按钮单行排布，最大化画布显示范围 */
+    /* 隐藏大标题，所有功能按钮单行排布，最大化画布显示范围；
+       按钮过多时允许横向滑动兜底（360px以下窄屏），滚动条隐藏 */
     header {
-      flex-wrap: nowrap; height: 44px; padding: 0 6px; gap: 4px;
-      overflow: hidden;
+      flex-wrap: nowrap; height: 44px; padding: 0 6px; gap: 3px;
+      overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
     }
+    header::-webkit-scrollbar { display: none; }
     header h1 { display: none; }
-    header button { padding: 5px 7px; font-size: 11px; flex-shrink: 0; min-width: 0; }
+    header button { padding: 5px 6px; font-size: 11px; flex-shrink: 0; min-width: 0; }
     #btn-export { display: none; } /* 导出RDF移入文件菜单 */
     #stat-badge, #agent-badge { display: none; }
 
@@ -372,3 +375,112 @@
   @media (max-width: 768px) {
     #help-panel { width: calc(100vw - 24px); right: 12px; }
   }
+
+  /* ================= 浅色主题（html[data-theme="light"]） ================= */
+  html[data-theme="light"] body { background: #f2f6fc; color: #22304c; }
+  html[data-theme="light"] header { background: #ffffff; border-bottom-color: #dfe7f2; }
+  html[data-theme="light"] header h1 { color: #0b66c3; }
+  html[data-theme="light"] header .badge { color: #5a6c8c; border-color: #c9d6ea; }
+  html[data-theme="light"] header .badge.ok { color: #1a7f42; border-color: #8fd4a866; }
+  html[data-theme="light"] header .badge.off { color: #b25f0a; border-color: #e8b47866; }
+  html[data-theme="light"] button { background: #eaf1fb; color: #1f3f6e; border-color: #b9cfe9; }
+  html[data-theme="light"] button:hover { background: #d9e8fa; }
+  html[data-theme="light"] button.primary { background: #1f6feb; border-color: #388bfd; color: #ffffff; }
+  html[data-theme="light"] button.primary:hover { background: #2b7bff; }
+  html[data-theme="light"] button.danger { background: #fdeef2; border-color: #f0c2cd; color: #b3405a; }
+  html[data-theme="light"] button.danger:hover { background: #fadde5; }
+  html[data-theme="light"] #backdrop { background: rgba(30, 45, 70, 0.35); }
+  html[data-theme="light"] .panel { background: #ffffff; border-right-color: #dfe7f2; }
+  html[data-theme="light"] .panel.right { border-left-color: #dfe7f2; }
+  html[data-theme="light"] .tabs { border-bottom-color: #dfe7f2; }
+  html[data-theme="light"] .tabs div { color: #5a6c8c; }
+  html[data-theme="light"] .tabs div.active { color: #0b66c3; border-bottom-color: #1f6feb; background: #eaf3ff; }
+  html[data-theme="light"] #btn-inference.active { background: #f1eafa; border-color: #7c4dbc; color: #7c4dbc; }
+  html[data-theme="light"] .tabbody::-webkit-scrollbar-thumb, html[data-theme="light"] .messages::-webkit-scrollbar-thumb { background: #c4d3e8; }
+  html[data-theme="light"] .card { background: #f7fafd; border-color: #e2eaf5; }
+  html[data-theme="light"] .card h3 { color: #48608a; }
+  html[data-theme="light"] label { color: #5a6c8c; }
+  html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea {
+    background: #ffffff; border-color: #c9d6ea; color: #22304c;
+  }
+  html[data-theme="light"] .list-item { background: #ffffff; border-color: #e2eaf5; }
+  html[data-theme="light"] .list-item .name { color: #22304c; }
+  html[data-theme="light"] .list-item .sub { color: #7286a8; }
+  html[data-theme="light"] #canvas-wrap { background: radial-gradient(ellipse at center, #f2f6fc 0%, #dde8f5 100%); }
+  html[data-theme="light"] .legend { background: rgba(255, 255, 255, 0.88); border-color: #d5e1f0; color: #4a5f85; }
+  html[data-theme="light"] .legend b { color: #22304c; }
+  html[data-theme="light"] #info-card { background: rgba(255, 255, 255, 0.95); border-color: #c9d6ea; }
+  html[data-theme="light"] #info-card h4 { color: #0b66c3; }
+  html[data-theme="light"] #info-card .kv { color: #4a5f85; }
+  html[data-theme="light"] #info-card .kv b { color: #22304c; }
+  html[data-theme="light"] #empty-hint { color: #8aa0c4; }
+  html[data-theme="light"] #ego-bar { background: rgba(255, 255, 255, 0.95); border-color: #c9d6ea; }
+  html[data-theme="light"] #ego-bar .ego-name { color: #a06b00; }
+  html[data-theme="light"] #ego-bar label { color: #5a6c8c; }
+  html[data-theme="light"] #ego-bar .ego-hint { color: #8598b8; }
+  html[data-theme="light"] #img-grid img { border-color: #c9d6ea; background: #ffffff; }
+  html[data-theme="light"] #lightbox { background: rgba(240, 245, 252, 0.94); }
+  html[data-theme="light"] #lightbox img { background: #ffffff; }
+  html[data-theme="light"] #lightbox figcaption { color: #22304c; }
+  html[data-theme="light"] #lightbox .lb-close { background: rgba(255, 255, 255, 0.92); }
+  html[data-theme="light"] .msg .who { color: #7286a8; }
+  html[data-theme="light"] .msg .bubble { background: #f7fafd; border-color: #e2eaf5; }
+  html[data-theme="light"] .msg.user .bubble { background: #eaf3ff; border-color: #bcd7f7; }
+  html[data-theme="light"] .chip { background: #e6f7ec; color: #1a7f42; border-color: #8fd4a855; }
+  html[data-theme="light"] .chip.warn { background: #fdf1e3; color: #a3620a; border-color: #e8b47855; }
+  html[data-theme="light"] .chat-input { border-top-color: #dfe7f2; }
+  html[data-theme="light"] .hint-text { color: #8598b8; }
+  html[data-theme="light"] #file-chip { background: #eaf3ff; border-color: #9fc1ea; }
+  html[data-theme="light"] #file-chip-name { color: #0b66c3; }
+  html[data-theme="light"] .report { color: #4a5f85; background: #f2f7fd; border-color: #e2eaf5; }
+  html[data-theme="light"] .report b { color: #1a7f42; }
+  html[data-theme="light"] .report .rerr { color: #a3620a; }
+  html[data-theme="light"] #toast { background: #ffffff; border-color: #9fc1ea; color: #22304c; box-shadow: 0 4px 16px rgba(30, 50, 80, 0.18); }
+  html[data-theme="light"] #toast.err { border-color: #f0c2cd; color: #b3405a; background: #fdf1f4; }
+  html[data-theme="light"] .log-item { border-bottom-color: #e7eef8; }
+  html[data-theme="light"] .log-item .l1 { color: #48608a; }
+  html[data-theme="light"] .log-item .l2 { color: #7286a8; }
+  html[data-theme="light"] .ver-item { background: #ffffff; border-color: #e2eaf5; }
+  html[data-theme="light"] .ver-item code { color: #0b66c3; }
+  html[data-theme="light"] .ver-item .v2 { color: #33456b; }
+  html[data-theme="light"] .ver-item .v3 { color: #7286a8; }
+  html[data-theme="light"] #style-panel, html[data-theme="light"] #help-panel,
+  html[data-theme="light"] #path-panel, html[data-theme="light"] #tooltip3d {
+    background: rgba(255, 255, 255, 0.97); border-color: #c9d6ea;
+    box-shadow: 0 4px 16px rgba(30, 50, 80, 0.16);
+  }
+  html[data-theme="light"] .style-row .sname { color: #22304c; }
+  html[data-theme="light"] .style-sec { color: #48608a; }
+  html[data-theme="light"] .hp-head span:last-child:hover { color: #22304c; }
+  html[data-theme="light"] .hp-body h3 { color: #0b66c3; border-bottom-color: #e2eaf5; }
+  html[data-theme="light"] .hp-p, html[data-theme="light"] .hp-list { color: #33456b; }
+  html[data-theme="light"] .hp-list b { color: #22304c; }
+  html[data-theme="light"] .hp-line { color: #5a6c8c; }
+  html[data-theme="light"] .upd-box { border-color: #e2eaf5; background: #f2f7fd; }
+  html[data-theme="light"] .upd-ver { color: #22304c; }
+  html[data-theme="light"] .upd-ver b { color: #0b66c3; }
+  html[data-theme="light"] .upd-status { color: #5a6c8c; }
+  html[data-theme="light"] .ask-chip { border-color: #c9d6ea; color: #4a5f85; background: #eef3fa; }
+  html[data-theme="light"] .ask-chip.ok { border-color: #8fd4a8; color: #1a7f42; background: #e6f7ec; }
+  html[data-theme="light"] .ask-chip.timeout { border-color: #e8b478; color: #a3620a; background: #fdf1e3; }
+  html[data-theme="light"] .ask-chip.err, html[data-theme="light"] .ask-chip.degraded { border-color: #f0c2cd; color: #b3405a; background: #fdeef2; }
+  html[data-theme="light"] .ask-sec { color: #5a6c8c; border-bottom-color: #e2eaf5; }
+  html[data-theme="light"] .ask-synth { color: #33456b; background: #f2f7fd; border-color: #dfe7f2; }
+  html[data-theme="light"] .syn-ref { color: #0b66c3; border-bottom-color: #0b66c388; }
+  html[data-theme="light"] .tooltip3d, html[data-theme="light"] #tooltip3d { color: #22304c; }
+  html[data-theme="light"] #tooltip3d b { color: #0b66c3; }
+  html[data-theme="light"] #tooltip3d .tt-cat { color: #5a6c8c; }
+  html[data-theme="light"] #tooltip3d .tt-attr { color: #48608a; }
+  html[data-theme="light"] #path-panel .p-head { color: #0b66c3; }
+  html[data-theme="light"] #path-panel .p-head #path-close { color: #5a6c8c; }
+  html[data-theme="light"] #path-panel .p-ent { background: #eaf3ff; border-color: #c9d6ea; color: #22304c; }
+  html[data-theme="light"] #path-panel .p-ent:hover { border-color: #0b66c3; }
+  html[data-theme="light"] #path-panel .p-rel { color: #5a729c; }
+  html[data-theme="light"] .log-filter select, html[data-theme="light"] .log-filter input {
+    background: #ffffff; border-color: #c9d6ea; color: #22304c;
+  }
+  html[data-theme="light"] #file-menu { background: #ffffff; border-color: #c9d6ea; box-shadow: 0 8px 24px rgba(30, 50, 80, 0.18); }
+  html[data-theme="light"] #file-menu button { color: #22304c; border-bottom-color: #edf2f9; }
+  html[data-theme="light"] #file-menu button:active { background: #eaf3ff; }
+  html[data-theme="light"] .m-btn { background: #eaf3ff; }
+  html[data-theme="light"] #m-legend { background: rgba(255, 255, 255, 0.92); }