mellos-mapping 0.23.0 → 0.25.0

package/dist/web/app.css

@@ -724,7 +724,8 @@ h2 {
   margin-left: 20px;
 }
 footer {
-  height: 29px;
+  min-height: 29px;
+  flex-wrap: wrap;
   flex-shrink: 0;
   border-top: 1px solid var(--line);
   display: flex;
@@ -919,7 +920,7 @@ dialog p {
   #app {
     display: grid;
     grid-template-columns: minmax(0, 1fr) 300px;
-    grid-template-rows: 58px auto auto minmax(0, 1fr) 29px;
+    grid-template-rows: 58px auto auto minmax(0, 1fr) auto;
   }
   header {
     grid-column: 1 / -1;
@@ -965,3 +966,106 @@ dialog p {
     grid-column: 1 / -1;
   }
 }
+
+#star-reminder {
+  --star-surface: linear-gradient(115deg, #15302e, #202341 48%, #36243b);
+  --star-text: #f2f5ff;
+  --star-muted: #c9d2e5;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px 14px;
+  margin: 4px 0 8px;
+  padding: 12px 16px;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  background: var(--star-surface) padding-box,
+    linear-gradient(110deg, #69ebc9, #8299ff, #d897ff, #ffc17d, #69ebc9) border-box;
+  background-size: 200% 100%;
+  color: var(--star-text);
+  font-size: 14px;
+  line-height: 1.5;
+  animation: star-color-flow 6s ease-in-out 2, star-glow 3s ease-in-out 4;
+}
+#star-reminder::before {
+  content: "★";
+  display: grid;
+  place-items: center;
+  flex: 0 0 36px;
+  height: 36px;
+  border: 1px solid #ffe49950;
+  border-radius: 10px;
+  background: #f9c76916;
+  color: #ffe49b;
+  font-size: 26px;
+  line-height: 1;
+  text-shadow: 0 0 14px #ffd47870;
+  animation: star-beat 3s ease-in-out 4;
+}
+#star-reminder > span { flex: 1 1 230px; font-weight: 550; }
+#star-reminder a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 36px;
+  padding: 7px 16px;
+  border: 1px solid #ffffff50;
+  border-radius: 8px;
+  background: linear-gradient(110deg, #8bf0d0, #babaff 55%, #ffd0aa);
+  color: #17243a;
+  font-size: 13px;
+  font-weight: 750;
+  line-height: 1.4;
+  text-decoration: none;
+  white-space: nowrap;
+  box-shadow: 0 2px 12px #8b96ff25;
+}
+#star-reminder a:hover { filter: brightness(1.1); }
+#star-reminder a[aria-disabled=true] { cursor: progress; opacity: .8; }
+#star-reminder .star-open-error { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--star-muted); }
+#star-reminder .star-open-error input { min-width: 0; max-width: 100%; width: 340px; padding: 6px; color: var(--star-text); background: transparent; border: 1px solid #b8c5e470; border-radius: 6px; }
+#star-reminder button {
+  min-height: 34px;
+  padding: 6px 10px;
+  border: 1px solid #b8c5e42e;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--star-muted);
+  font-size: 12px;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+#star-reminder button:hover { background: #a0b5f014; border-color: #b8c5e470; }
+#star-reminder a:focus-visible, #star-reminder button:focus-visible {
+  outline: 2px solid #b0b9ff;
+  outline-offset: 3px;
+}
+#star-reminder:hover, #star-reminder:focus-within,
+#star-reminder:hover::before, #star-reminder:focus-within::before { animation-play-state: paused; }
+[data-theme=light] #star-reminder {
+  --star-surface: linear-gradient(115deg, #e4fbf5, #eeedff 48%, #fff0e5);
+  --star-text: #263451;
+  --star-muted: #53607b;
+}
+[data-theme=light] #star-reminder::before { color: #a5660c; background: #ffe6aa80; border-color: #dbae6340; text-shadow: none; }
+@keyframes star-color-flow {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}
+@keyframes star-glow {
+  0%, 100% { box-shadow: 0 0 0 #8299ff00; }
+  50% { box-shadow: 0 0 16px #8299ff30, inset 0 0 18px #b897ff0c; }
+}
+@keyframes star-beat {
+  0%, 100% { transform: scale(1) rotate(0deg); }
+  50% { transform: scale(1.1) rotate(-7deg); }
+}
+@media (max-width: 520px) {
+  #star-reminder { padding: 12px; gap: 10px; }
+  #star-reminder > span { flex-basis: calc(100% - 50px); font-size: 13px; }
+  #star-reminder a { margin-left: 46px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  #star-reminder, #star-reminder::before { animation: none; }
+}

package/dist/web/app.js

@@ -904,6 +904,82 @@ function zoomScene(state, factor, x, y) {
   };
 }
 
+// src/web/star-reminder.ts
+function createStarNotice(base2) {
+  let attempted = false;
+  const notice = document.getElementById("star-reminder");
+  const link = notice.querySelector("a");
+  let opening = false;
+  link.title = "\u5728\u7CFB\u7EDF\u9ED8\u8BA4\u6D4F\u89C8\u5668\u4E2D\u6253\u5F00 GitHub";
+  const dismiss = () => {
+    notice.hidden = true;
+  };
+  notice.querySelector("button").addEventListener("click", dismiss);
+  const launch = async (event) => {
+    event.preventDefault();
+    if (opening) return;
+    opening = true;
+    link.setAttribute("aria-disabled", "true");
+    link.textContent = "\u6B63\u5728\u6253\u5F00\u2026";
+    notice.querySelector(".star-open-error")?.remove();
+    try {
+      const response = await fetch(new URL("api/star-reminder/open", base2), { method: "POST", signal: AbortSignal.timeout(8e3) });
+      const result = await response.json();
+      if (!response.ok || result.opened !== true) throw new Error("Not opened");
+      dismiss();
+    } catch {
+      const error = document.createElement("div");
+      error.className = "star-open-error";
+      error.setAttribute("role", "status");
+      const message = document.createElement("span");
+      message.textContent = "\u9ED8\u8BA4\u6D4F\u89C8\u5668\u672A\u80FD\u6253\u5F00\uFF0C\u53EF\u91CD\u8BD5\u6216\u590D\u5236\u5730\u5740\u3002";
+      const copy = document.createElement("button");
+      copy.type = "button";
+      copy.textContent = "\u590D\u5236 GitHub \u5730\u5740";
+      copy.addEventListener("click", () => {
+        void (async () => {
+          try {
+            await navigator.clipboard.writeText(link.href);
+            copy.textContent = "\u5DF2\u590D\u5236";
+          } catch {
+            const address = document.createElement("input");
+            address.readOnly = true;
+            address.value = link.href;
+            address.setAttribute("aria-label", "GitHub \u5730\u5740");
+            copy.replaceWith(address);
+            address.focus();
+            address.select();
+          }
+        })();
+      });
+      error.append(message, copy);
+      notice.append(error);
+    } finally {
+      opening = false;
+      link.removeAttribute("aria-disabled");
+      link.textContent = "\u53BB\u70B9 Star \u2197";
+    }
+  };
+  link.addEventListener("click", (event) => {
+    void launch(event);
+  });
+  link.addEventListener("auxclick", (event) => {
+    if (event.button === 1) void launch(event);
+  });
+  return (page) => {
+    if (attempted || document.visibilityState !== "visible") return;
+    attempted = true;
+    const url = new URL("api/star-reminder/visit", base2);
+    if (page) url.searchParams.set("page", page);
+    void fetch(url, { method: "POST", signal: AbortSignal.timeout(3e3) }).then(async (response) => {
+      if (!response.ok) return;
+      const result = await response.json();
+      if (result.show === true && document.visibilityState === "visible") notice.hidden = false;
+    }).catch(() => {
+    });
+  };
+}
+
 // src/web/app.ts
 var element = (id) => document.getElementById(id);
 var viewport = element("viewport");
@@ -913,6 +989,7 @@ var pages = element("pages");
 var search = element("search");
 var dialog = element("dialog");
 var base = new URL(".", window.location.href);
+var starNotice = createStarNotice(base);
 var kinds = { dev: "\u5F00\u53D1\u5730\u56FE", architecture: "\u67B6\u6784\u5730\u56FE", dataflow: "\u6570\u636E\u6D41", "behavior-tree": "\u884C\u4E3A\u6811", sequence: "\u65F6\u5E8F\u5730\u56FE" };
 var snapshot = { project: "", pages: [] };
 var revision = "";
@@ -1340,6 +1417,7 @@ async function poll() {
         }
         if (initial || JSON.stringify(priorPage) !== JSON.stringify(current())) render();
         else renderHeading();
+        if ((current()?.map?.nodes.length ?? 0) > 0 && !current()?.error) starNotice(currentId);
         element("updated").textContent = `\u5DF2\u540C\u6B65 ${(/* @__PURE__ */ new Date()).toLocaleTimeString("zh-CN", { hour12: false })}`;
       }
     }

