@yuhufe/wtool-vdiff 0.0.7 → 0.0.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yuhufe/wtool-vdiff",
   "private": false,
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "description": "Monaco diff viewer as Vue 3 Web Component",
   "keywords": [
@@ -12,7 +12,7 @@
     "web-component"
   ],
   "scripts": {
-    "dev": "pnpm run dev:site",
+    "vite": "pnpm run dev:site",
     "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",
@@ -31,20 +31,19 @@
   },
   "author": "",
   "license": "ISC",
-  "peerDependencies": {
-    "vue": "^3.5.0"
-  },
   "dependencies": {
     "@yuhufe/web-ui": "workspace:*",
     "@yuhufe/web-common": "workspace:*",
     "@monaco-editor/loader": "^1.6.1",
     "diff": "^9.0.0",
-    "monaco-editor": "^0.53.0"
+    "es-toolkit": "^1.49.0",
+    "monaco-editor": "^0.53.0",
+    "@wsfe/vue-tree": "^4.1.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.0",
     "less": "4.6.4",
-    "typescript": "^5.9.3",
+    "typescript": "^6.0.3",
     "vite": "^7.3.1",
     "vite-plugin-css-injected-by-js": "5.0.1",
     "vite-plugin-dts": "^4.5.3",

package/src/DiffFiles/DiffFiles.vue

@@ -1,32 +1,97 @@
 <template>
   <div class="diff-files-wrap">
-    <Toolbar class="toolbar" />
     <div class="content-wrap">
-      <FileExplore :diffFiles="diffFiles" />
-      <div class="filelist-viewer-wrap"></div>
+      <FileExplore class="file-explore" :diffFiles="files" @select-file="emit('select-file', $event)" />
+      <div class="filelist-viewer-wrap">
+        <DiffList
+          :diffFiles="files"
+          :fileOverScan="fileOverScan"
+          :fileViewMap="fileViewMap"
+          :viewerStyle="viewerStyle"
+          @viewStateChange="freshViewState"
+        />
+      </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 { onBeforeMount, reactive } from 'vue'
+import type { WtoolDiffFilesProps } from '../types'
 
 import FileExplore from './FileExplore/FileExplore.vue'
+import { useDiffFiles, formatDiffFiles } from './useDiffFiles'
+import type { DiffFileState, FileItem } from './types'
+import type { DiffFileSelection } from './FileExplore/fileTree'
+import DiffList from './DiffList/DiffList.vue'
+import { autoHeight, height2Num } from '@/DiffViewer/utils/autoHeight'
+
+const props = withDefaults(defineProps<WtoolDiffFilesProps>(), {
+  diffFiles: () => [],
+  fileOverScan: 30,
+  viewerStyle: () => ({}),
+})
 
-const vLoading = loadingDirective
-const loading = ref(true)
+const { files, fileMap } = formatDiffFiles(props.diffFiles)
+const DEFAULT_CONTEXT_LINE_COUNT = 3
 
-const props = withDefaults(
-  defineProps<{
-    diffFiles: WtoolDiffViewerProps[]
-  }>(),
-  {
-    diffFiles: () => [],
+const calculateViewerHeight = (file: FileItem) => {
+  const state = fileViewMap[file.fullPath]
+  if (props.viewerStyle.height) {
+    return height2Num(props.viewerStyle.height)
   }
+
+  const fileHeight = (() => {
+    const heightRange = {
+      minHeight: '0px',
+      maxHeight: '500px',
+      ...props.viewerStyle,
+    }
+    const height = autoHeight({
+      id: file.fullPath,
+      patch: file.diffPatch,
+      pair: file.diffPair,
+      minHeight: heightRange.minHeight,
+      maxHeight: heightRange.maxHeight,
+      unchangedVisiable: state.rawed,
+      unchangedCtxLineNum: DEFAULT_CONTEXT_LINE_COUNT,
+      unchangedMinLineNum: 1,
+    })
+
+    return height
+  })()
+
+  return fileHeight
+}
+const fileViewMap = reactive(
+  Object.fromEntries(
+    files.map(file => [
+      file.fullPath,
+      {
+        height: 0,
+        viewed: false,
+        rawed: false,
+      },
+    ])
+  )
 )
+onBeforeMount(() => {
+  // 初始计算高度
+  Object.entries(fileViewMap).forEach(([key, viewFile]) => {
+    freshViewState(fileMap[key])
+  })
+})
+
+const emit = defineEmits<{
+  'select-file': [selection: DiffFileSelection]
+}>()
+useDiffFiles({ isMaster: true })
+
+const freshViewState = (file: FileItem, newViewState = {}) => {
+  const state = fileViewMap[file.fullPath]
+  Object.assign(state, newViewState)
+  state.height = calculateViewerHeight(file)
+}
 </script>
 
 <style scoped>
@@ -36,12 +101,26 @@ const props = withDefaults(
   display: flex;
   flex-direction: column;
 
-  .toolbar {
-    flex-shrink: 0;
-  }
   .content-wrap {
     flex: 1;
+    min-height: 0;
+    display: flex;
     overflow: hidden;
+
+    .file-explore {
+      width: 300px;
+      min-width: 220px;
+      max-width: 40%;
+      flex: 0 0 300px;
+      border-right: 1px solid #dfe3e8;
+      box-sizing: border-box;
+    }
+
+    .filelist-viewer-wrap {
+      min-width: 0;
+      flex: 1;
+      overflow: hidden;
+    }
   }
 }
 </style>

package/src/DiffFiles/DiffList/DiffList.vue

@@ -0,0 +1,125 @@
+<template>
+  <VirtualScroll
+    ref="virtualScrollRef"
+    class="diff-list-wrap"
+    :items="diffFiles"
+    :itemSize="getItemSize"
+    keyField="fullPath"
+    :overscan="fileOverScan"
+  >
+    <template #default="{ item: file }">
+      <div
+        class="file-wrap"
+        :class="{ 'file-wrap--selected': selectedFileKey === file.fullPath }"
+        :style="{ paddingBottom: `${FILE_GAP}px` }"
+      >
+        <DiffViewer
+          :fileId="file.fullPath"
+          :diffPair="file.diffPair"
+          :diffPatch="file.diffPatch"
+          :viewerStyle="getViewerStyle(file)"
+          @viewStateChange="handleViewStateChange(file, $event)"
+        />
+      </div>
+    </template>
+  </VirtualScroll>
+</template>
+
+<script setup lang="ts">
+import { nextTick, ref } from 'vue'
+import { VirtualScroll, useVirtual } from '@yuhufe/web-ui'
+import type { DiffFileState, FileItem } from '../types'
+import { useDiffFiles } from '../useDiffFiles'
+import type { WtoolDiffViewerStyle } from '@/types'
+import DiffViewer from '@/DiffViewer/DiffViewer.vue'
+import { HEIGHT_TOP_BAR } from '@/DiffViewer/const'
+
+const FILE_GAP = 12
+const VIEWER_BORDER_HEIGHT = 2
+const BASE_HEIGHT = HEIGHT_TOP_BAR + VIEWER_BORDER_HEIGHT + FILE_GAP
+
+const props = withDefaults(
+  defineProps<{
+    diffFiles: FileItem[]
+    fileOverScan?: number
+    fileViewMap: Record<string, DiffFileState>
+    viewerStyle?: WtoolDiffViewerStyle
+  }>(),
+  {
+    diffFiles: () => [],
+    fileOverScan: 30,
+    fileViewMap: () => ({}),
+    viewerStyle: () => ({}),
+  }
+)
+
+const emit = defineEmits<{
+  'view-state-change': [file: FileItem, state: Partial<DiffFileState>]
+}>()
+
+const virtualScrollRef = ref(null)
+const { funcs } = useVirtual()
+const { funcs: diffFilesFuncs, registerFunc } = useDiffFiles()
+const { selectedFileKey } = diffFilesFuncs
+
+const selectFile = async (fullPath: string) => {
+  const index = props.diffFiles.findIndex(file => file.fullPath === fullPath)
+  if (index < 0) {
+    selectedFileKey.value = ''
+    return
+  }
+
+  selectedFileKey.value = fullPath
+  await nextTick()
+  funcs.virtualer?.value.scrollToIndex(index, { align: 'start' })
+}
+
+registerFunc({ selectFile })
+
+const getViewerStyle = (file: FileItem): WtoolDiffViewerStyle => {
+  const fileViewState = props.fileViewMap[file.fullPath]
+
+  return {
+    ...props.viewerStyle,
+    height: `${fileViewState?.height || 0}px`,
+    viewed: fileViewState?.viewed ?? false,
+    rawed: fileViewState?.rawed ?? false,
+  }
+}
+
+const getItemSize = (file: FileItem): number => {
+  let { height, viewed } = props.fileViewMap[file.fullPath]
+  // 此时代码隐藏
+  if (viewed) {
+    height = 0
+  }
+  return height + BASE_HEIGHT
+}
+
+const handleViewStateChange = (file: FileItem, state: Partial<DiffFileState>) => {
+  emit('view-state-change', file, state)
+  funcs.resizeItem(file.fullPath, getItemSize(file))
+}
+</script>
+
+<style scoped>
+.diff-list-wrap {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable;
+  padding: 8px;
+  box-sizing: border-box;
+
+  .file-wrap {
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  .file-wrap--selected :deep(.diff-viewer-wrap) {
+    border-color: #1677ff;
+  }
+}
+</style>

package/src/DiffFiles/FileExplore/FileExplore.vue

@@ -1,23 +1,181 @@
 <template>
-  <div class="file-explore-wrap"></div>
+  <div class="file-explore-wrap">
+    <FileSearch />
+    <div class="file-tree">
+      <VTree
+        ref="treeRef"
+        selectable
+        enable-leaf-only
+        :unselect-on-click="false"
+        :default-expand-all="true"
+        :animation="false"
+        :node-min-height="32"
+        :node-indent="8"
+        :render-node-amount="60"
+        :buffer-node-amount="20"
+        empty-text="No changed files"
+        @selected-change="handleSelectedChange"
+      >
+        <template #node="{ node }">
+          <div class="file-tree-node" :title="node.fullPath || node.title" @click="handleNodeClick(node)">
+            <img class="file-tree-node__icon" :src="node.isDirectory ? folderIcon : fileIcon" alt="" />
+            <span class="file-tree-node__label">{{ node.title }}</span>
+          </div>
+        </template>
+      </VTree>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, nextTick, shallowRef } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
+import VTree, { type TreeNode } from '@wsfe/vue-tree'
+import '@wsfe/vue-tree/style.css'
 
-import { loadingDirective } from '@yuhufe/web-ui'
-import type { FileTree, WtoolDiffViewerProps, ModelOptions } from '@/types'
+import fileIcon from '@/assets/file.svg'
+import folderIcon from '@/assets/folder.svg'
+import FileSearch from './FileSearch.vue'
+import { buildDiffFileTree, filterDiffFileTree, type DiffFileSelection, type DiffFileTreeNode } from './fileTree'
+import { type FileItem } from '../types'
+import { useDiffFiles } from '../useDiffFiles'
 
 const props = withDefaults(
   defineProps<{
-    diffFiles: WtoolDiffViewerProps[]
+    diffFiles: FileItem[]
   }>(),
   {
     diffFiles: () => [],
   }
 )
 
-const filesData = shallowRef<FileTree[]>([])
+const emit = defineEmits<{
+  'select-file': [selection: DiffFileSelection]
+}>()
+
+const { funcs: diffFilesFuncs, registerFunc } = useDiffFiles()
+
+type VTreeInstance = InstanceType<typeof VTree>
+type RenderedTreeNode = TreeNode & DiffFileTreeNode
+
+const treeRef = ref<VTreeInstance | null>(null)
+const filesData = shallowRef<DiffFileTreeNode[]>([])
+const searchKeyword = ref('')
+const selectedFileKey = ref('')
+
+const applySearch = (keyword: string) => {
+  const filteredTree = filterDiffFileTree(filesData.value, keyword)
+  treeRef.value?.setData(filteredTree)
+}
+registerFunc({
+  searchKeyword,
+  selectedFileKey,
+  filterTree: applySearch,
+})
+
+const loadTreeData = async () => {
+  filesData.value = buildDiffFileTree(props.diffFiles)
+
+  await nextTick()
+  treeRef.value?.clearSelected()
+  applySearch(searchKeyword.value)
+}
+
+const selectFile = (fullPath: string) => {
+  void diffFilesFuncs.selectFile?.(fullPath)
+  emit('select-file', { fullPath })
+}
+
+const handleNodeClick = node => {
+  node = node as RenderedTreeNode
+  if (node.isDirectory) {
+    treeRef.value?.setExpand(node.id, !node.expand, false)
+    return
+  }
+
+  selectFile(node.fullPath)
+}
+
+const handleSelectedChange = (node: RenderedTreeNode | null) => {
+  if (!node || node.isDirectory || diffFilesFuncs.selectedFileKey.value === node.fullPath) return
+
+  selectFile(node.fullPath)
+}
+
+onMounted(() => {
+  loadTreeData()
+})
 </script>
 
-<style scoped></style>
+<style lang="less" scoped>
+.file-explore-wrap {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: #fff;
+}
+
+.file-tree {
+  flex: 1 1 0;
+  width: 100%;
+  height: 0;
+  min-height: 0;
+  overflow: hidden;
+  color: #252a31;
+  font-size: 13px;
+}
+
+.file-tree-node {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  padding-right: 8px;
+  box-sizing: border-box;
+  font-size: 14px;
+
+  .file-tree-node__icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 7px;
+    flex: 0 0 16px;
+  }
+
+  .file-tree-node__label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.file-explore-wrap {
+  :deep(.vtree-tree__wrapper) {
+    .vtree-tree-node__title {
+      min-width: 0;
+      flex: 1;
+      overflow: hidden;
+      cursor: pointer;
+      margin-left: 0;
+      padding-left: 2px;
+    }
+
+    .vtree-tree-node__title_selected {
+      color: #1261a6;
+      background: #e7f2fc;
+    }
+
+    .vtree-tree__empty-text_default {
+      color: #747b85;
+      font-size: 13px;
+    }
+
+    .vtree-tree__scroll-area {
+      scrollbar-width: thin;
+    }
+  }
+}
+</style>

package/src/DiffFiles/FileExplore/FileSearch.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="file-search">
+    <input
+      class="file-search__input"
+      type="search"
+      v-model="searchKeyword"
+      :placeholder="placeholder"
+      autocomplete="off"
+      spellcheck="false"
+      @input="handleInput"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { debounce } from 'es-toolkit'
+import { useDiffFiles } from '../useDiffFiles'
+
+withDefaults(
+  defineProps<{
+    placeholder?: string
+  }>(),
+  {
+    placeholder: 'Search files',
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const { funcs } = useDiffFiles()
+const { searchKeyword } = funcs
+
+const handleInput = debounce((event: Event) => {
+  funcs.filterTree((event.target as HTMLInputElement).value)
+}, 300)
+</script>
+
+<style lang="less" scoped>
+.file-search {
+  flex: 0 0 auto;
+  padding: 8px 9px;
+  border-bottom: 1px solid #dfe3e8;
+  box-sizing: border-box;
+  background: #fff;
+}
+
+.file-search__input {
+  width: 100%;
+  height: 32px;
+  padding: 4px 9px;
+  border: 1px solid #cbd2d9;
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: #252a31;
+  background: #fff;
+  font: inherit;
+  font-size: 13px;
+  letter-spacing: 0;
+  outline: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+
+  &::placeholder {
+    color: #8a929c;
+  }
+
+  &:hover {
+    border-color: #7aaed8;
+  }
+
+  &:focus {
+    border-color: #2979b8;
+    box-shadow: 0 0 0 2px rgb(41 121 184 / 16%);
+  }
+
+  &::-webkit-search-cancel-button {
+    cursor: pointer;
+  }
+}
+</style>

package/src/DiffFiles/FileExplore/fileTree.ts

@@ -0,0 +1,102 @@
+import { treeUtil, strUtil } from '@yuhufe/web-common'
+import type { DiffFile } from '../../types'
+import type { FileItem } from '../types'
+
+export interface DiffFileSelection {
+  fullPath: string
+}
+export interface DiffFileTreeNode extends DiffFile {
+  id: string
+  title: string
+  name: string
+  fullPath: string
+  folderPath?: string
+  type?: string
+  isDirectory: boolean
+  children?: DiffFileTreeNode[]
+}
+
+function createDirectory(name: string, fullPath: string): DiffFileTreeNode {
+  return {
+    id: fullPath,
+    title: name,
+    name,
+    fullPath,
+    isDirectory: true,
+    children: [],
+  }
+}
+
+function finalizeDirectory(node: DiffFileTreeNode): DiffFileTreeNode {
+  const children = node.children?.map(child => (child.isDirectory ? finalizeDirectory(child) : child)) || []
+  let directory: DiffFileTreeNode = {
+    id: node.id,
+    title: node.title,
+    name: node.name,
+    fullPath: node.fullPath,
+    isDirectory: true,
+    children,
+  }
+
+  while (directory.children?.length === 1 && directory.children[0].isDirectory) {
+    const child = directory.children[0]
+    const name = `${directory.name}/${child.name}`
+
+    directory = {
+      id: child.id,
+      title: name,
+      name,
+      fullPath: child.fullPath,
+      isDirectory: true,
+      children: child.children,
+    }
+  }
+
+  return directory
+}
+
+// 格式：{ filePath: 'aaa/bbb/ccc', isDirectory: true, children: [] }
+export function buildDiffFileTree(files: FileItem[]): DiffFileTreeNode[] {
+  const root = createDirectory('', '')
+
+  files.forEach(file => {
+    const { fullPath, folderPath = '', name: filename } = file
+    const segments = folderPath.split('/').filter(Boolean)
+    let parent = root
+    let directoryPath = ''
+
+    segments.forEach(segment => {
+      directoryPath = directoryPath ? `${directoryPath}/${segment}` : segment
+      let directory = parent.children?.find((child: any) => child.isDirectory && child.name === segment)
+
+      if (!directory) {
+        directory = createDirectory(segment, directoryPath)
+        parent.children?.push(directory)
+      }
+
+      parent = directory
+    })
+
+    parent.children?.push({
+      ...file,
+      id: fullPath,
+      title: filename || '',
+      name: filename,
+      fullPath,
+      isDirectory: false,
+    } as any)
+  })
+
+  return root.children!.map(child => (child.isDirectory ? finalizeDirectory(child) : child))
+}
+
+export function filterDiffFileTree(fileTree: DiffFileTreeNode[], keyword: string): DiffFileTreeNode[] {
+  if (!keyword?.trim()) return fileTree
+
+  const filteredTree = treeUtil.filter(fileTree, node => {
+    const hasMatch = [node.title, node.fullPath].find(content => strUtil.like(content, keyword))
+    return hasMatch || Boolean(node.children?.length)
+  })
+
+  return (filteredTree || []) as DiffFileTreeNode[]
+}