@yuhufe/wtool-vdiff 0.0.1 → 0.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yuhufe/wtool-vdiff",
   "private": false,
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "description": "Monaco diff viewer as Vue 3 Web Component",
   "keywords": [
@@ -16,7 +16,8 @@
     "dev:lib": "vite build --watch --mode development",
     "build:site": "vite build --mode production --config site/vite.config.ts",
     "dev:site": "vite --config site/vite.config.ts",
-    "build": "vite build --mode production"
+    "build": "vite build --mode production",
+    "pub": "npm run build && npm publish"
   },
   "main": "./dist/wtool-vdiff.cjs.js",
   "module": "./dist/wtool-vdiff.es.js",

package/src/DiffViewer/DiffViewer.vue

@@ -56,8 +56,8 @@ const initDiff = function () {
 initDiff()
 console.log(`[DiffViewer] patch耗时: ${(performance.now() - _renderStart).toFixed(2)} ms`)
 
-const originalCode = computed(() => diffPair.value[0].content)
-const modifiedCode = computed(() => diffPair.value[1].content)
+const originalCode = computed(() => diffPair.value[0]?.content ?? '')
+const modifiedCode = computed(() => diffPair.value[1]?.content ?? '')
 
 const { funcs, registerFunc } = useDiffViewer({ isMaster: true })
 

package/src/DiffViewer/TopBar.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="top-bar-wrap">
     <div class="title-area">
-      <div class="filename">{{ filename }}</div>
+      <div class="filename">{{ filenameDisplay }}</div>
+      <span :class="['diff-type-tag', diffType]">{{ diffTypeLabel }}</span>
       <div class="diff-line-num">
-        <div class="add">+{{ changed.added }}</div>
-        <div class="del">-{{ changed.removed }}</div>
+        <div class="add" v-if="diffType !== 'del'">+{{ changed.added }}</div>
+        <div class="del" v-if="diffType !== 'add'">-{{ changed.removed }}</div>
       </div>
     </div>
     <div class="toolbar">
@@ -21,21 +22,53 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, reactive } from 'vue'
+import { computed, ref, onMounted } from 'vue'
 import { useDiffViewer } from './useDiffView'
 
 const { funcs, registerFunc } = useDiffViewer()
 
 const props = withDefaults(
   defineProps<{
-    diffPair?: { filename: string; content: string }[]
+    diffPair?: { filename: string; content: string | null }[]
   }>(),
   {
     diffPair: () => [],
   }
 )
 
