dsh-data-domain-knowledge 0.1.0-alpha.2 → 0.1.0-alpha.4

package/src/client/asset-images.ts

@@ -0,0 +1,125 @@
+/**
+ * 正文里的图片引用 → 能加载的 URL，以及反向的「正文引用了哪几张图」。
+ *
+ * 服务端在详情里把每一张真图放在 `assets` 里（`rel` 相对知识库根、`url` 是
+ * `/knowledge/assets/...`），而正文里写的是**相对文件自己**的引用
+ * （`_assets/<bucket>/img-xxx.png`，或 `../../01_source_raw/_assets/...`）。
+ * 两者不是同一个字符串，所以要认三种写法：
+ *
+ * 1. 整段相对路径相等（`rel === clean`）；
+ * 2. 以它为结尾（`rel.endsWith('/' + clean)`）—— 覆盖 `01_source_raw/_assets/...`；
+ * 3. 退到文件名（`img-xxx.png`）—— 覆盖 `_assets/<bucket>/img-xxx.png` 与
+ *    `../../01_source_raw/_assets/<bucket>/img-xxx.png`。
+ *
+ * 都认不出来就交回 `null`，由渲染器显示 alt 文字 —— 显示一个坏图比显示「这张图没认出来」
+ * 更糟。
+ *
+ * 为什么单独一个模块：面板抽屉（平台 `MarkdownText` 的 `pathImages`）与独立整页
+ * （`LocalMarkdown` 的 `resolveImage`）**必须给同一个答案**。两处各写一遍，
+ * 就会出现「整页能看图、抽屉看不到图」这种漂移 —— 0047 实机就是这样：抽屉压根没接
+ * 这个解析器，正文里的图被浏览器按 GUI 的地址解析成 `/_assets/...`，全是 404。
+ *
+ * 0049 又加了相反方向的一问（`referencedRelsOf`）：抽屉要把正文与图片摆成一份内容，
+ * 就得知道**哪几张图正文里没提到** —— 提到过的就地渲染，没提到的排在正文末尾。
+ * 两个方向的判据必须逐字相同，所以共用 `matchAsset`。
+ */
+
+export interface AssetRef {
+  rel: string
+  bytes: number
+  url: string
+}
+
+export type ImageResolver = (source: string) => string | null
+
+/** 预建的两张查找表。同一个 `assets` 会被反复问，所以索引建一次。 */
+export interface AssetIndex {
+  byRel: Map<string, AssetRef>
+  byName: Map<string, AssetRef>
+}
+
+export function assetIndexOf(assets: AssetRef[]): AssetIndex {
+  const byRel = new Map<string, AssetRef>()
+  const byName = new Map<string, AssetRef>()
+  for (const asset of assets) {
+    byRel.set(asset.rel, asset)
+    const name = asset.rel.split('/').pop() ?? ''
+    // 先到先得：同名不同桶时保持确定性，不让遍历顺序决定谁赢。
+    if (name !== '' && !byName.has(name)) byName.set(name, asset)
+  }
+  return { byRel, byName }
+}
+
+/** 一个正文引用对应哪张真图。三条判据见模块头。 */
+export function matchAsset(source: string, index: AssetIndex): AssetRef | undefined {
+  if (/^(?:https?:|data:)/i.test(source)) return undefined
+  const clean = source.replace(/^\.\//, '').replace(/^\/+/, '')
+  const exact = index.byRel.get(clean)
+  if (exact !== undefined) return exact
+  for (const [rel, asset] of index.byRel) if (rel.endsWith(`/${clean}`)) return asset
+  return index.byName.get(clean.split('/').pop() ?? '')
+}
+
+/**
+ * 把资产 URL 变成**带协议**的绝对地址。
+ *
+ * 这不是美化，是平台渲染器的硬要求：`MarkdownText` 的 `pathImages.resolve` 返回值要过
+ * `vocabularyImageUrl` —— 它只认 `http:` / `https:` / `blob:` / `data:` 或
+ * `dsh-app://` 开头的地址，其余一律判为「不可显示」，正文里的图就退化成 alt 文字。
+ *
+ * 0047 之后抽屉里的图一直是**这样坏着的**：服务端给的 `url` 是
+ * `/knowledge/assets/default/01_source_raw/_assets/...`（根相对路径），`new URL()`
+ * 没有 base 会抛错 → 返回 undefined → 正文里只剩「图片」两个字，而真图全挤在正文
+ * 末尾那块素材区里（那里用的是裸 `<img src>`，不受这条限制）。2026-09-27 实测确认。
+ *
+ * `file://` 打开整页时没有可用的 origin，那时保持原样（裸 `<img src>` 认相对路径）。
+ */
+export function absoluteAssetUrl(url: string, origin?: string): string {
+  if (/^(?:https?:|data:|blob:|dsh-app:)/i.test(url)) return url
+  const base = origin ?? (typeof window === 'undefined' ? undefined : window.location.origin)
+  if (base === undefined || !/^https?:\/\//i.test(base)) return url
+  try { return new URL(url, base).href } catch { return url }
+}
+
+export function imageResolverOf(assets: AssetRef[]): ImageResolver | undefined {
+  if (assets.length === 0) return undefined
+  const index = assetIndexOf(assets)
+  return (source: string): string | null => {
+    if (/^(?:https?:|data:)/i.test(source)) return source
+    const asset = matchAsset(source, index)
+    return asset === undefined ? null : absoluteAssetUrl(asset.url)
+  }
+}
+
+/**
+ * 平台 `MarkdownText` 的 `pathImages` 词汇：认不出来时返回 `undefined`（那张图留成
+ * 惰性的 alt 文字），而不是 `null`。
+ */
+export function pathImagesOf(assets: AssetRef[]): { resolve(value: string): string | undefined } | undefined {
+  const resolve = imageResolverOf(assets)
+  if (resolve === undefined) return undefined
+  return { resolve: (value: string) => resolve(value) ?? undefined }
+}
+
+/** 正文里的图片引用：`![alt](ref)`、`![alt](<ref>)` 与 `<img src="…">` 三种写法。 */
+const IMAGE_REF = /!\[[^\]]*\]\(\s*(?:<([^>]+)>|([^\s)]+))|<img[^>]*\ssrc=["']([^"']+)["']/g
+
+/**
+ * 正文里**真的引用到**的那几张图（按 `rel` 报回来）。
+ *
+ * 用它把「正文里已经画出来的图」与「正文没提到的图」分开：前者就地渲染，后者排在
+ * 正文末尾 —— 否则同一张图会在一屏里出现两次（正文一次、末尾素材区一次），
+ * 看起来像渲染重复。
+ */
+export function referencedRelsOf(content: string, assets: AssetRef[]): Set<string> {
+  const referenced = new Set<string>()
+  if (assets.length === 0) return referenced
+  const index = assetIndexOf(assets)
+  for (const match of content.matchAll(IMAGE_REF)) {
+    const source = match[1] ?? match[2] ?? match[3]
+    if (!source) continue
+    const asset = matchAsset(source, index)
+    if (asset) referenced.add(asset.rel)
+  }
+  return referenced
+}