package/dist/web/index.html

@@ -5,5 +5,5 @@
 <section class="map-heading"><div class="project-line"><span id="project">本地项目</span><span>/</span><span id="kind">开发地图</span></div><div class="title-row"><h1 id="title">正在读取地图…</h1><select id="pages" aria-label="切换地图页面"></select></div><div id="breadcrumbs"></div><div class="progress-row"><span id="summary"></span><div id="progress"><i></i></div><button id="follow" class="follow active" aria-pressed="true">● 自动跟随</button></div></section>
 <section class="toolbar"><label class="search"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="8" cy="8" r="5.5"/><path d="m12 12 5 5"/></svg><input id="search" placeholder="搜索模块、说明…" aria-label="搜索模块"><kbd>/</kbd></label><button id="overview" class="tool-button" aria-pressed="false">分组概览</button><button id="export" class="icon-button" title="导出 SVG" aria-label="导出 SVG">↓</button><button id="delete" class="icon-button" title="删除当前地图" aria-label="删除当前地图">×</button></section>
 <section class="canvas-shell"><div id="viewport" tabindex="0" aria-label="交互地图画布"><div id="stage"></div><div id="empty" hidden></div></div><div id="filters" class="filters" aria-label="按状态筛选"><button data-status="all" class="active">全部</button><button data-status="planned"><i class="planned"></i>待开发</button><button data-status="in-progress"><i class="in-progress"></i>进行中</button><button data-status="done"><i class="done"></i>已验证</button><button data-status="regressed"><i class="regressed"></i>回归</button><button data-status="unverified"><i class="unverified"></i>待验证</button></div><div class="zoom-controls"><button id="zoom-out" aria-label="缩小">−</button><output id="zoom-label">100%</output><button id="zoom-in" aria-label="放大">+</button><span></span><button id="fit" title="适应窗口 · 0" aria-label="适应窗口">⛶</button></div><div id="minimap" title="点击移动视口"></div><div id="match-count" role="status"></div></section>
