feat: Phase 2 — Git 核心功能，go-git 克隆、SSE 进度、D3.js 图形、diff2html 查看器

2026-06-18 22:59:51 +08:00
parent 1e9b1a2129
commit 34ef868e10
11 changed files with 2024 additions and 247 deletions
@@ -0,0 +1,135 @@
+// Diff Viewer using diff2html
+const DiffViewer = {
+    init(containerId) {
+        this.container = document.getElementById(containerId);
+        if (!this.container) {
+            console.error('Diff container not found:', containerId);
+            return;
+        }
+    },
+
+    // Render unified diff string
+    renderDiff(diffString, options = {}) {
+        if (!this.container) return;
+
+        const config = {
+            drawFileList: options.drawFileList !== false,
+            fileListToggle: options.fileListToggle !== false,
+            fileListStartVisible: options.fileListStartVisible !== false,
+            fileContentToggle: options.fileContentToggle !== false,
+            matching: options.matching || 'lines',
+            outputFormat: options.outputFormat || 'side-by-side',
+            synchronisedScroll: true,
+            highlight: true,
+            renderNothingWhenEmpty: false,
+        };
+
+        // Use diff2html to render
+        const diffHtml = Diff2Html.html(diffString, config);
+        this.container.innerHTML = diffHtml;
+
+        // Add syntax highlighting
+        this.container.querySelectorAll('pre code').forEach(block => {
+            if (window.hljs) {
+                hljs.highlightElement(block);
+            }
+        });
+    },
+
+    // Render per-file diffs
+    renderFiles(files, options = {}) {
+        if (!this.container) return;
+
+        if (!files || files.length === 0) {
+            this.container.innerHTML = '<div class="text-gray-500 p-4">No changes</div>';
+            return;
+        }
+
+        // Combine all patches
+        const combinedDiff = files.map(f => f.patch).join('\n');
+        this.renderDiff(combinedDiff, options);
+    },
+
+    // Load and render diff from API
+    async loadDiff(repoId, base, head, options = {}) {
+        if (!this.container) return;
+
+        this.container.innerHTML = '<div class="text-center p-8"><div class="spinner inline-block"></div><p class="mt-2 text-gray-500">Loading diff...</p></div>';
+
+        try {
+            const url = `/api/repos/${repoId}/diff?base=${encodeURIComponent(base)}&head=${encodeURIComponent(head)}`;
+            const resp = await fetch(url);
+            if (!resp.ok) throw new Error('Failed to load diff');
+
+            const data = await resp.json();
+
+            if (data.diff) {
+                this.renderDiff(data.diff, options);
+            } else if (Array.isArray(data)) {
+                this.renderFiles(data, options);
+            }
+        } catch (err) {
+            this.container.innerHTML = `<div class="text-red-500 p-4">Error loading diff: ${err.message}</div>`;
+        }
+    },
+
+    // Load per-file diffs
+    async loadFiles(repoId, base, head) {
+        if (!this.container) return;
+
+        this.container.innerHTML = '<div class="text-center p-8"><div class="spinner inline-block"></div><p class="mt-2 text-gray-500">Loading files...</p></div>';
+
+        try {
+            const url = `/api/repos/${repoId}/diff?base=${encodeURIComponent(base)}&head=${encodeURIComponent(head)}&per_file=true`;
+            const resp = await fetch(url);
+            if (!resp.ok) throw new Error('Failed to load diff');
+
+            const files = await resp.json();
+            this.renderFiles(files);
+        } catch (err) {
+            this.container.innerHTML = `<div class="text-red-500 p-4">Error: ${err.message}</div>`;
+        }
+    },
+
+    // Switch view mode (side-by-side or line-by-line)
+    setViewMode(mode) {
+        if (!this.container) return;
+
+        const config = {
+            drawFileList: true,
+            outputFormat: mode === 'unified' ? 'line-by-line' : 'side-by-side',
+        };
+
+        // Re-render with existing diff content
+        const existingDiff = this.container.querySelector('.d2h-diff-table');
+        if (existingDiff) {
+            // Get the raw diff from the container's data
+            const rawDiff = this.container.dataset.rawDiff;
+            if (rawDiff) {
+                this.renderDiff(rawDiff, config);
+            }
+        }
+    },
+
+    // Toggle file list visibility
+    toggleFileList() {
+        const fileList = this.container.querySelector('.d2h-file-list');
+        if (fileList) {
+            fileList.style.display = fileList.style.display === 'none' ? 'block' : 'none';
+        }
+    },
+
+    // Expand/collapse all files
+    toggleAllFiles(expand) {
+        const fileContents = this.container.querySelectorAll('.d2h-file-wrapper');
+        fileContents.forEach(file => {
+            const content = file.querySelector('.d2h-file-diff');
+            if (content) {
+                content.style.display = expand ? 'block' : 'none';
+            }
+        });
+    }
+};
+
+// Export for use
+window.DiffViewer = DiffViewer;