✨ feat(vscode): 注释里的仓库图片按比例显示

vscode/src/codeReader/editor/previewEditor.ts

@@ -12,6 +12,7 @@ import type { IndexedEntry } from '../workspaceIndex'
 import type { BlockFilter } from './blockFilter'
 import type { Definition, FoundLocation } from './definitions'
 import type { ExtensionToWebview, Occurrence, Reveal, WebviewToExtension } from './messages'
+import { realpath } from 'node:fs/promises'
 import { dirname } from 'node:path'
 import { commands, Range, Uri, window, workspace, WorkspaceEdit } from 'vscode'
 import { logger } from '../../logging/logger'
@@ -32,7 +33,7 @@ import { DefinitionSources } from './definitionSources'
 import { documentMessage } from './documentMessage'
 import { NavigationContext, OCCURRENCES_CONTEXT } from './occurrenceNavigation'
 import { occurrencesOf } from './occurrences'
-import { findRepoSymbol, repoRootOf, resolveRepoEntry } from './repoPath'
+import { findRepoSymbol, isImageFile, isRepoImagePath, repoRootOf, resolveRepoEntry } from './repoPath'
 
 export const PREVIEW_VIEW_TYPE = 'superpowers.codeReader.preview'
 
@@ -498,6 +499,9 @@ class Preview {
       case 'checkRepoLinks':
         await this.checkRepoLinks(msg.id, msg.paths)
         return
+      case 'checkRepoImages':
+        await this.checkRepoImages(msg.id, msg.paths)
+        return
       case 'occurrenceNavigation':
         this.owner.navigation.update(this, msg.available)
     }
@@ -580,6 +584,45 @@ class Preview {
       this.post({ type: 'repoLinksChecked', id, missing })
   }
 
+  /** 仓库根放进这个预览能读的本地目录，图片地址才能加载。真实位置和 git 给的路径不一样时两个都放。 */
+  private addLocalRoot(fsPath: string): void {
+    const uri = Uri.file(fsPath)
+    const roots = this.panel.webview.options.localResourceRoots ?? []
+    if (roots.some(root => root.fsPath === uri.fsPath))
+      return
+    this.panel.webview.options = { ...this.panel.webview.options, localResourceRoots: [...roots, uri] }
+  }
+
+  private async allowRepoRoot(root: string): Promise<void> {
+    this.addLocalRoot(root)
+    try {
+      const real = await realpath(root)
+      if (real !== root)
+        this.addLocalRoot(real)
+    }
+    catch {
+      // 仓库根这会儿读不到真实位置，就按 git 给的路径放行
+    }
+  }
+
+  /** 这批仓库图片哪些在。在的带回预览里能直接用的地址；不在、不是图片、跑出仓库的没有地址。 */
+  private async checkRepoImages(id: number, paths: string[]): Promise<void> {
+    const root = await repoRootOf(this.document.uri.fsPath)
+    if (root)
+      await this.allowRepoRoot(root)
+    const images = await Promise.all(paths.map(async (rel) => {
+      if (root === undefined || !isRepoImagePath(rel))
+        return { path: rel }
+      const entry = await resolveRepoEntry(root, rel)
+      if (!entry || entry.isDirectory)
+        return { path: rel }
+      const src = this.panel.webview.asWebviewUri(Uri.file(entry.fsPath)).toString()
+      return { path: rel, src }
+    }))
+    if (this.ready)
+      this.post({ type: 'repoImagesChecked', id, images })
+  }
+
   /**
    * 打开注释里的仓库链接：目录在资源管理器里定位，文件用编辑器打开。
    * 带了符号就按文档符号的名字跳过去；文件或符号没有就不打开。
@@ -629,10 +672,14 @@ class Preview {
     return Array.isArray(symbols) ? findRepoSymbol(symbols, symbol) : undefined
   }
 
-  /** 在当前这个预览所在的编辑器组打开文件，并把预览标签固定住，免得被它替掉。 */
+  /** 在预览所在的编辑器组打开文件，并把预览标签固定住，免得被它替掉。图片用默认打开方式，才看得到图。 */
   private async showRepoFile(uri: Uri, selection?: Range): Promise<void> {
     if (this.panel.active && !workspace.getConfiguration('workbench.editor').get<boolean>('enablePreviewFromCodeNavigation', false))
       await commands.executeCommand('workbench.action.keepEditor')
+    if (selection === undefined && isImageFile(uri.fsPath)) {
+      await commands.executeCommand('vscode.open', uri, { viewColumn: this.panel.viewColumn })
+      return
+    }
     await window.showTextDocument(uri, { viewColumn: this.panel.viewColumn, ...(selection && { selection }) })
   }