zen-gitsync 1.5.6 → 2.0.1

package/src/ui/client/src/components/GitStatus.vue

@@ -0,0 +1,403 @@
+<script setup lang="ts">
+import { ref, onMounted, defineExpose } from 'vue'
+import { ElMessage } from 'element-plus'
+// import { io } from 'socket.io-client'
+import { Refresh, ArrowLeft, ArrowRight, Folder } from '@element-plus/icons-vue'
+
+const status = ref('加载中...')
+// const socket = io()
+const isRefreshing = ref(false)
+const fileList = ref<{path: string, type: string}[]>([])
+const selectedFile = ref('')
+const diffContent = ref('')
+const diffDialogVisible = ref(false)
+const isLoadingDiff = ref(false)
+// 添加当前文件索引
+const currentFileIndex = ref(-1)
+
+// 解析 git status 输出，提取文件及类型
+function parseStatus(statusText: string) {
+  if (statusText === undefined) return
+  const lines = statusText.split('\n')
+  const files: {path: string, type: string}[] = []
+  for (const line of lines) {
+    // 匹配常见的 git status --porcelain 格式
+    // M: 修改, A: 新增, D: 删除, ??: 未跟踪
+    const match = line.match(/^([ MADRCU\?]{2})\s+(.+)$/)
+    if (match) {
+      let type = ''
+      const code = match[1].trim()
+      if (code === 'M' || code === 'MM' || code === 'AM' || code === 'RM') type = 'modified'
+      else if (code === 'A' || code === 'AA') type = 'added'
+      else if (code === 'D' || code === 'AD' || code === 'DA') type = 'deleted'
+      else if (code === '??') type = 'untracked'
+      else type = 'other'
+      files.push({ path: match[2], type })
+    }
+  }
+  fileList.value = files
+}
+
+const currentDirectory = ref('')
+async function loadStatus() {
+  try {
+    isRefreshing.value = true
+    // 获取当前工作目录
+    const responseDir = await fetch('/api/current_directory')
+    const dirData = await responseDir.json()
+    currentDirectory.value = dirData.directory || '未知目录'
+    
+    // 如果不是Git仓库，显示提示并返回
+    if (dirData.isGitRepo === false) {
+      status.value = '当前目录不是一个Git仓库'
+      fileList.value = []
+      ElMessage.warning('当前目录不是一个Git仓库')
+      return
+    }
+    
+    const response = await fetch('/api/status')
+    const data = await response.json()
+    status.value = data.status
+
+    const response_porcelain = await fetch('/api/status_porcelain')
+    const data_porcelain = await response_porcelain.json()
+    parseStatus(data_porcelain.status)
+    ElMessage({
+      message: 'Git 状态已刷新',
+      type: 'success',
+    })
+  } catch (error) {
+    status.value = '加载状态失败: ' + (error as Error).message
+    fileList.value = []
+    ElMessage({
+      message: '刷新失败: ' + (error as Error).message,
+      type: 'error',
+    })
+  } finally {
+    isRefreshing.value = false
+  }
+}
+
+// 格式化差异内容，添加颜色
+function formatDiff(diffText: string) {
+  if (!diffText) return '';
+  
+  // 将差异内容按行分割
+  const lines = diffText.split('\n');
+  
+  // 转义 HTML 标签的函数
+  function escapeHtml(text: string) {
+    return text
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+  }
+  
+  // 为每行添加适当的 CSS 类
+  return lines.map(line => {
+    // 先转义 HTML 标签，再添加样式
+    const escapedLine = escapeHtml(line);
+    
+    if (line.startsWith('diff --git')) {
+      return `<div class="diff-header">${escapedLine}</div>`;
+    } else if (line.startsWith('---')) {
+      return `<div class="diff-old-file">${escapedLine}</div>`;
+    } else if (line.startsWith('+++')) {
+      return `<div class="diff-new-file">${escapedLine}</div>`;
+    } else if (line.startsWith('@@')) {
+      return `<div class="diff-hunk-header">${escapedLine}</div>`;
+    } else if (line.startsWith('+')) {
+      return `<div class="diff-added">${escapedLine}</div>`;
+    } else if (line.startsWith('-')) {
+      return `<div class="diff-removed">${escapedLine}</div>`;
+    } else {
+      return `<div class="diff-context">${escapedLine}</div>`;
+    }
+  }).join('');
+}
+
+// 获取文件差异
+async function getFileDiff(filePath: string) {
+  try {
+    isLoadingDiff.value = true
+    selectedFile.value = filePath
+    // 设置当前文件索引
+    currentFileIndex.value = fileList.value.findIndex(file => file.path === filePath)
+    const response = await fetch(`/api/diff?file=${encodeURIComponent(filePath)}`)
+    const data = await response.json()
+    diffContent.value = data.diff || '没有变更'
+    diffDialogVisible.value = true
+  } catch (error) {
+    ElMessage({
+      message: '获取文件差异失败: ' + (error as Error).message,
+      type: 'error',
+    })
+    diffContent.value = '获取差异失败: ' + (error as Error).message
+  } finally {
+    isLoadingDiff.value = false
+  }
+}
+
+// 添加切换到上一个文件的方法
+async function goToPreviousFile() {
+  if (fileList.value.length === 0 || currentFileIndex.value <= 0) return
+  
+  const newIndex = currentFileIndex.value - 1
+  const prevFile = fileList.value[newIndex]
+  await getFileDiff(prevFile.path)
+}
+
+// 添加切换到下一个文件的方法
+async function goToNextFile() {
+  if (fileList.value.length === 0 || currentFileIndex.value >= fileList.value.length - 1) return
+  
+  const newIndex = currentFileIndex.value + 1
+  const nextFile = fileList.value[newIndex]
+  await getFileDiff(nextFile.path)
+}
+
+// 处理文件点击
+function handleFileClick(file: {path: string, type: string}) {
+  getFileDiff(file.path)
+}
+
+// 刷新Git状态的方法
+async function refreshStatus() {
+  await loadStatus()
+}
+
+onMounted(() => {
+  loadStatus()
+  
+  // Socket.io 事件
+  // socket.on('status_update', (data: { status: string }) => {
+  //   status.value = data.status
+  //   parseStatus(data.status)
+  // })
+})
+
+// onUnmounted(() => {
+//   socket.disconnect()
+// })
+
+// 暴露刷新方法给父组件
+defineExpose({
+  refreshStatus
+})
+</script>
+
+<template>
+  <div class="card">
+    <div class="current-directory">
+      <el-icon><Folder /></el-icon>
+      <span>{{ currentDirectory }}</span>
+    </div>
+    <div class="status-header">
+      <h2>Git 状态</h2>
+      <el-button 
+        type="primary" 
+        :icon="Refresh" 
+        circle 
+        size="small" 
+        @click="refreshStatus" 
+        :loading="isRefreshing"
+      />
+    </div>
+    <div class="status-box">{{ status }}</div>
+    <!-- 颜色区分不同类型文件 -->
+    <div v-if="fileList.length" class="file-list">
+      <div 
+        v-for="file in fileList" 
+        :key="file.path" 
+        :class="['file-item', file.type]"
+        @click="handleFileClick(file)"
+      >
+        <span class="file-type">{{ fileTypeLabel(file.type) }}</span>
+        <span class="file-path">{{ file.path }}</span>
+      </div>
+    </div>
+    
+    <!-- 文件差异对话框 -->
+    <el-dialog
+      v-model="diffDialogVisible"
+      :title="`文件差异: ${selectedFile}`"
+      width="80%"
+      destroy-on-close
+    >
+      <div v-loading="isLoadingDiff" class="diff-content">
+        <div v-if="diffContent" v-html="formatDiff(diffContent)" class="diff-formatted"></div>
+        <div v-else class="no-diff">该文件没有差异或是新文件</div>
+      </div>
+      
+      <!-- 添加文件导航按钮 -->
+      <div class="file-navigation">
+        <el-button 
+          :icon="ArrowLeft" 
+          @click="goToPreviousFile" 
+          :disabled="currentFileIndex <= 0 || fileList.length === 0"
+          circle
+        />
+        <span class="file-counter">{{ currentFileIndex + 1 }} / {{ fileList.length }}</span>
+        <el-button 
+          :icon="ArrowRight" 
+          @click="goToNextFile" 
+          :disabled="currentFileIndex >= fileList.length - 1 || fileList.length === 0"
+          circle
+        />
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+// 辅助函数：类型标签
+function fileTypeLabel(type: string) {
+  if (type === 'added') return '新增'
+  if (type === 'modified') return '修改'
+  if (type === 'deleted') return '删除'
+  if (type === 'untracked') return '未跟踪'
+  return '其它'
+}
+</script>
+
+<style scoped>
+.status-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.status-header h2 {
+  margin: 0;
+}
+
+.file-list {
+  margin-top: 10px;
+}
+
+.file-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 4px;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+.file-item:hover {
+  opacity: 0.8;
+}
+.file-item.added {
+  background: #e6ffed;
+  color: #22863a;
+}
+.file-item.modified {
+  background: #fff5b1;
+  color: #b08800;
+}
+.file-item.deleted {
+  background: #ffeef0;
+  color: #cb2431;
+}
+.file-item.untracked {
+  background: #f1f8ff;
+  color: #0366d6;
+}
+.file-type {
+  font-weight: bold;
+  margin-right: 8px;
+}
+.file-path {
+  font-family: monospace;
+}
+
+.diff-content {
+  max-height: 70vh;
+  overflow-y: auto;
+  background-color: #f6f8fa;
+  border: 1px solid #e1e4e8;
+  border-radius: 3px;
+  padding: 15px;
+  font-family: monospace;
+  white-space: pre-wrap;
+}
+
+.diff-formatted {
+  margin: 0;
+}
+
+/* 差异内容的颜色样式 - 使用深度选择器 */
+:deep(.diff-header) {
+  color: #24292e;
+  font-weight: bold;
+}
+
+:deep(.diff-old-file) {
+  color: #cb2431;
+  background-color: #ffeef0;
+}
+
+:deep(.diff-new-file) {
+  color: #22863a;
+  background-color: #e6ffed;
+}
+
+:deep(.diff-hunk-header) {
+  color: #6f42c1;
+  background-color: #f1f8ff;
+}
+
+:deep(.diff-added) {
+  color: #22863a;
+  background-color: #e6ffed;
+}
+
+:deep(.diff-removed) {
+  color: #cb2431;
+  background-color: #ffeef0;
+}
+
+:deep(.diff-context) {
+  color: #24292e;
+}
+
+.no-diff {
+  text-align: center;
+  padding: 20px;
+  color: #666;
+}
+
+/* 添加文件导航样式 */
+.file-navigation {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 15px;
+  gap: 10px;
+}
+
+.file-counter {
+  font-size: 14px;
+  color: #606266;
+}
+.current-directory {
+  padding: 10px 15px;
+  background-color: #f0f0f0;
+  border-bottom: 1px solid #e1e4e8;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: monospace;
+}
+.not-git-repo {
+  margin: 10px 0;
+  padding: 10px;
+  background-color: #fffbf6;
+  border: 1px solid #f0c78a;
+  border-radius: 4px;
+}
+</style>

