@yuhufe/wtool-vdiff 0.0.6 → 0.0.8

package/src/DiffFiles/createDiffFiles.ts

@@ -0,0 +1,70 @@
+import { defineCustomElement } from 'vue'
+import type { WtoolDiffFilesProps } from '../types'
+import DiffFiles from './DiffFiles.vue'
+import type { DiffFileSelection } from './FileExplore/fileTree'
+
+export type DiffFilesProps = WtoolDiffFilesProps
+export type DiffFilesSelectFileListener = (selection: DiffFileSelection) => void
+
+export const WTOOL_DIFF_FILES_TAG = 'wtool-diff-files'
+
+export const WtoolDiffFiles = defineCustomElement(DiffFiles, {
+  shadowRoot: false,
+})
+
+export function register(tagName: string = WTOOL_DIFF_FILES_TAG): void {
+  if (customElements.get(tagName)) return
+  customElements.define(tagName, WtoolDiffFiles)
+}
+
+export interface DiffFilesInstance {
+  update(props: Partial<DiffFilesProps>): void
+  onSelectFile(listener: DiffFilesSelectFileListener): () => void
+  destroy(): void
+}
+
+function applyProps(el: InstanceType<typeof WtoolDiffFiles>, props: Partial<DiffFilesProps>): void {
+  const node = el as unknown as Record<string, unknown>
+  for (const key of Object.keys(props) as (keyof DiffFilesProps)[]) {
+    const value = props[key]
+    if (value !== undefined) {
+      node[key as string] = value
+    }
+  }
+}
+
+export function createDiffFiles(target: HTMLElement, initialProps: DiffFilesProps = {}): DiffFilesInstance {
+  register()
+  const el = new WtoolDiffFiles()
+  const selectFileListeners = new Set<EventListener>()
+
+  applyProps(el, initialProps)
+  target.appendChild(el)
+
+  return {
+    update(newProps: Partial<DiffFilesProps>) {
+      applyProps(el, newProps)
+    },
+    onSelectFile(listener: DiffFilesSelectFileListener) {
+      const eventListener: EventListener = event => {
+        const [selection] = (event as CustomEvent<[DiffFileSelection]>).detail
+        listener(selection)
+      }
+
+      selectFileListeners.add(eventListener)
+      el.addEventListener('select-file', eventListener)
+
+      return () => {
+        selectFileListeners.delete(eventListener)
+        el.removeEventListener('select-file', eventListener)
+      }
+    },
+    destroy() {
+      selectFileListeners.forEach(listener => {
+        el.removeEventListener('select-file', listener)
+      })
+      selectFileListeners.clear()
+      el.remove()
+    },
+  }
+}

package/src/DiffFiles/index.ts

@@ -0,0 +1,11 @@
+export {
+  WTOOL_DIFF_FILES_TAG,
+  WtoolDiffFiles,
+  register as registerDiffFiles,
+  createDiffFiles,
+  type DiffFilesProps,
+  type DiffFilesInstance,
+  type DiffFilesSelectFileListener,
+} from './createDiffFiles'
+export type { DiffFileSelection } from './FileExplore/fileTree'
+export type { DiffFile, FileTree, WtoolDiffFilesProps, WtoolDiffViewerStyle } from '../types'

package/src/DiffFiles/types.ts

@@ -0,0 +1,15 @@
+import type { DiffFile } from '../types'
+
+// 文件列表的每个文件类型
+export interface FileItem extends DiffFile {
+  fullPath: string
+  name: string
+  folderPath: string
+  type?: string
+}
+
+export interface DiffFileState {
+  height: number
+  viewed: boolean
+  rawed: boolean
+}

package/src/DiffFiles/useDiffFiles.ts

@@ -0,0 +1,56 @@
+import { useCompExp } from '@yuhufe/web-ui'
+import type { Ref } from 'vue'
+
+import { DiffFile } from '@/types'
+import { parsePatchFilenames } from '@/utils/patch'
+import type { FileItem } from './types'
+
+export const useDiffFiles = function ({ isMaster = false } = {}) {
+  const exp = useCompExp<{
+    selectedFileKey: Ref<string>
+    searchKeyword: Ref<string>
+    selectFile: (fullPath: string) => Promise<void>
+    filterTree: (keyword: string) => void
+  }>({ isMaster, key: 'diffFiles' })
+
+  return { ...exp }
+}
+
+export function formatDiffFiles(diffFiles: DiffFile[]) {
+  function resolveDiffFileFullPath(file: DiffFile): string {
+    if (file.fullPath) return file.fullPath
+
+    if (file.diffPair) {
+      return file.diffPair[1]?.filename || file.diffPair[0]?.filename
+    }
+
+    if (typeof file.diffPatch === 'string') {
+      return parsePatchFilenames(file.diffPatch).modFilename
+    }
+
+    return ''
+  }
+  const files = diffFiles.map<FileItem>((file, index) => {
+    const fullPath = resolveDiffFileFullPath(file)
+
+    const pathSegments = fullPath.split('/')
+    const name = pathSegments.at(-1) || ''
+    const extname = name.split('.').at(-1)
+
+    return {
+      ...file,
+      fullPath,
+      name,
+      folderPath: pathSegments.slice(0, -1).join('/'),
+      type: extname?.toLowerCase(),
+    }
+  })
+
+  files.sort((left, right) => {
+    if (left.fullPath === right.fullPath) return 0
+    return left.fullPath > right.fullPath ? 1 : -1
+  })
+
+  const fileMap: Record<string, FileItem> = Object.fromEntries(files.map(file => [file.fullPath, file]))
+  return { files, fileMap }
+}

package/src/DiffViewer/DiffViewer.vue

@@ -1,9 +1,10 @@
 <template>
-  <div class="diff-viewer-wrap" :style="viewerStyle">
-    <TopBar class="top-bar" :diffPair="diffPair" />
+  <div class="diff-viewer-wrap" :style="viewerStyle" @viewStateChange="">
+    <TopBar class="top-bar" :diffPair="diffPair" :diffPatch="diffPatch" />
     <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,27 +17,34 @@
 </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 emit = defineEmits<{
+  viewStateChange: [data: { viewed: boolean; rawed: boolean }]
+}>()
 
 const vLoading = loadingDirective
 const loading = ref(true)
 
 const _renderStart = performance.now()
-const onMonacoRenderComplete = () => {
+const onMonacoRenderComplete = async () => {
   const cost = performance.now() - _renderStart
   console.log(`[DiffViewer] 渲染耗时: ${cost.toFixed(2)} ms`)
   loading.value = false
 }
 
 const props = withDefaults(defineProps<WtoolDiffViewerProps>(), {
+  fileId: '',
   diffPair: () => [],
   diffPatch: '',
   language: 'plaintext',
@@ -77,6 +85,7 @@ const mergedOptions = computed(() => {
     hideUnchangedRegions = {
       enabled: true,
       contextLineCount: 3,
+      minimumLineCount: 1,
       ...hideUnchangedRegions,
     }
   }
@@ -87,8 +96,8 @@ const mergedOptions = computed(() => {
   }
 })
 
-const viewed = ref<boolean>(false) // 是否已读
-const rawed = ref<boolean>(false) // 是否显示原始文件
+const viewed = ref<boolean>(props.viewerStyle?.viewed ?? false) // 是否已读
+const rawed = ref<boolean>(props.viewerStyle?.rawed ?? false) // 是否显示原始文件
 const canUnchangeVisible = ref(!props.diffPatch) // patch 模式下未改动区域为空行，不可展示
 
 // 编辑器样式
@@ -103,14 +112,18 @@ const viewerHeight = computed(() => {
     ...(props.viewerStyle || {}),
   }
 
+  const autoHeightId = props.fileId || v4()
   const height = autoHeight({
+    id: autoHeightId,
     patch: props.diffPatch,
     pair: props.diffPair,
     ...heightRange,
     unchangedVisiable: funcs.rawed.value,
-    unchangedCtxLineNum: mergedOptions.value.hideUnchangedRegions.contextLineCount!,
+    unchangedCtxLineNum: mergedOptions.value.hideUnchangedRegions.contextLineCount ?? 3,
+    unchangedMinLineNum: mergedOptions.value.hideUnchangedRegions.minimumLineCount ?? 1,
   })
 
+  // 当前高度为代码高度
   return `${height}px`
 })
 const viewerStyle = computed(() => {
@@ -122,7 +135,15 @@ const viewerStyle = computed(() => {
 
 registerFunc({
   viewed,
+  updateViewed(newVal) {
+    viewed.value = newVal
+    emit('viewStateChange', { rawed: rawed.value, viewed: newVal })
+  },
   rawed,
+  updateRawed(newVal) {
+    rawed.value = newVal
+    emit('viewStateChange', { rawed: newVal, viewed: viewed.value })
+  },
   canUnchangeVisible,
 })
 </script>

package/src/DiffViewer/MonacoDiffViewer.vue

@@ -7,6 +7,7 @@ import { ref, watch, onMounted, onBeforeUnmount, shallowRef } from 'vue'
 import loader from '@monaco-editor/loader'
 import type * as Monaco from 'monaco-editor'
 import { useDiffViewer } from './useDiffView'
+import { HEIGHT_CODE_LINE, HEIGHT_HORIZONTAL_SCROLLBAR } from './const'
 
 type DiffEditorOptions = Monaco.editor.IStandaloneDiffEditorConstructionOptions
 type ModelOptions = Monaco.editor.ITextModelUpdateOptions
@@ -58,15 +59,18 @@ onMounted(() => {
       renderSideBySide: true,
       useInlineViewWhenSpaceIsLimited: false,
       scrollBeyondLastLine: false,
+      lineHeight: HEIGHT_CODE_LINE,
       hideUnchangedRegions: {
         enabled: true,
         contextLineCount: 3,
       },
+      ...props.options,
       scrollbar: {
         verticalScrollbarSize: 8,
-        horizontalScrollbarSize: 8,
+        horizontalScrollbarSize: HEIGHT_HORIZONTAL_SCROLLBAR,
+        alwaysConsumeMouseWheel: false,
+        ...props.options.scrollbar,
       },
-      ...props.options,
     })
     editor.value.setModel({
       original: originalModel.value,
@@ -165,6 +169,21 @@ watch(
 </style>
 
 <style>
+/* Monaco tooltip 会挂载到独立的 context view 中，需使用非 scoped 样式避免遮挡工具按钮 */
+.context-view.monaco-component {
+  .workbench-hover-container {
+    .hover-contents {
+      white-space: nowrap !important;
+    }
+  }
+}
+
+.monaco-editor-container {
+  .codicon.codicon-widget-close {
+    box-sizing: content-box !important;
+  }
+}
+
 /* patch 模式：未改动区域为空行，隐藏 monaco 内置的展开未改动区域按钮（非 scoped，配合 JS class 控制） */
 .monaco-editor-container.hide-unchanged-actions {
   .diff-hidden-lines-widget {

package/src/DiffViewer/TopBar.vue

@@ -1,11 +1,11 @@
 <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>
       <div class="diff-line-num">
-        <div class="add" v-if="diffType !== 'del'">+{{ changed.added }}</div>
-        <div class="del" v-if="diffType !== 'add'">-{{ changed.removed }}</div>
+        <div class="add" v-if="diffType !== 'del'">+{{ displayedChanged.added }}</div>
+        <div class="del" v-if="diffType !== 'add'">-{{ displayedChanged.removed }}</div>
       </div>
     </div>
     <div class="toolbar">
@@ -24,15 +24,19 @@
 <script setup lang="ts">
 import { computed, ref, onMounted } from 'vue'
 import { useDiffViewer } from './useDiffView'
+import { HEIGHT_TOP_BAR } from './const'
+import { parsePatchHunks } from '@/utils/patch'
 
 const { funcs, registerFunc } = useDiffViewer()
 
 const props = withDefaults(
   defineProps<{
     diffPair?: { filename: string; content: string | null }[]
+    diffPatch?: string
   }>(),
   {
     diffPair: () => [],
+    diffPatch: '',
   }
 )
 
@@ -73,11 +77,11 @@ const filenameDisplay = computed(() => {
 const { viewed, rawed, canUnchangeVisible } = funcs
 const onViewedChange = function (evt) {
   const checked = (evt.target as HTMLInputElement).checked
-  viewed.value = checked
+  funcs.updateViewed(checked)
 }
 const onRawedChange = function (evt) {
   const checked = (evt.target as HTMLInputElement).checked
-  rawed.value = checked
+  funcs.updateRawed(checked)
 }
 
 onMounted(() => {
@@ -86,6 +90,22 @@ onMounted(() => {
 
 // 变更行数
 const changed = ref({ added: 0, removed: 0 })
+const patchChanged = computed(() => {
+  const result = { added: 0, removed: 0 }
+
+  for (const hunk of parsePatchHunks(props.diffPatch)) {
+    for (const line of hunk.lines) {
+      if (line.startsWith('+')) {
+        result.added++
+      } else if (line.startsWith('-')) {
+        result.removed++
+      }
+    }
+  }
+
+  return result
+})
+const displayedChanged = computed(() => (props.diffPatch ? patchChanged.value : changed.value))
 function updateChangedLines(newVal) {
   Object.assign(changed.value, newVal)
 }
@@ -100,7 +120,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,11 @@
+/** 顶部工具栏的固定高度，单位：像素。 */
+export const HEIGHT_TOP_BAR = 32
+
+/** Diff 编辑器中单行代码的默认高度，单位：像素。 */
+export const HEIGHT_CODE_LINE = 18
+
+/** 未变更代码折叠区域占用的固定高度，单位：像素。 */
+export const HEIGHT_HIDDEN_REGION = 24
+
+/** Diff 编辑器横向滚动条的默认高度，单位：像素。 */
+export const HEIGHT_HORIZONTAL_SCROLLBAR = 8