@yuhufe/wtool-vdiff 0.0.2 → 0.0.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yuhufe/wtool-vdiff",
   "private": false,
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "description": "Monaco diff viewer as Vue 3 Web Component",
   "keywords": [
@@ -35,12 +35,12 @@
     "vue": "^3.5.0"
   },
   "dependencies": {
-    "@yuhufe/web-ui": "workspace:*",
     "@monaco-editor/loader": "^1.6.1",
     "monaco-editor": "^0.53.0",
     "less": "4.6.4"
   },
   "devDependencies": {
+    "@yuhufe/web-ui": "workspace:*",
     "@vitejs/plugin-vue": "^5.2.0",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",

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/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