@yuhufe/wtool-vdiff 0.0.5 → 0.0.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yuhufe/wtool-vdiff",
   "private": false,
-  "version": "0.0.5",
+  "version": "0.0.7",
   "type": "module",
   "description": "Monaco diff viewer as Vue 3 Web Component",
   "keywords": [
@@ -35,13 +35,15 @@
     "vue": "^3.5.0"
   },
   "dependencies": {
+    "@yuhufe/web-ui": "workspace:*",
+    "@yuhufe/web-common": "workspace:*",
     "@monaco-editor/loader": "^1.6.1",
-    "less": "4.6.4",
+    "diff": "^9.0.0",
     "monaco-editor": "^0.53.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.0",
-    "@yuhufe/web-ui": "workspace:*",
+    "less": "4.6.4",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-css-injected-by-js": "5.0.1",

package/src/DiffFiles/DiffFiles.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="diff-files-wrap">
+    <Toolbar class="toolbar" />
+    <div class="content-wrap">
+      <FileExplore :diffFiles="diffFiles" />
+      <div class="filelist-viewer-wrap"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, nextTick } from 'vue'
+
+import { loadingDirective } from '@yuhufe/web-ui'
+import type { DiffEditorOptions, WtoolDiffViewerProps, ModelOptions } from '../types'
+
+import FileExplore from './FileExplore/FileExplore.vue'
+
+const vLoading = loadingDirective
+const loading = ref(true)
+
+const props = withDefaults(
+  defineProps<{
+    diffFiles: WtoolDiffViewerProps[]
+  }>(),
+  {
+    diffFiles: () => [],
+  }
+)
+</script>
+
+<style scoped>
+.diff-files-wrap {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .toolbar {
+    flex-shrink: 0;
+  }
+  .content-wrap {
+    flex: 1;
+    overflow: hidden;
+  }
+}
+</style>

package/src/DiffFiles/FileExplore/FileExplore.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="file-explore-wrap"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, nextTick, shallowRef } from 'vue'
+
+import { loadingDirective } from '@yuhufe/web-ui'
+import type { FileTree, WtoolDiffViewerProps, ModelOptions } from '@/types'
+
+const props = withDefaults(
+  defineProps<{
+    diffFiles: WtoolDiffViewerProps[]
+  }>(),
+  {
+    diffFiles: () => [],
+  }
+)
+
+const filesData = shallowRef<FileTree[]>([])
+</script>
+
+<style scoped></style>

package/src/DiffViewer/DiffViewer.vue

@@ -4,6 +4,7 @@
     <div class="content-wrap" v-show="!viewed" v-loading="loading">
       <MonacoDiffViewer
         class="monaco-container"
+        :style="{ opacity: loading ? 0 : 1 }"
         :originalCode="originalCode"
         :modifiedCode="modifiedCode"
         :language="language"
@@ -16,21 +17,24 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, nextTick } from 'vue'
 
 import { loadingDirective } from '@yuhufe/web-ui'
+import { v4 } from '@yuhufe/web-common'
 import type { DiffEditorOptions, WtoolDiffViewerProps, ModelOptions } from '../types'
 import MonacoDiffViewer from './MonacoDiffViewer.vue'
 import TopBar from './TopBar.vue'
 import { useDiffViewer } from './useDiffView'
 import { patch2Pair } from './utils/patch2Pair'
 import { autoHeight } from './utils/autoHeight'
+import { HEIGHT_TOP_BAR } from './const'
 
 const vLoading = loadingDirective
 const loading = ref(true)
+const autoHeightId = v4()
 
 const _renderStart = performance.now()