package/src/ui/client/src/components/LogList.vue

@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import { ref, onMounted, defineExpose } from 'vue'
+import { ElTable, ElTableColumn, ElTag, ElButton } from 'element-plus'
+import { RefreshRight } from '@element-plus/icons-vue'
+import 'element-plus/dist/index.css'
+import { createGitgraph } from '@gitgraph/js'
+
+interface LogItem {
+  hash: string
+  date: string
+  author: string
+  email: string  // 添加邮箱字段
+  message: string
+  branch?: string // 添加分支信息字段
+  parents?: string[] // 添加父提交信息
+}
+
+const logs = ref<LogItem[]>([])
+const errorMessage = ref('')
+const isLoading = ref(false)
+const showAllCommits = ref(false)
+const totalCommits = ref(0)
+const showGraphView = ref(true) // 控制是否显示图表视图
+const graphContainer = ref<HTMLElement | null>(null)
+
+// 加载提交历史
+async function loadLog(all = false) {
+  try {
+    isLoading.value = true
+    showAllCommits.value = all
+    // 修改API调用，获取更详细的提交信息，包括父提交
+    const url = all ? '/api/log?all=true&graph=true' : '/api/log?graph=true'
+    const response = await fetch(url)
+    logs.value = await response.json()
+    totalCommits.value = logs.value.length
+    errorMessage.value = ''
+    
+    // 加载完数据后渲染图表
+    if (showGraphView.value) {
+      setTimeout(renderGraph, 0)
+    }
+  } catch (error) {
+    errorMessage.value = '加载提交历史失败: ' + (error as Error).message
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// 渲染Git图表
+async function renderGraph() {
+  if (!graphContainer.value || logs.value.length === 0) return
+  
+  // 清空容器
+  graphContainer.value.innerHTML = ''
+  
+  // 获取当前分支
+  const branchResponse = await fetch('/api/branch')
+  const { branch: currentBranch } = await branchResponse.json()
+
+  // 创建gitgraph实例
+  const gitgraph = createGitgraph(graphContainer.value, {
+    // 自定义选项
+    // @ts-ignore: true
+    orientation: 'vertical-reverse', // 从上到下的方向
+    // @ts-ignore: true
+    template: 'metro', // 使用metro模板
+    author: '提交者 <committer@example.com>'
+  })
+  
+  // 处理分支和提交数据
+  // 注意：这里的实现是简化的，实际需要根据API返回的数据结构调整
+  const branches: Record<string, any> = {}
+  const mainBranch = gitgraph.branch(currentBranch || 'main')  // 使用API获取的分支或默认main
+  branches[currentBranch || 'main'] = mainBranch
+  
+  // 简化示例 - 实际实现需要根据API返回的数据结构调整
+  logs.value.forEach(commit => {
+    // 这里需要根据实际数据结构构建分支图
+    let currentBranch = mainBranch
+    
+    // 如果有分支信息，使用对应的分支
+    if (commit.branch) {
+      const branchName = formatBranchName(commit.branch.split(',')[0])
+      if (!branches[branchName]) {
+        branches[branchName] = gitgraph.branch(branchName)
+      }
+      currentBranch = branches[branchName]
+    }
+    
+    // 创建提交，添加邮箱信息
+    currentBranch.commit({
+      hash: commit.hash,
+      subject: commit.message,
+      author: `${commit.author} <${commit.email}>`
+    })
+  })
+}
+
+// 切换视图模式
+function toggleViewMode() {
+  showGraphView.value = !showGraphView.value
+  if (showGraphView.value && logs.value.length > 0) {
+    // 延迟执行以确保DOM已更新
+    setTimeout(renderGraph, 0)
+  }
+}
+
+// 切换显示所有提交
+function toggleAllCommits() {
+  loadLog(!showAllCommits.value)
+}
+
+onMounted(() => {
+  loadLog()
+})
+const refreshLog = () => loadLog(showAllCommits.value)
+// 暴露方法给父组件
+defineExpose({
+  refreshLog
+})
+</script>
+
+<template>
+  <div class="card">
+    <div class="log-header">
+      <h2>提交历史</h2>
+      <div class="log-actions">
+        <el-button 
+          type="primary" 
+          size="small"
+          @click="toggleViewMode"
+        >
+          {{ showGraphView ? '表格视图' : '图表视图' }}
+        </el-button>
+        <el-button 
+          type="primary" 
+          size="small" 
+          @click="toggleAllCommits" 
+          :loading="isLoading"
+        >
+          {{ showAllCommits ? '显示最近100条' : '显示所有提交' }}
+        </el-button>
+        <el-button 
+          :icon="RefreshRight" 
+          circle 
+          size="small" 
+          @click="refreshLog()" 
+          :loading="isLoading"
+        />
+      </div>
+    </div>
+    <div v-if="errorMessage">{{ errorMessage }}</div>
+    <div v-else>
+      <!-- 图表视图 -->
+      <div v-if="showGraphView" class="graph-view">
+        <div class="commit-count" v-if="logs.length > 0">
+          显示 {{ logs.length }} 条提交记录 {{ showAllCommits ? '(全部)' : '(最近100条)' }}
+        </div>
+        <div ref="graphContainer" class="graph-container"></div>
+      </div>
+      
+      <!-- 表格视图 -->
+      <div v-else>
+        <div class="commit-count" v-if="logs.length > 0">
+          显示 {{ logs.length }} 条提交记录 {{ showAllCommits ? '(全部)' : '(最近100条)' }}
+        </div>
+        <el-table :data="logs" style="width: 100%" stripe border v-loading="isLoading">
+          <el-table-column prop="hash" label="提交哈希" width="100" resizable />
+          <el-table-column prop="date" label="日期" width="180" resizable />
+          <el-table-column label="作者" width="200" resizable>
+            <template #default="scope">
+              {{ scope.row.author }} &lt;{{ scope.row.email }}&gt;
+            </template>
+          </el-table-column>
+          <el-table-column label="分支" width="180" resizable>
+            <template #default="scope">
+              <div v-if="scope.row.branch" class="branch-container">
+                <el-tag 
+                  v-for="(ref, index) in scope.row.branch.split(',')" 
+                  :key="index"
+                  size="small"
+                  :type="getBranchTagType(ref)"
+                  class="branch-tag"
+                >
+                  {{ formatBranchName(ref) }}
+                </el-tag>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="message" label="提交信息" min-width="250" />
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.log-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.log-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.branch-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.branch-tag {
+  margin-right: 4px;
+}
+
+.commit-count {
+  margin-bottom: 10px;
+  font-size: 14px;
+  color: #606266;
+  text-align: right;
+}
+
+.graph-container {
+  width: 100%;
+  height: 600px;
+  overflow: auto;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 10px;
+  background-color: #fff;
+  /* transform: scale(0.8); */
+}
+
+.graph-view {
+  width: 100%;
+}
+</style>
+
+<script lang="ts">
+// 辅助函数：格式化分支名称
+function formatBranchName(ref: string) {
+  // 移除 "HEAD -> " 前缀
+  ref = ref.trim().replace(/^HEAD\s*->\s*/, '')
+  
+  // 移除 "origin/" 前缀
+  ref = ref.replace(/^origin\//, '')
+  
+  // 移除 "tag: " 前缀，但保留标签名
+  ref = ref.replace(/^tag:\s*/, '')
+  
+  return ref.trim()
+}
+
+// 辅助函数：根据分支类型返回不同的标签类型
+function getBranchTagType(ref: string) {
+  if (ref.includes('HEAD')) return 'success'
+  if (ref.includes('tag:')) return 'warning'
+  if (ref.includes('origin/')) return 'info'
+  return 'primary' // 修改空字符串为有效的type值
+}
+</script>
+
+/* 添加表格列调整样式 */
+.el-table .el-table__cell .cell {
+  word-break: break-all;
+}

package/src/ui/client/src/main.ts

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+const app = createApp(App)
+app.mount('#app')

package/src/ui/client/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />