zen-gitsync 2.0.3 → 2.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zen-gitsync",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "一个 git 自动查看差异并提交的工具",
   "main": "index.js",
   "type": "module",

package/src/ui/client/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@gitgraph/js": "^1.4.0",
     "element-plus": "^2.9.9",
+    "pinia": "^3.0.2",
     "socket.io-client": "^4.8.1",
     "vue": "^3.5.13"
   },

package/src/ui/client/src/App.vue

@@ -6,16 +6,19 @@ import LogList from './components/LogList.vue'
 import { ElMessage } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
 import logo from './assets/logo.svg'
+import { useGitStore } from './stores/gitStore'
 
 const configInfo = ref('')
 // 添加组件实例类型
 const logListRef = ref<InstanceType<typeof LogList> | null>(null)
 const gitStatusRef = ref<InstanceType<typeof GitStatus> | null>(null)
-const currentBranch = ref('') // 添加当前分支状态变量
-const userName = ref('') // 添加用户名变量
-const userEmail = ref('') // 添加用户邮箱变量
-const allBranches = ref<string[]>([]) // 添加所有分支列表
-const isChangingBranch = ref(false) // 添加分支切换状态
+
+// 使用Git Store
+const gitStore = useGitStore()
+
+// 添加初始化完成状态
+const initCompleted = ref(false)
+const currentDirectory = ref('')
 
 // 加载配置
 async function loadConfig() {
@@ -28,211 +31,139 @@ async function loadConfig() {
   }
 }
 