-const onMonacoRenderComplete = () => {
+const onMonacoRenderComplete = async () => {
   const cost = performance.now() - _renderStart
   console.log(`[DiffViewer] 渲染耗时: ${cost.toFixed(2)} ms`)
   loading.value = false
@@ -77,6 +81,7 @@ const mergedOptions = computed(() => {
     hideUnchangedRegions = {
       enabled: true,
       contextLineCount: 3,
+      minimumLineCount: 1,
       ...hideUnchangedRegions,
     }
   }
@@ -104,6 +109,7 @@ const viewerHeight = computed(() => {
   }
 
   const height = autoHeight({
+    id: autoHeightId,
     patch: props.diffPatch,
     pair: props.diffPair,
     ...heightRange,
@@ -111,7 +117,8 @@ const viewerHeight = computed(() => {
     unchangedCtxLineNum: mergedOptions.value.hideUnchangedRegions.contextLineCount!,
   })
 
-  return `${height}px`
+  // 当前高度为代码高度，需要加上 topBar 高度才是完整高度
+  return `${height + HEIGHT_TOP_BAR}px`
 })
 const viewerStyle = computed(() => {
   return {

package/src/DiffViewer/TopBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="top-bar-wrap">
+  <div class="top-bar-wrap" :style="{ height: `${HEIGHT_TOP_BAR}px` }">
     <div class="title-area">
       <div class="filename">{{ filenameDisplay }}</div>
       <span :class="['diff-type-tag', diffType]">{{ diffTypeLabel }}</span>
@@ -24,6 +24,7 @@
 <script setup lang="ts">
 import { computed, ref, onMounted } from 'vue'
 import { useDiffViewer } from './useDiffView'
+import { HEIGHT_TOP_BAR } from './const'
 
 const { funcs, registerFunc } = useDiffViewer()
 
@@ -100,7 +101,6 @@ registerFunc({
 <style scoped>
 .top-bar-wrap {
   box-sizing: border-box;
-  height: 32px;
 
   display: flex;
   overflow: hidden;

package/src/DiffViewer/const.ts

@@ -0,0 +1 @@
+export const HEIGHT_TOP_BAR = 32

package/src/DiffViewer/utils/autoHeight.ts

@@ -1,30 +1,84 @@
+import { diffLines } from 'diff'
 import type { WtoolDiffViewerProps } from '@/types'
-import { parseHunks } from './patch2Pair'
+import { parsePatchHunks } from '@/utils/patch'
 
 const LINE_HEIGHT = 18
+const GAP_HEIGHT = 24
+const heightMap = new Map<string, Partial<Record<'visible' | 'hidden', number>>>()
 
 interface CommonParams {
-  minLine: number
-  maxLine: number
+  minPx: number
+  maxPx: number
   unchangedVisiable: boolean
   unchangedCtxLineNum: number
 }
 
+interface ChangedLineBlock {
+  start: number
+  end: number
+}
+
+interface ChangedLineInfo {
+  blocks: ChangedLineBlock[]
+  totalLines: number
+}
+
+function getChangedLineInfo(origContent: string, modContent: string): ChangedLineInfo {
+  const changes = diffLines(origContent, modContent)
+  const blocks: ChangedLineBlock[] = []
+  let row = 1
+  let removed = 0
+  let added = 0
+
+  const flush = () => {
+    const len = Math.max(removed, added)
+    if (len > 0) {
+      blocks.push({ start: row, end: row + len - 1 })
+      row += len
+      removed = 0
+      added = 0
+    }
+  }
+
+  for (const part of changes) {
+    const count = part.count ?? 0
+
+    if (part.removed) {
+      removed += count
+    } else if (part.added) {
+      added += count
+    } else {
+      flush()
+      row += count
+    }
+  }
+
+  flush()
+
+  return {
+    blocks,
+    totalLines: Math.max(0, row - 1),
+  }
+}
+
 /**
  * 在线可见行计数器，按顺序逐个喂入变更区间（1-based inclusive），流式累计可见行数。
- * 区间必须按 start 升序喂入，每次 feed 后可读取 visible 判断是否达到 maxLine。
+ * 区间必须按 start 升序喂入，每次 feed 后可读取 maxReached 判断是否达到像素上限。
  * @param totalLines 文件总行数，用于 clamp context 窗口上界及判断尾部是否有折叠 widget
  * @param ctx        每个变更块上下保留的 context 行数，对应 Monaco contextLineCount
- * @param maxLine    可见行上限，达到后 maxReached 为 true，调用方应立即停止 feed
+ * @param maxPx      像素上限，达到后 maxReached 为 true，调用方应立即停止 feed
  */
-function makeVisibleLineCounter(totalLines: number, ctx: number, maxLine: number) {
-  let visible = 0       // 已 commit 的确定可见行数（不含当前 pending 块）
+function makeVisibleLineCounter(totalLines: number, ctx: number, maxPx: number) {
+  let visible = 0 // 已 commit 的确定可见行数（不含当前 pending 块）
+  let gaps = 0 // gap widget 数量（每个折叠区域占 GAP_HEIGHT，非 LINE_HEIGHT）
   let pendingStart = -1 // 当前待合并窗口的起始行（-1 表示无 pending）
-  let pendingEnd = -1   // 当前待合并窗口的结束行
+  let pendingEnd = -1 // 当前待合并窗口的结束行
+
+  const usedPx = () => visible * LINE_HEIGHT + gaps * GAP_HEIGHT
 
   const commitPending = () => {
     if (pendingStart === -1) return
-    if (pendingStart > 1) visible += 1
+    if (pendingStart > 1) gaps += 1
     visible += pendingEnd - pendingStart + 1
     pendingStart = -1
     pendingEnd = -1
@@ -35,7 +89,7 @@ function makeVisibleLineCounter(totalLines: number, ctx: number, maxLine: number
       const winStart = Math.max(1, s - ctx)
       const winEnd = Math.min(totalLines, e + ctx)
       if (pendingEnd === -1 || winStart > pendingEnd + 1) {
-        commitPending()          // 新窗口与 pending 有间隙：先提交 pending，再开新窗口
+        commitPending() // 新窗口与 pending 有间隙：先提交 pending，再开新窗口
         pendingStart = winStart
         pendingEnd = winEnd
       } else {
@@ -43,79 +97,82 @@ function makeVisibleLineCounter(totalLines: number, ctx: number, maxLine: number
       }
     },
     flush() {
+      const lastEnd = pendingEnd
       commitPending()
-      if (visible > 0 && pendingEnd !== totalLines) visible += 1
-      return Math.min(visible, maxLine)
+      if (visible > 0 && lastEnd !== totalLines) gaps += 1
+      return usedPx()
+    },
+    get usedPx() {
+      return usedPx()
     },
-    get visible() {
-      return visible
+    get gaps() {
+      return gaps
     },
     get maxReached() {
-      return visible >= maxLine
+      return usedPx() >= maxPx
     },
   }
 }
 
 const autoHeightPatch = function ({
   patch,
-  minLine,
-  maxLine,
+  minPx,
+  maxPx,
   unchangedCtxLineNum,
 }: {
   patch: string
 } & CommonParams): number {
-  const { hunks } = parseHunks(patch)
-  if (hunks.length === 0) return minLine
+  const hunks = parsePatchHunks(patch)
+  if (hunks.length === 0) return minPx
 
   const lastHunk = hunks[hunks.length - 1]
-  const totalLines = Math.max(
-    lastHunk.origStart + lastHunk.origCount - 1,
-    lastHunk.modStart + lastHunk.modCount - 1,
-  )
-  const counter = makeVisibleLineCounter(totalLines, unchangedCtxLineNum, maxLine)
+  const totalLines = Math.max(lastHunk.origStart + lastHunk.origCount - 1, lastHunk.modStart + lastHunk.modCount - 1)
+  const counter = makeVisibleLineCounter(totalLines, unchangedCtxLineNum, maxPx)
 
   for (const h of hunks) {
     const hunkEnd = Math.max(h.origStart + h.origCount - 1, h.modStart + h.modCount - 1)
     counter.feed(h.origStart, hunkEnd)
-    if (counter.maxReached) return maxLine
+    if (counter.maxReached) return maxPx
   }
 
-  return Math.max(minLine, counter.flush())
+  return Math.max(minPx, counter.flush())
 }
 
 const autoHeightPair = function ({
   pair,
-  minLine,
-  maxLine,
+  minPx,
+  maxPx,
   unchangedVisiable,
   unchangedCtxLineNum,
 }: {
   pair: WtoolDiffViewerProps['diffPair']
 } & CommonParams): number {
-  if (!pair || pair.length < 2) return minLine
+  if (!pair || pair.length < 2) return minPx
 
-  const origLines = pair[0].content?.split('\n') ?? []
-  const modLines = pair[1].content?.split('\n') ?? []
+  const origContent = pair[0].content ?? ''
+  const modContent = pair[1].content ?? ''
+  const origLines = origContent.split('\n')
+  const modLines = modContent.split('\n')
   const totalLines = Math.max(origLines.length, modLines.length)
 
   if (unchangedVisiable) {
-    return Math.max(minLine, Math.min(totalLines, maxLine))
+    return Math.max(minPx, Math.min(totalLines * LINE_HEIGHT, maxPx))
   }
 
-  const counter = makeVisibleLineCounter(totalLines, unchangedCtxLineNum, maxLine)
-  let i = 0
-  while (i < totalLines) {
-    if ((origLines[i] ?? '') !== (modLines[i] ?? '')) {
-      const start = i + 1
-      while (i < totalLines && (origLines[i] ?? '') !== (modLines[i] ?? '')) i++
-      counter.feed(start, i)
-      if (counter.maxReached) return maxLine
-    } else {
-      i++
-    }
+  const { blocks, totalLines: diffTotalLines } = getChangedLineInfo(origContent, modContent)
+  if (blocks.length === 0) return minPx
+
+  const counter = makeVisibleLineCounter(diffTotalLines, unchangedCtxLineNum, maxPx)
+  for (const block of blocks) {
+    counter.feed(block.start, block.end)
+    if (counter.maxReached) return maxPx
   }
 
-  return Math.max(minLine, counter.flush())
+  let result = counter.flush()
+  result = Math.max(minPx, result)
+  result = Math.min(maxPx, result)
+
+  return result
 }
 
 const height2Num = (heightStr: string): number => {
@@ -127,6 +184,7 @@ const height2Num = (heightStr: string): number => {
 }
 
 export const autoHeight = function ({
+  id,
   patch,
   pair,
   maxHeight,
@@ -134,6 +192,7 @@ export const autoHeight = function ({
   unchangedVisiable,
   unchangedCtxLineNum,
 }: {
+  id: string
   patch?: string
   pair?: WtoolDiffViewerProps['diffPair']
   maxHeight: string
@@ -141,9 +200,19 @@ export const autoHeight = function ({
   unchangedVisiable: boolean
   unchangedCtxLineNum: number
 }): number {
-  const [minLine, maxLine] = [minHeight, maxHeight].map(str => Math.floor(height2Num(str) / LINE_HEIGHT))
-  const commonParams: CommonParams = { minLine, maxLine, unchangedVisiable, unchangedCtxLineNum }
+  const cacheKey = unchangedVisiable ? 'visible' : 'hidden'
+  const cache = heightMap.get(id) || {}
+  const cachedHeight = cache?.[cacheKey]
+  if (cachedHeight !== undefined) return cachedHeight
+
+  const [minPx, maxPx] = [minHeight, maxHeight].map(height2Num)
+  const commonParams: CommonParams = { minPx, maxPx, unchangedVisiable, unchangedCtxLineNum }
+  const height = patch ? autoHeightPatch({ patch, ...commonParams }) : autoHeightPair({ pair, ...commonParams })
+
+  heightMap.set(id, {
+    ...cache,
+    [cacheKey]: height,
+  })
 
-  if (patch) return autoHeightPatch({ patch, ...commonParams }) * LINE_HEIGHT
-  return autoHeightPair({ pair, ...commonParams }) * LINE_HEIGHT
+  return height
 }

package/src/DiffViewer/utils/patch2Pair.ts

@@ -1,58 +1,10 @@
+import { parsePatchFilenames, parsePatchHunks } from '@/utils/patch'
+
 export interface FilePair {
   filename: string
   content: string
 }
 
-export interface Hunk {
-  origStart: number  // original 起始行号（1-based）
-  origCount: number  // original 行数
-  modStart: number   // modified 起始行号（1-based）
-  modCount: number   // modified 行数
-  lines: string[]    // hunk 原始行（含前缀字符）
-}
-
-/**
- * 解析 unified diff patch，提取文件名与所有 hunk
- */
-export function parseHunks(patch: string): { origFilename: string; modFilename: string; hunks: Hunk[] } {
-  const lines = patch.split('\n')
-
-  let origFilename = ''
-  let modFilename = ''
-  const hunks: Hunk[] = []
-  let currentHunk: Hunk | null = null
-
-  for (const line of lines) {
-    if (line.startsWith('--- ')) {
-      origFilename = line.slice(4).trim()
-      continue
-    }
-    if (line.startsWith('+++ ')) {
-      modFilename = line.slice(4).trim()
-      continue
-    }
-    // @@ -origStart,origCount +modStart,modCount @@
-    const hunkMatch = line.match(/^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@/)
-    if (hunkMatch) {
-      currentHunk = {
-        origStart: parseInt(hunkMatch[1], 10),
-        origCount: hunkMatch[2] !== undefined ? parseInt(hunkMatch[2], 10) : 1,
-        modStart: parseInt(hunkMatch[3], 10),
-        modCount: hunkMatch[4] !== undefined ? parseInt(hunkMatch[4], 10) : 1,
-        lines: [],
-      }
-      hunks.push(currentHunk)
-      continue
-    }
-    if (currentHunk) {
-      if (line.startsWith('\\')) continue // ""
-      currentHunk.lines.push(line)
-    }
-  }
-
-  return { origFilename, modFilename, hunks }
-}
-
 /**
  * 将 unified diff patch 转换为 [original, modified] 文件对。
  *
@@ -71,7 +23,8 @@ export const patch2Pair = function (patch: string): FilePair[] {
     ]
   }
 
-  const { origFilename, modFilename, hunks } = parseHunks(patch)
+  const { origFilename, modFilename } = parsePatchFilenames(patch)
+  const hunks = parsePatchHunks(patch)
 
   const origLines: string[] = []
   const modLines: string[] = []

package/src/types.ts

@@ -18,3 +18,10 @@ export interface WtoolDiffViewerStyle {
   minHeight?: string
   maxHeight?: string
 }
+
+export interface FileTree {
+  isDir?: boolean
+  name: string
+  type?: string
+  children?: FileTree[]
+}

package/src/utils/patch.ts

@@ -0,0 +1,74 @@
+export interface Hunk {
+  origStart: number // original 起始行号（1-based）
+  origCount: number // original 行数
+  modStart: number // modified 起始行号（1-based）
+  modCount: number // modified 行数
+  lines: string[] // hunk 原始行（含前缀字符）
+}
+
+export interface PatchFilenames {
+  origFilename: string
+  modFilename: string
+}
+
+/**
+ * 从 unified diff patch 解析 --- / +++ 行中的文件名。
+ * 文件名位于 patch 头部，遇到首个 @@ hunk 或已解析到两侧文件名后即停止扫描。
+ */
+export function parsePatchFilenames(patch: string): PatchFilenames {
+  let origFilename = ''
+  let modFilename = ''
+
+  let start = 0
+  while (start < patch.length) {
+    const nl = patch.indexOf('\n', start)
+    const line = nl === -1 ? patch.slice(start) : patch.slice(start, nl)
+    start = nl === -1 ? patch.length : nl + 1
+
+    if (line.startsWith('--- ')) {
+      origFilename = line.slice(4).trim()
+      if (origFilename && modFilename) break
+      continue
+    }
+    if (line.startsWith('+++ ')) {
+      modFilename = line.slice(4).trim()
+      if (origFilename && modFilename) break
+      continue
+    }
+    if (line.startsWith('@@')) break
+  }
+
+  return { origFilename, modFilename }
+}
+
+/**
+ * 从 unified diff patch 解析所有 hunk（@@ 块）
+ */
+export function parsePatchHunks(patch: string): Hunk[] {
+  const lines = patch.split('\n')
+
+  const hunks: Hunk[] = []
+  let currentHunk: Hunk | null = null
+
+  for (const line of lines) {
+    // @@ -origStart,origCount +modStart,modCount @@
+    const hunkMatch = line.match(/^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@/)
+    if (hunkMatch) {
+      currentHunk = {
+        origStart: parseInt(hunkMatch[1], 10),
+        origCount: hunkMatch[2] !== undefined ? parseInt(hunkMatch[2], 10) : 1,
+        modStart: parseInt(hunkMatch[3], 10),
+        modCount: hunkMatch[4] !== undefined ? parseInt(hunkMatch[4], 10) : 1,
+        lines: [],
+      }
+      hunks.push(currentHunk)
+      continue
+    }
+    if (currentHunk) {
+      if (line.startsWith('\\')) continue // ""
+      currentHunk.lines.push(line)
+    }
+  }
+
+  return hunks
+}