dsh-lighthouse 0.0.0-stage → 0.3.3

package/client.js

@@ -0,0 +1,388 @@
+/**
+ * dsh-lighthouse · 客户端半 —— 「作品观察区」。
+ *
+ * 一句话：**给用户一个点开就能看的窗口** —— 每个作品现在怎么样了：
+ * 发布了没有（✅ / ⏳ / ❌）、多少星、多少人关注、有没有人留言、收录 PR 排到哪。
+ *
+ * 它只画，不算：数据全来自 host 半的只读接口 `GET /dsh-lighthouse/status`
+ * （同一个数字在面板、工具、卡片里必须一致）。
+ *
+ * 座位：
+ *   · `sidebar.panellist` —— 侧栏那个图标（组件收到 `{ size, active }`）；
+ *   · `main`（keyed = 本插件 id）—— 点图标后中间出现的那一屏。
+ *   两者的 id 必须一致 —— 侧栏就是靠这个 id 找到要切到哪个 main 面板的。
+ *
+ * 形态：Plain ModuleLoader bundle（无构建步骤），与官方插件的客户端半同构。
+ */
+window.__ModuleLoader__.load({ id: "dsh-lighthouse", factory: (require) => {
+  var module = { exports: {} }
+  var exports = module.exports
+  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" })
+
+  const react = require("react")
+  const h = react.createElement
+  const { useCallback, useEffect, useRef, useState } = react
+
+  const name = "dsh-lighthouse"
+  const inject = ["slots"]
+  const PANEL_ID = "dsh-lighthouse"
+  const ROUTE = "/dsh-lighthouse/status"
+
+  /* ------------------------------------------------------------ 小工具 */
+
+  /** 一次性注入样式，重复 apply 不叠加。 */
+  function installStyles() {
+    const id = "dsh-lighthouse-styles"
+    if (document.getElementById(id)) return
+    const node = document.createElement("style")
+    node.id = id
+    node.textContent = `
+.lh-root { padding: 18px 22px 40px; max-width: 900px; margin: 0 auto; color: inherit;
+  box-sizing: border-box; height: 100%; overflow-y: auto; }
+.lh-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
+.lh-title { font-size: 18px; font-weight: 650; margin: 0; }
+.lh-sub { font-size: 12px; opacity: .62; }
+.lh-btn { margin-left: auto; font-size: 12px; padding: 4px 10px; border-radius: 7px; cursor: pointer;
+  border: 1px solid rgba(128,128,128,.35); background: rgba(128,128,128,.08); color: inherit; }
+.lh-btn:hover { background: rgba(128,128,128,.16); }
+.lh-btn:disabled { opacity: .5; cursor: default; }
+.lh-tiles { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 18px; }
+.lh-tile { flex: 1 1 96px; min-width: 96px; border: 1px solid rgba(128,128,128,.22); border-radius: 10px; padding: 9px 12px; }
+.lh-tile b { display: block; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; }
+.lh-tile span { font-size: 11px; opacity: .62; }
+.lh-card { border: 1px solid rgba(128,128,128,.22); border-left-width: 3px; border-radius: 10px;
+  padding: 11px 14px; margin-bottom: 10px; }
+.lh-card.ok { border-left-color: #3fb950; }
+.lh-card.wait { border-left-color: #d29922; }
+.lh-card.bad { border-left-color: #f85149; }
+.lh-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
+.lh-name { font-size: 13.5px; font-weight: 650; font-family: ui-monospace, Consolas, monospace; }
+.lh-zh { font-size: 11.5px; opacity: .72; }
+.lh-link { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(128,128,128,.55); }
+.lh-link:hover { color: #58a6ff; border-bottom-color: #58a6ff; }
+.lh-tag { font-size: 10.5px; opacity: .58; border: 1px solid rgba(128,128,128,.3); border-radius: 999px; padding: 0 7px; }
+.lh-line { font-size: 12.5px; margin-top: 4px; display: flex; gap: 12px; flex-wrap: wrap; }
+.lh-k { opacity: .58; }
+.lh-num { font-variant-numeric: tabular-nums; font-weight: 600; }
+.lh-state { font-size: 12px; }
+.lh-dim { opacity: .55; }
+.lh-err { color: #f85149; font-size: 12.5px; margin: 8px 0; }
+.lh-empty { opacity: .6; font-size: 13px; padding: 24px 0; text-align: center; }
+.lh-fx { position: fixed; inset: 0; width: 100vw; height: 100vh;
+  pointer-events: none; z-index: 9999; }
+`
+    document.head.appendChild(node)
+  }
+
+  /** 小时 → 人话。 */
+  function hoursText(hours) {
+    if (!Number.isFinite(hours)) return "?"
+    if (hours < 1) return Math.round(hours * 60) + " 分钟"
+    if (hours < 48) return hours.toFixed(1) + " 小时"
+    return (hours / 24).toFixed(1) + " 天"
+  }
+
+  /** ISO 时间 → MM-DD HH:mm。 */
+  function shortTime(iso) {
+    if (typeof iso !== "string" || iso === "") return "—"
+    const d = new Date(iso)
+    if (Number.isNaN(d.getTime())) return "—"
+    const p = (n) => String(n).padStart(2, "0")
+    return p(d.getMonth() + 1) + "-" + p(d.getDate()) + " " + p(d.getHours()) + ":" + p(d.getMinutes())
+  }
+
+  /* --------------------------------------------------------------- 取数 */
+
+  /**
+   * 拉一次状态。只读接口，失败就把原因原样显示出来（不编数字）。
+   */
+  function useStatus() {
+    const [state, setState] = useState({ loading: true, report: null, error: null, at: 0 })
+    const load = useCallback(function () {
+      setState(function (prev) { return { ...prev, loading: true } })
+      fetch(ROUTE, { credentials: "same-origin", cache: "no-store" })
+        .then(function (res) { return res.json() })
+        .then(function (json) {
+          if (json && json.ok === true) {
+            setState({ loading: false, report: json.report, error: null, at: Date.now() })
+          } else {
+            const why = (json && json.errors ? json.errors.join("；") : (json && json.error) || "读不到")
+            setState({ loading: false, report: null, error: why, at: Date.now() })
+          }
+        })
+        .catch(function (err) {
+          setState({ loading: false, report: null, error: String((err && err.message) || err), at: Date.now() })
+        })
+    }, [])
+    useEffect(function () { load() }, [load])
+    return { ...state, reload: load }
+  }
+
+  /* --------------------------------------------------------------- 组件 */
+
+  /** 侧栏图标：一座灯塔。 */
+  function PanelIcon() {
+    return h("svg", {
+      width: 16, height: 16, viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true",
+    },
+      h("path", { d: "M7.1 1.2h1.8v1.5l1.1.6.7 2.9H5.3l.7-2.9 1.1-.6V1.2z" }),
+      h("path", { d: "M1.6 4.3 4 5.5l-.5 1.1L1 5.5l.6-1.2zm12.8 0 .6 1.2-2.5 1.1-.5-1.1 2.4-1.2z" }),
+      h("path", { d: "M5.1 7.4h5.8l1.3 7.4H3.8l1.3-7.4z" }),
+      h("path", { d: "M6.2 9.2h3.6v1.1H6.2V9.2z", fill: "rgba(0,0,0,.35)" })
+    )
+  }
+
+  /** 一个数字格。 */
+  function Tile(props) {
+    return h("div", { className: "lh-tile" },
+      h("b", null, String(props.value)),
+      h("span", null, props.label)
+    )
+  }
+
+  /**
+   * 一个作品一张卡。**状态用图标说话**：
+   * 已发布 ✅；收录/PR 还在路上 ⏳；读不到 ❌（并写出原因）。
+   */
+  function WorkCard(props) {
+    const item = props.item
+    const work = item.work || {}
+    const local = item.local || {}
+    const gh = item.github || {}
+    const market = item.market || {}
+    const released = gh.exists === true
+    const listed = market.listed === true
+    const pr = gh.pr
+    const cls = listed ? "lh-card ok" : (released ? "lh-card wait" : "lh-card bad")
+
+    const stateLine = []
+    stateLine.push(h("span", { key: "rel", className: "lh-state" },
+      released ? "✅ 已发布" : (gh.exists === false ? "❌ 仓库不存在" : "❌ 读不到仓库")))
+    stateLine.push(h("span", { key: "mk", className: "lh-state" },
+      listed
+        ? "✅ 市场已收录" + (market.downloads !== undefined ? "（下载 " + market.downloads + "）" : "")
+        : (market.available === true ? "⏳ 收录中" : "❌ 市场读不到")))
+    if (pr) {
+      const waited = (Date.now() - Date.parse(pr.createdAt)) / 3600000
+      stateLine.push(h("span", { key: "pr", className: "lh-state" },
+        pr.mergedAt
+          ? "✅ PR #" + pr.number + " 已合并"
+          : (pr.state === "open" ? "⏳ PR #" + pr.number + " 等 " + hoursText(waited) : "· PR #" + pr.number + " " + pr.state)))
+    } else {
+      stateLine.push(h("span", { key: "nopr", className: "lh-state lh-dim" }, "· 没有收录 PR"))
+    }
+
+    // 中文名（名册 nameZh 优先）+ 直达链接（GitHub；有市场条目页就再给一个）
+    const zh = (work && work.nameZh) || (local && local.displayName) || ""
+    const link = (item.links && item.links.github) || null
+    const marketLink = (item.links && item.links.market) || null
+
+    return h("div", { className: cls },
+      h("div", { className: "lh-row" },
+        link
+          ? h("a", { className: "lh-name lh-link", href: link, target: "_blank", rel: "noreferrer" }, work.name || "?")
+          : h("span", { className: "lh-name" }, work.name || "?"),
+        zh ? h("span", { className: "lh-zh" }, zh) : null,
+        work.category ? h("span", { className: "lh-tag" }, work.category) : null,
+        marketLink
+          ? h("a", { className: "lh-zh lh-link", href: marketLink, target: "_blank", rel: "noreferrer", title: "市场条目页" }, "市场 →")
+          : null,
+        h("span", { className: "lh-sub", style: { marginLeft: "auto" } },
+          "本地 " + (local.available === true ? (local.version || "?") + " · " + (local.files || 0) + " 文件" : "读不到"))
+      ),
+      h("div", { className: "lh-line" },
+        h("span", null, h("span", { className: "lh-k" }, "⭐ 星 "), h("span", { className: "lh-num" }, String(gh.stars || 0))),
+        h("span", null, h("span", { className: "lh-k" }, "👁 关注 "), h("span", { className: "lh-num" }, String(gh.watchers || 0))),
+        h("span", null, h("span", { className: "lh-k" }, "💬 留言 "), h("span", { className: "lh-num" }, String(gh.openIssues || 0))),
+        h("span", null, h("span", { className: "lh-k" }, "最后推送 "), h("span", null, shortTime(gh.pushedAt)))
+      ),
+      h("div", { className: "lh-line" }, stateLine)
+    )
+  }
+
+  /** 观察区主体。 */
+  function WatchPanel() {
+    const { loading, report, error, at, reload } = useStatus()
+    const s = (report && report.summary) || null
+
+    /* ---------------- 刷新粒子特效：跟重启坞同款的粒子海浪 ---------------- */
+    const [fxOn, setFxOn] = useState(false)
+    const fxEndRef = useRef(null)
+    const fxCanvasRef = useRef(null)
+
+    function playFx(after) {
+      fxEndRef.current = typeof after === "function" ? after : null
+      setFxOn(true)
+    }
+
+    // 调试入口：不用点刷新也能放一次特效
+    useEffect(function () {
+      const trigger = function () { playFx() }
+      window.__dshLighthouseFx = trigger
+      return function () {
+        if (window.__dshLighthouseFx === trigger) delete window.__dshLighthouseFx
+      }
+    }, [])
+
+    useEffect(function () {
+      if (!fxOn) return undefined
+      const canvas = fxCanvasRef.current
+      if (!canvas) { setFxOn(false); return undefined }
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      const W = window.innerWidth
+      const H = window.innerHeight
+      canvas.width = Math.round(W * dpr)
+      canvas.height = Math.round(H * dpr)
+      const ctx = canvas.getContext("2d")
+      if (!ctx) { setFxOn(false); return undefined }
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+
+      const DURATION = 2000
+      const TAU = Math.PI * 2
+      const diag = Math.hypot(W, H)
+      const dirX = W / diag
+      const dirY = H / diag
+      const STEP = 22
+      const KEEP = 0.22
+      const parts = []
+      for (let y = -STEP; y < H + STEP; y += STEP) {
+        for (let x = -STEP; x < W + STEP; x += STEP) {
+          if (Math.random() > KEEP) continue
+          parts.push({
+            x: x + (Math.random() - 0.5) * STEP * 0.9,
+            y: y + (Math.random() - 0.5) * STEP * 0.9,
+            s: (x * dirX + y * dirY) / diag,
+            jitter: 0.55 + Math.random() * 0.45,
+            hue: 194 + Math.random() * 42,
+          })
+        }
+      }
+
+      let raf = 0
+      let finished = false
+      const begin = performance.now()
+
+      const frame = function (now) {
+        if (finished) return
+        const t = Math.min(1, (now - begin) / DURATION)
+        if (t >= 1) {
+          finished = true
+          ctx.clearRect(0, 0, W, H)
+          const cb = fxEndRef.current
+          fxEndRef.current = null
+          setFxOn(false)
+          if (typeof cb === "function") cb()
+          return
+        }
+        ctx.clearRect(0, 0, W, H)
+        ctx.globalCompositeOperation = "lighter"
+        const travel = t * 3
+        for (const q of parts) {
+          const phase = q.s * TAU * 2.2 - travel * TAU * 0.55
+          const wave =
+            Math.sin(phase) * 0.62 +
+            Math.sin(phase * 1.93 + 1.7) * 0.26 +
+            Math.sin(phase * 0.47 + 3.1) * 0.12
+          if (wave <= 0) continue
+          const lum = Math.pow(wave, 1.9) * q.jitter
+          if (lum <= 0.02) continue
+          const depth = 0.75 + q.s * 0.55
+          const size = (1.1 + lum * 6.4) * depth
+          const light = 58 + lum * 38
+          const arm = size * (1.7 + lum * 1.7)
+          const thick = Math.max(1.0, size * 0.46)
+          if (lum > 0.35) {
+            ctx.globalAlpha = Math.min(0.34, lum * 0.3)
+            ctx.fillStyle = "hsl(" + q.hue + " 100% 78%)"
+            ctx.beginPath()
+            ctx.arc(q.x, q.y, arm * 0.85, 0, TAU)
+            ctx.fill()
+          }
+          ctx.globalAlpha = Math.min(1, lum * 1.75)
+          ctx.fillStyle = "hsl(" + q.hue + " 96% " + light + "%)"
+          ctx.fillRect(q.x - arm, q.y - thick / 2, arm * 2, thick)
+          ctx.fillRect(q.x - thick / 2, q.y - arm, thick, arm * 2)
+          ctx.beginPath()
+          ctx.arc(q.x, q.y, thick * 1.15, 0, TAU)
+          ctx.fill()
+        }
+        ctx.globalAlpha = 1
+        ctx.globalCompositeOperation = "source-over"
+        raf = requestAnimationFrame(frame)
+      }
+      raf = requestAnimationFrame(frame)
+      return function () {
+        finished = true
+        cancelAnimationFrame(raf)
+      }
+    }, [fxOn])
+
+    const body = []
+    if (error !== null) {
+      body.push(h("div", { className: "lh-err", key: "err" }, "读不到：" + error))
+    }
+    if (s !== null) {
+      body.push(h("div", { className: "lh-tiles", key: "tiles" },
+        h(Tile, { key: "w", value: s.works, label: "作品" }),
+        h(Tile, { key: "p", value: s.published, label: "已发布" }),
+        h(Tile, { key: "l", value: s.listed, label: "市场已收录" }),
+        h(Tile, { key: "d", value: s.totalDownloads, label: "总下载" }),
+        h(Tile, { key: "pr", value: s.openPrs, label: "待合 PR" })
+      ))
+      const list = Array.isArray(report.works) ? report.works : []
+      for (const item of list) body.push(h(WorkCard, { key: item.work && item.work.name, item }))
+      if (list.length === 0) body.push(h("div", { className: "lh-empty", key: "empty" }, "名册里还没有作品"))
+    }
+    if (report === null && error === null && loading === true) {
+      body.push(h("div", { className: "lh-empty", key: "loading" }, "读取中…"))
+    }
+
+    return h("div", { className: "lh-root" },
+      fxOn ? h("canvas", { className: "lh-fx", ref: fxCanvasRef }) : null,
+      h("div", { className: "lh-head" },
+        h("h1", { className: "lh-title" }, "🚢 作品观察区"),
+        h("span", { className: "lh-sub" },
+          at ? "更新于 " + shortTime(new Date(at).toISOString())
+             : (report && report.generatedAt ? "数据 " + shortTime(report.generatedAt) : "")),
+        h("button", {
+          className: "lh-btn",
+          onClick: function () { if (loading === true) return; playFx(reload) },
+          disabled: loading === true,
+          type: "button",
+        },
+          loading === true ? "刷新中…" : "刷新")
+      ),
+      h("div", { className: "lh-sub", style: { marginTop: "6px" } },
+        report && report.market
+          ? "市场登记表：" + (report.market.available === true
+            ? (report.market.count || "?") + " 条（更新于 " + (report.market.updated || "?") + "）"
+            : "读不到（" + (report.market.reason || "?") + "）")
+          : "全部数字来自 GitHub API 与本机市场接口，不经模型生成。"),
+      body
+    )
+  }
+
+  /* --------------------------------------------------------------- 挂载 */
+
+  function apply(ctx) {
+    installStyles()
+    // 侧栏图标：id 就是 main 面板的 key，两者必须一致
+    ctx.slots.inject("sidebar.panellist", function () {
+      return ctx.slots.register({
+        name: "sidebar.panellist",
+        id: PANEL_ID,
+        order: 60,
+        label: function () { return "作品观察区" },
+      }, PanelIcon)
+    })
+    // 中间那一屏
+    ctx.slots.inject("main", function () {
+      return ctx.slots.register({ name: "main", key: PANEL_ID }, WatchPanel)
+    })
+  }
+
+  exports.name = name
+  exports.inject = inject
+  exports.apply = apply
+  return module.exports
+}})

package/cordis.patch.yml

@@ -0,0 +1,4 @@
+# dsh-lighthouse bundle patch: 把插件行插进 profile 名单。
+- insert:
+    - id: plugin-lighthouse
+      name: 'dsh-lighthouse'