-// 获取当前分支
-async function getCurrentBranch() {
-  try {
-    const response = await fetch('/api/branch')
-    const data = await response.json()
-    if (data.branch) {
-      currentBranch.value = data.branch
-    }
-  } catch (error) {
-    console.error('获取分支信息失败:', error)
-  }
-}
-
-// 获取所有分支
-async function getAllBranches() {
+// 加载当前目录信息
+async function loadCurrentDirectory() {
   try {
-    const response = await fetch('/api/branches')
-    const data = await response.json()
-    if (data.branches && Array.isArray(data.branches)) {
-      allBranches.value = data.branches
-    }
+    const responseDir = await fetch('/api/current_directory')
+    const dirData = await responseDir.json()
+    currentDirectory.value = dirData.directory || '未知目录'
+    return dirData
   } catch (error) {
-    console.error('获取所有分支信息失败:', error)
+    console.error('获取当前目录失败:', error)
+    return { directory: '未知目录', isGitRepo: false }
   }
 }
 
-// 切换分支
-async function changeBranch(branch: string) {
-  console.log('切换到分支:', branch)
+onMounted(async () => {
+  console.log('---------- 页面初始化开始 ----------')
   
   try {
-    isChangingBranch.value = true
-    const response = await fetch('/api/checkout', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ branch })
-    })
+    // 并行加载配置和目录信息
+    const [_, dirData] = await Promise.all([
+      loadConfig(),
+      loadCurrentDirectory()
+    ])
     
-    const result = await response.json()
-    if (result.success) {
-      ElMessage({
-        message: `已切换到分支: ${branch}`,
-        type: 'success'
-      })
-      
-      // 刷新状态
-      getCurrentBranch()
-      
-      // 刷新Git状态
-      if (gitStatusRef.value) {
-        gitStatusRef.value.refreshStatus()
-      }
+    // 设置Git仓库状态
+    gitStore.isGitRepo = dirData.isGitRepo === true
+    gitStore.lastCheckedTime = Date.now()
+    
+    // 只有是Git仓库的情况下才加载Git相关信息
+    if (gitStore.isGitRepo) {
+      // 只获取分支和用户信息，不重复获取日志
+      await Promise.all([
+        gitStore.getCurrentBranch(),
+        gitStore.getAllBranches(),
+        gitStore.getUserInfo()
+      ])
       
-      // 刷新提交历史
-      if (logListRef.value) {
-        logListRef.value.refreshLog()
-      }
+      // 日志信息通过LogList组件直接加载即可，避免重复调用
+      // 移除 gitLogStore.fetchLog() 调用
     } else {
-      ElMessage({
-        message: `切换分支失败: ${result.error}`,
-        type: 'error'
-      })
-      // 恢复选择框为当前分支
-      currentBranch.value = currentBranch.value
+      ElMessage.warning('当前目录不是Git仓库，部分功能将不可用')
     }
   } catch (error) {
-    ElMessage({
-      message: `切换分支失败: ${(error as Error).message}`,
-      type: 'error'
-    })
-    // 恢复选择框为当前分支
-    currentBranch.value = currentBranch.value
+    console.error('初始化失败:', error)
   } finally {
-    isChangingBranch.value = false
-  }
-}
-
-// 获取Git用户信息
-async function getUserInfo() {
-  try {
-    const response = await fetch('/api/user-info')
-    const data = await response.json()
-    if (data.name && data.email) {
-      userName.value = data.name
-      userEmail.value = data.email
-    }
-  } catch (error) {
-    console.error('获取用户信息失败:', error)
+    // 标记初始化完成
+    initCompleted.value = true
+    console.log('---------- 页面初始化完成 ----------')
   }
-}
-
-onMounted(() => {
-  loadConfig()
-  getCurrentBranch() // 初始加载分支信息
-  getAllBranches() // 加载所有分支
-  getUserInfo() // 初始加载用户信息
 })
 
 // 处理提交成功事件
 function handleCommitSuccess() {
-  // 刷新提交历史
-  if (logListRef.value) {
-    logListRef.value.refreshLog()
-  }
+  // 不再调用gitLogStore.fetchLog()，改用更新LogList组件
   
   // 刷新Git状态
   if (gitStatusRef.value) {
     gitStatusRef.value.refreshStatus()
   }
+  
+  // 直接刷新提交历史
+  if (logListRef.value) {
+    logListRef.value.refreshLog()
+  }
 }
 
 // 处理推送成功事件
 function handlePushSuccess() {
-  // 刷新提交历史
+  // 不再调用gitLogStore.fetchLog()，改用更新LogList组件
+  gitStore.getCurrentBranch()
+  
+  // 直接刷新提交历史
   if (logListRef.value) {
     logListRef.value.refreshLog()
   }
-  
+}
+
+// 处理状态更新事件
+function handleStatusUpdate() {
   // 刷新Git状态
   if (gitStatusRef.value) {
     gitStatusRef.value.refreshStatus()
   }
-  
-  // 刷新分支信息
-  getCurrentBranch()
 }
 
 const createBranchDialogVisible = ref(false)
 const newBranchName = ref('')
 const selectedBaseBranch = ref('')
-const isCreatingBranch = ref(false)
 
 // 创建新分支
 async function createNewBranch() {
-  if (!newBranchName.value.trim()) {
-    ElMessage({
-      message: '分支名称不能为空',
-      type: 'warning'
-    })
-    return
-  }
+  const success = await gitStore.createBranch(newBranchName.value, selectedBaseBranch.value)
   
-  try {
-    isCreatingBranch.value = true
+  if (success) {
+    // 关闭对话框
+    createBranchDialogVisible.value = false
     
-    const response = await fetch('/api/create-branch', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        newBranchName: newBranchName.value,
-        baseBranch: selectedBaseBranch.value || currentBranch.value
-      })
-    })
+    // 重置表单
+    newBranchName.value = ''
     
-    const result = await response.json()
-    if (result.success) {
-      ElMessage({
-        message: `已创建并切换到分支: ${newBranchName.value}`,
-        type: 'success'
-      })
-      
-      // 关闭对话框
-      createBranchDialogVisible.value = false
-      
-      // 重置表单
-      newBranchName.value = ''
-      
-      // 刷新状态
-      getCurrentBranch()
-      getAllBranches()
-      
-      // 刷新Git状态
-      if (gitStatusRef.value) {
-        gitStatusRef.value.refreshStatus()
-      }
-      
-      // 刷新提交历史
-      if (logListRef.value) {
-        logListRef.value.refreshLog()
-      }
-    } else {
-      ElMessage({
-        message: `创建分支失败: ${result.error}`,
-        type: 'error'
-      })
+    // 刷新Git状态
+    if (gitStatusRef.value) {
+      gitStatusRef.value.refreshStatus()
+    }
+    
+    // 刷新提交历史
+    if (logListRef.value) {
+      logListRef.value.refreshLog()
     }
-  } catch (error) {
-    ElMessage({
-      message: `创建分支失败: ${(error as Error).message}`,
-      type: 'error'
-    })
-  } finally {
-    isCreatingBranch.value = false
   }
 }
 
 // 打开创建分支对话框
 function openCreateBranchDialog() {
-  selectedBaseBranch.value = currentBranch.value
+  selectedBaseBranch.value = gitStore.currentBranch
   createBranchDialogVisible.value = true
 }
+
+// 切换分支
+async function handleBranchChange(branch: string) {
+  const success = await gitStore.changeBranch(branch)
+  
+  if (success) {
+    // 刷新Git状态
+    if (gitStatusRef.value) {
+      gitStatusRef.value.refreshStatus()
+    }
+    
+    // 刷新提交历史
+    if (logListRef.value) {
+      logListRef.value.refreshLog()
+    }
+  }
+}
 </script>
 
 <template>
@@ -242,30 +173,54 @@ function openCreateBranchDialog() {
       <h1>Zen GitSync UI</h1>
     </div>
     <div class="header-info">
-      <div id="user-info" v-if="userName && userEmail">
+      <div id="user-info" v-if="gitStore.userName && gitStore.userEmail">
         <span class="user-label">用户:</span>
-        <span class="user-name">{{ userName }}</span>
-        <span class="user-email">&lt;{{ userEmail }}&gt;</span>
+        <span class="user-name">{{ gitStore.userName }}</span>
+        <span class="user-email">&lt;{{ gitStore.userEmail }}&gt;</span>
       </div>
       <!-- <div id="config-info">{{ configInfo }}</div> -->
     </div>
   </header>
   
   <div class="container">
-    <div class="layout-container">
+    <div v-if="!initCompleted" class="loading-container">
+      <el-card class="loading-card">
+        <div class="loading-spinner">
+          <el-icon class="is-loading"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"></path></svg></el-icon>
+        </div>
+        <div class="loading-text">加载中...</div>
+      </el-card>
+    </div>
+    
+    <div v-else class="layout-container">
       <!-- 左侧Git状态 -->
       <div class="left-panel">
-        <GitStatus ref="gitStatusRef" />
+        <GitStatus 
+          ref="gitStatusRef" 
+          :initial-directory="currentDirectory"
+        />
       </div>
       
       <!-- 右侧提交表单和历史 -->
-      <div class="right-panel">
+      <div class="right-panel" v-if="gitStore.isGitRepo">
         <CommitForm 
           @commit-success="handleCommitSuccess" 
-          @push-success="handlePushSuccess" 
+          @push-success="handlePushSuccess"
+          @status-update="handleStatusUpdate"
         />
         <LogList ref="logListRef" />
       </div>
+      <div class="right-panel" v-else>
+        <div class="card">
+          <h2>Git仓库初始化</h2>
+          <p>当前目录不是Git仓库，请先初始化Git仓库或切换到Git仓库目录。</p>
+          <!-- 实用提示 -->
+          <div class="tips">
+            <h3>可以使用以下命令初始化仓库：</h3>
+            <div class="code-block">git init</div>
+          </div>
+        </div>
+      </div>
 
       <!-- 创建分支对话框 -->
       <el-dialog
@@ -281,7 +236,7 @@ function openCreateBranchDialog() {
           <el-form-item label="基于分支">
             <el-select v-model="selectedBaseBranch" placeholder="选择基础分支" style="width: 100%;">
               <el-option 
-                v-for="branch in allBranches" 
+                v-for="branch in gitStore.allBranches" 
                 :key="branch" 
                 :label="branch" 
                 :value="branch"
@@ -295,7 +250,7 @@ function openCreateBranchDialog() {
             <el-button 
               type="primary" 
               @click="createNewBranch" 
-              :loading="isCreatingBranch"
+              :loading="gitStore.isCreatingBranch"
             >
               创建
             </el-button>
@@ -307,17 +262,17 @@ function openCreateBranchDialog() {
   </div>
 
   <footer class="main-footer">
-    <div class="branch-info" v-if="currentBranch">
+    <div class="branch-info" v-if="gitStore.currentBranch">
       <span class="branch-label">当前分支:</span>
       <el-select 
-        v-model="currentBranch" 
+        v-model="gitStore.currentBranch" 
         size="small" 
-        @change="changeBranch"
-        :loading="isChangingBranch"
+        @change="handleBranchChange"
+        :loading="gitStore.isChangingBranch"
         class="branch-select"
       >
         <el-option 
-          v-for="branch in allBranches" 
+          v-for="branch in gitStore.allBranches" 
           :key="branch" 
           :label="branch" 
           :value="branch"
@@ -503,6 +458,54 @@ h1 {
 .branch-select :deep(.el-input__suffix) {
   color: white;
 }
+
+.tips {
+  margin-top: 20px;
+  padding: 15px;
+  background-color: #f5f7fa;
+  border-radius: 5px;
+  border-left: 4px solid #409eff;
+}
+
+.tips h3 {
+  margin-top: 0;
+  font-size: 16px;
+  margin-bottom: 10px;
+}
+
+.code-block {
+  background-color: #2d2d2d;
+  color: #f8f8f2;
+  font-family: monospace;
+  padding: 10px 15px;
+  border-radius: 4px;
+  margin-bottom: 10px;
+}
+
+/* 添加加载中样式 */
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+}
+
+.loading-card {
+  width: 300px;
+  text-align: center;
+  padding: 30px;
+}
+
+.loading-spinner {
+  font-size: 48px;
+  margin-bottom: 20px;
+  color: #409eff;
+}
+
+.loading-text {
+  font-size: 18px;
+  color: #606266;
+}
 </style>
 
 <style scoped>