-const filename = computed(() => props.diffPair[0].filename)
+type DiffType = 'changed' | 'add' | 'del' | 'rename'
+
+const diffType = computed<DiffType>(() => {
+  const [original, modified] = props.diffPair
+  if (!original || !modified) return 'changed'
+
+  const originalNull = original.content === null
+  const modifiedNull = modified.content === null
+
+  if (originalNull && !modifiedNull) return 'add'
+  if (!originalNull && modifiedNull) return 'del'
+  if (original.filename !== modified.filename) return 'rename'
+  return 'changed'
+})
+
+const diffTypeLabel = computed(() => {
+  const map: Record<DiffType, string> = {
+    changed: 'changed',
+    add: 'added',
+    del: 'deleted',
+    rename: 'renamed',
+  }
+  return map[diffType.value]
+})
+
+const filenameDisplay = computed(() => {
+  const [original, modified] = props.diffPair
+  if (!original) return ''
+  if (diffType.value === 'rename') {
+    return `${original.filename} → ${modified.filename}`
+  }
+  return original.filename
+})
 
 const { viewed, rawed, canUnchangeVisible } = funcs
 const onViewedChange = function (evt) {
@@ -79,12 +112,18 @@ registerFunc({
     flex: 1;
     display: flex;
     align-items: center;
+    overflow: hidden;
 
     .filename {
       font-size: 14px;
+      line-height: 16px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     .diff-line-num {
+      flex-shrink: 0;
       display: inline-flex;
       font-size: 12px;
       font-weight: bold;
@@ -118,4 +157,31 @@ registerFunc({
     }
   }
 }
+
+.diff-type-tag {
+  flex-shrink: 0;
+  display: block;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 4px;
+  border-radius: 2px;
+  margin-left: 4px;
+
+  &.changed {
+    background-color: #ddf4ff;
+    color: #0969da;
+  }
+  &.add {
+    background-color: #dafbe1;
+    color: #1a7f37;
+  }
+  &.del {
+    background-color: #ffebe9;
+    color: #d1242f;
+  }
+  &.rename {
+    background-color: #fff8c5;
+    color: #9a6700;
+  }
+}
 </style>

package/src/DiffViewer/utils/autoHeight.ts

@@ -94,8 +94,8 @@ const autoHeightPair = function ({
 } & CommonParams): number {
   if (!pair || pair.length < 2) return minLine
 
-  const origLines = pair[0].content.split('\n')
-  const modLines = pair[1].content.split('\n')
+  const origLines = pair[0].content?.split('\n') ?? []
+  const modLines = pair[1].content?.split('\n') ?? []
   const totalLines = Math.max(origLines.length, modLines.length)
 
   if (unchangedVisiable) {

package/src/DiffViewer/utils/patch2Pair.ts

@@ -56,9 +56,12 @@ export function parseHunks(patch: string): { origFilename: string; modFilename:
 /**
  * 将 unified diff patch 转换为 [original, modified] 文件对。
  *
- * Monaco diff editor 需要两个完整文件内容，而 patch 只记录变更片段。
- * 未改动的行（hunk 之外）用空行填充，使两侧行号与 hunk 声明的起始位置对齐，
- * 从而让 Monaco 能在正确的行号位置渲染增删差异。
+ * 策略：
+ *   - hunk 之外的行（patch 未提供内容）：两侧各补一个空行撑开行号，
+ *     Monaco hideUnchangedRegions 会将这些相同的空行折叠并显示正确的行号范围
+ *   - context 行（' '）：两侧均写入真实内容
+ *   - 连续的删除（'-'）/ 新增（'+'）块：收集后成对对齐写入，
+ *     行数较少的一侧补空行，使 Monaco 能在同一视觉行渲染替换关系
  */
 export const patch2Pair = function (patch: string): FilePair[] {
   if (!patch) {
@@ -73,12 +76,24 @@ export const patch2Pair = function (patch: string): FilePair[] {
   const origLines: string[] = []
   const modLines: string[] = []
 
-  // 追踪两侧各自已写到的行号（1-based）
+  const pendingDel: string[] = []
+  const pendingAdd: string[] = []
+
+  const flushPending = () => {
+    const maxLen = Math.max(pendingDel.length, pendingAdd.length)
+    for (let i = 0; i < maxLen; i++) {
+      origLines.push(pendingDel[i] ?? '')
+      modLines.push(pendingAdd[i] ?? '')
+    }
+    pendingDel.length = 0
+    pendingAdd.length = 0
+  }
+
   let origCursor = 1
   let modCursor = 1
 
   for (const hunk of hunks) {
-    // hunk 之前未覆盖的行用空行填充，使光标推进到 hunk 起始位置
+    // hunk 之前（或两个 hunk 之间）的 gap：两侧各补空行对齐行号
     while (origCursor < hunk.origStart) {
       origLines.push('')
       origCursor++
@@ -93,25 +108,21 @@ export const patch2Pair = function (patch: string): FilePair[] {
       const content = line.slice(1)
 
       if (prefix === ' ') {
-        // context 行：两侧都保留原文
+        flushPending()
         origLines.push(content)
         modLines.push(content)
         origCursor++
         modCursor++
       } else if (prefix === '-') {
-        // 删除行：original 保留，modified 用空行占位
-        origLines.push(content)
-        modLines.push('')
+        pendingDel.push(content)
         origCursor++
-        modCursor++
       } else if (prefix === '+') {
-        // 新增行：modified 保留，original 用空行占位
-        origLines.push('')
-        modLines.push(content)
-        origCursor++
+        pendingAdd.push(content)
         modCursor++
       }
     }
+
+    flushPending()
   }
 
   return [

package/src/types.ts

@@ -4,7 +4,7 @@ export type DiffEditorOptions = Monaco.editor.IStandaloneDiffEditorConstructionO
 export type ModelOptions = Monaco.editor.ITextModelUpdateOptions
 
 export interface WtoolDiffViewerProps {
-  diffPair?: { filename: string; content: string }[]
+  diffPair?: { filename: string; content: string | null }[]
   diffPatch?: string
   language?: string
   options?: DiffEditorOptions