-<div id="divider" role="separator" aria-label="调整详情高度" aria-orientation="horizontal" aria-valuemin="100" aria-valuemax="500" aria-valuenow="210" tabindex="0"><i></i></div><aside id="inspector"></aside><footer><span>滚轮缩放 · 拖动画布 · 双击进入子地图</span><span id="updated">等待同步</span></footer>
+<div id="divider" role="separator" aria-label="调整详情高度" aria-orientation="horizontal" aria-valuemin="100" aria-valuemax="500" aria-valuenow="210" tabindex="0"><i></i></div><aside id="inspector"></aside><footer><span>滚轮缩放 · 拖动画布 · 双击进入子地图</span><span id="updated">等待同步</span><aside id="star-reminder" aria-label="支持 Mellos Mapping" hidden><span>地图有帮到你？欢迎在 GitHub 点个 Star。</span><a href="https://github.com/GuangminJu/mellos-mapping" target="_blank" rel="noopener noreferrer">去点 Star ↗</a><button type="button">不再提醒</button></aside></footer>
 </main><div id="toast" role="status" hidden></div><dialog id="dialog"><h2 id="dialog-title"></h2><p id="dialog-body"></p><div class="dialog-actions"><button id="dialog-cancel">关闭</button><button id="dialog-confirm" class="danger" hidden>删除此地图</button></div></dialog></body></html>

package/dist/web/terminal.css

@@ -7,3 +7,106 @@ header{display:flex;align-items:center;justify-content:space-between;gap:12px;pa
 footer{min-height:32px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:5px 14px;border-top:1px solid #283343;color:#8c9eb5;font-size:11px}#connection{overflow-wrap:anywhere}#connection[data-state="connected"]{color:#81dbae}#connection[data-state="error"]{color:#ffaf87}.hint{margin-left:auto}[hidden]{display:none!important}
 @media(max-width:440px){.brand span{margin-left:6px}.hint{margin-left:0;width:100%}header{padding:0 10px}#terminal .xterm{padding-left:4px;padding-right:4px}}
 dialog{max-width:min(420px,90vw);border:1px solid #3b4b60;border-radius:10px;background:#151c25;color:#d9e2ed;padding:24px}dialog::backdrop{background:#0009}dialog h2{font-size:18px;margin-top:0}dialog p{line-height:1.9;font-size:13px}dialog form{text-align:right}
+
+#star-reminder {
+  --star-surface: linear-gradient(115deg, #15302e, #202341 48%, #36243b);
+  --star-text: #f2f5ff;
+  --star-muted: #c9d2e5;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px 14px;
+  margin: 4px 0 8px;
+  padding: 12px 16px;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  background: var(--star-surface) padding-box,
+    linear-gradient(110deg, #69ebc9, #8299ff, #d897ff, #ffc17d, #69ebc9) border-box;
+  background-size: 200% 100%;
+  color: var(--star-text);
+  font-size: 14px;
+  line-height: 1.5;
+  animation: star-color-flow 6s ease-in-out 2, star-glow 3s ease-in-out 4;
+}
+#star-reminder::before {
+  content: "★";
+  display: grid;
+  place-items: center;
+  flex: 0 0 36px;
+  height: 36px;
+  border: 1px solid #ffe49950;
+  border-radius: 10px;
+  background: #f9c76916;
+  color: #ffe49b;
+  font-size: 26px;
+  line-height: 1;
+  text-shadow: 0 0 14px #ffd47870;
+  animation: star-beat 3s ease-in-out 4;
+}
+#star-reminder > span { flex: 1 1 230px; font-weight: 550; }
+#star-reminder a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 36px;
+  padding: 7px 16px;
+  border: 1px solid #ffffff50;
+  border-radius: 8px;
+  background: linear-gradient(110deg, #8bf0d0, #babaff 55%, #ffd0aa);
+  color: #17243a;
+  font-size: 13px;
+  font-weight: 750;
+  line-height: 1.4;
+  text-decoration: none;
+  white-space: nowrap;
+  box-shadow: 0 2px 12px #8b96ff25;
+}
+#star-reminder a:hover { filter: brightness(1.1); }
+#star-reminder a[aria-disabled=true] { cursor: progress; opacity: .8; }
+#star-reminder .star-open-error { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--star-muted); }
+#star-reminder .star-open-error input { min-width: 0; max-width: 100%; width: 340px; padding: 6px; color: var(--star-text); background: transparent; border: 1px solid #b8c5e470; border-radius: 6px; }
+#star-reminder button {
+  min-height: 34px;
+  padding: 6px 10px;
+  border: 1px solid #b8c5e42e;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--star-muted);
+  font-size: 12px;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+#star-reminder button:hover { background: #a0b5f014; border-color: #b8c5e470; }
+#star-reminder a:focus-visible, #star-reminder button:focus-visible {
+  outline: 2px solid #b0b9ff;
+  outline-offset: 3px;
+}
+#star-reminder:hover, #star-reminder:focus-within,
+#star-reminder:hover::before, #star-reminder:focus-within::before { animation-play-state: paused; }
+[data-theme=light] #star-reminder {
+  --star-surface: linear-gradient(115deg, #e4fbf5, #eeedff 48%, #fff0e5);
+  --star-text: #263451;
+  --star-muted: #53607b;
+}
+[data-theme=light] #star-reminder::before { color: #a5660c; background: #ffe6aa80; border-color: #dbae6340; text-shadow: none; }
+@keyframes star-color-flow {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}
+@keyframes star-glow {
+  0%, 100% { box-shadow: 0 0 0 #8299ff00; }
+  50% { box-shadow: 0 0 16px #8299ff30, inset 0 0 18px #b897ff0c; }
+}
+@keyframes star-beat {
+  0%, 100% { transform: scale(1) rotate(0deg); }
+  50% { transform: scale(1.1) rotate(-7deg); }
+}
+@media (max-width: 520px) {
+  #star-reminder { padding: 12px; gap: 10px; }
+  #star-reminder > span { flex-basis: calc(100% - 50px); font-size: 13px; }
+  #star-reminder a { margin-left: 46px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  #star-reminder, #star-reminder::before { animation: none; }
+}

package/dist/web/terminal.html

@@ -2,6 +2,6 @@
 <html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Mellos · 终端地图</title><link rel="icon" href="data:,"><link rel="stylesheet" href="./xterm.css"><link rel="stylesheet" href="./terminal.css"><script type="module" src="./terminal.js"></script></head>
 <body><header><a class="brand" id="graphic" href="./" title="切换到图形地图">Mellos <span>图形地图 ↗</span></a><div class="tools"><label for="font-size">字号</label><select id="font-size" aria-label="终端字号"><option>10</option><option>11</option><option>12</option><option selected>13</option><option>14</option><option>15</option><option>16</option><option>18</option><option>20</option><option>24</option><option>28</option></select><button id="help" aria-label="操作帮助">?</button></div></header>
 <main id="terminal" aria-label="Mellos 终端地图"></main>
-<footer><span id="connection" role="status" aria-live="polite">正在连接…</span><button id="restart" hidden>重新连接</button><span class="hint">滚轮缩放 · 拖动平移 · 点击选择 · ? 帮助</span></footer>
+<footer><span id="connection" role="status" aria-live="polite">正在连接…</span><button id="restart" hidden>重新连接</button><span class="hint">滚轮缩放 · 拖动平移 · 点击选择 · ? 帮助</span><aside id="star-reminder" aria-label="支持 Mellos Mapping" hidden><span>地图有帮到你？欢迎在 GitHub 点个 Star。</span><a href="https://github.com/GuangminJu/mellos-mapping" target="_blank" rel="noopener noreferrer">去点 Star ↗</a><button type="button">不再提醒</button></aside></footer>
 <dialog id="help-dialog"><h2>终端地图操作</h2><p>滚轮 / + / −：总览 → 模块 → 细节<br>拖动：平移 · 单击：固定详情<br>双击带 ⊞ 的节点：进入子地图<br>Backspace：返回父地图<br>Tab / 数字 1–9：切换页面<br>f：自动跟随 · 0：重置视图<br>x 按两次：确认删除当前页<br>q：关闭地图，可用「重新连接」再次打开</p><p>右上角字号只影响此网页终端。</p><form method="dialog"><button>关闭帮助</button></form></dialog>
 </body></html>

package/dist/web/terminal.js

@@ -9137,6 +9137,82 @@ var o = class {
   }
 };
 
+// src/web/star-reminder.ts
+function createStarNotice(base2) {
+  let attempted = false;
+  const notice = document.getElementById("star-reminder");
+  const link = notice.querySelector("a");
+  let opening = false;
+  link.title = "\u5728\u7CFB\u7EDF\u9ED8\u8BA4\u6D4F\u89C8\u5668\u4E2D\u6253\u5F00 GitHub";
+  const dismiss = () => {
+    notice.hidden = true;
+  };
+  notice.querySelector("button").addEventListener("click", dismiss);
+  const launch = async (event) => {
+    event.preventDefault();
+    if (opening) return;
+    opening = true;
+    link.setAttribute("aria-disabled", "true");
+    link.textContent = "\u6B63\u5728\u6253\u5F00\u2026";
+    notice.querySelector(".star-open-error")?.remove();
+    try {
+      const response = await fetch(new URL("api/star-reminder/open", base2), { method: "POST", signal: AbortSignal.timeout(8e3) });
+      const result = await response.json();
+      if (!response.ok || result.opened !== true) throw new Error("Not opened");
+      dismiss();
+    } catch {
+      const error = document.createElement("div");
+      error.className = "star-open-error";
+      error.setAttribute("role", "status");
+      const message = document.createElement("span");
+      message.textContent = "\u9ED8\u8BA4\u6D4F\u89C8\u5668\u672A\u80FD\u6253\u5F00\uFF0C\u53EF\u91CD\u8BD5\u6216\u590D\u5236\u5730\u5740\u3002";
+      const copy = document.createElement("button");
+      copy.type = "button";
+      copy.textContent = "\u590D\u5236 GitHub \u5730\u5740";
+      copy.addEventListener("click", () => {
+        void (async () => {
+          try {
+            await navigator.clipboard.writeText(link.href);
+            copy.textContent = "\u5DF2\u590D\u5236";
+          } catch {
+            const address = document.createElement("input");
+            address.readOnly = true;
+            address.value = link.href;
+            address.setAttribute("aria-label", "GitHub \u5730\u5740");
+            copy.replaceWith(address);
+            address.focus();
+            address.select();
+          }
+        })();
+      });
+      error.append(message, copy);
+      notice.append(error);
+    } finally {
+      opening = false;
+      link.removeAttribute("aria-disabled");
+      link.textContent = "\u53BB\u70B9 Star \u2197";
+    }
+  };
+  link.addEventListener("click", (event) => {
+    void launch(event);
+  });
+  link.addEventListener("auxclick", (event) => {
+    if (event.button === 1) void launch(event);
+  });
+  return (page2) => {
+    if (attempted || document.visibilityState !== "visible") return;
+    attempted = true;
+    const url = new URL("api/star-reminder/visit", base2);
+    if (page2) url.searchParams.set("page", page2);
+    void fetch(url, { method: "POST", signal: AbortSignal.timeout(3e3) }).then(async (response) => {
+      if (!response.ok) return;
+      const result = await response.json();
+      if (result.show === true && document.visibilityState === "visible") notice.hidden = false;
+    }).catch(() => {
+    });
+  };
+}
+
 // src/web/terminal-app.ts
 var element = (id) => document.getElementById(id);
 var container = element("terminal");
@@ -9145,6 +9221,7 @@ var restart = element("restart");
 var font = element("font-size");
 var graphic = element("graphic");
 var base = new URL(".", location.href);
+var starNotice = createStarNotice(base);
 var page = new URL(location.href).searchParams.get("page") ?? void 0;
 var socket;
 var retryTimer;
@@ -9264,6 +9341,7 @@ function connect() {
     } else if (message.type === "view") {
       page = message.page;
       syncPage();
+      starNotice(page);
     } else if (message.type === "error") setStatus(message.message, "error");
   });
   connection.addEventListener("close", (event) => {