zen-gitsync 2.0.3 → 2.0.5

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

@@ -4,18 +4,21 @@ import GitStatus from './components/GitStatus.vue'
 import CommitForm from './components/CommitForm.vue'
 import LogList from './components/LogList.vue'
 import { ElMessage } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
+import { Plus, Setting } 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() {
+// 加载当前目录信息
+async function loadCurrentDirectory() {
   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() {
-  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()
-  }
-  
-  // 刷新Git状态
-  if (gitStatusRef.value) {
-    gitStatusRef.value.refreshStatus()
-  }
-}
-
-// 处理推送成功事件
-function handlePushSuccess() {
-  // 刷新提交历史
-  if (logListRef.value) {
-    logListRef.value.refreshLog()
-  }
-  
-  // 刷新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()
+    }
+  }
+}
+
+// 添加用户设置相关状态
+const userSettingsDialogVisible = ref(false)
+const tempUserName = ref('')
+const tempUserEmail = ref('')
+
+// 打开用户设置对话框
+function openUserSettingsDialog() {
+  tempUserName.value = gitStore.userName
+  tempUserEmail.value = gitStore.userEmail
+  userSettingsDialogVisible.value = true
+}
+
+// 保存用户设置
+async function saveUserSettings() {
+  if (!tempUserName.value || !tempUserEmail.value) {
+    ElMessage.warning('用户名和邮箱不能为空')
+    return
+  }
+
+  const success = await gitStore.restoreUserConfig(tempUserName.value, tempUserEmail.value)
+  if (success) {
+    userSettingsDialogVisible.value = false
+  }
+}
+
+// 清除用户配置
+async function clearUserSettings() {
+  const success = await gitStore.clearUserConfig()
+  if (success) {
+    tempUserName.value = ''
+    tempUserEmail.value = ''
+  }
+}
 </script>
 
 <template>
@@ -242,29 +173,96 @@ 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>
+        <el-button 
+          type="primary" 
+          size="small" 
+          @click="openUserSettingsDialog"
+          class="user-settings-btn"
+          circle
+        >
+          <el-icon><Setting /></el-icon>
+        </el-button>
+      </div>
+      <div id="user-info" v-else>
+        <span class="user-label">用户: </span>
+        <span class="user-warning">未配置</span>
+        <el-button 
+          type="primary" 
+          size="small" 
+          @click="openUserSettingsDialog"
+          class="user-settings-btn"
+          circle
+        >
+          <el-icon><Setting /></el-icon>
+        </el-button>
       </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">
-        <CommitForm 
-          @commit-success="handleCommitSuccess" 
-          @push-success="handlePushSuccess" 
-        />
-        <LogList ref="logListRef" />
+      <div class="right-panel" v-if="gitStore.isGitRepo">
+        <!-- 当用户未配置时显示配置提示 -->
+        <div v-if="!gitStore.userName || !gitStore.userEmail" class="card">
+          <h2>Git用户未配置</h2>
+          <p>请先配置Git用户信息才能进行提交操作。</p>
+          <div class="tips">
+            <h3>您可以通过以下方式配置：</h3>
+            <ol>
+              <li>点击右上角的设置按钮，配置用户名和邮箱</li>
+              <li>或者使用命令行配置：</li>
+              <div class="code-block">
+                git config --global user.name "您的用户名"<br>
+                git config --global user.email "您的邮箱"
+              </div>
+            </ol>
+            <el-button 
+              type="primary" 
+              @click="openUserSettingsDialog"
+            >
+              立即配置
+            </el-button>
+          </div>
+        </div>
+        <!-- 用户已配置显示提交表单 -->
+        <template v-else>
+          <CommitForm />
+          <LogList ref="logListRef" />
+        </template>
+      </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>
 
       <!-- 创建分支对话框 -->
@@ -281,7 +279,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 +293,7 @@ function openCreateBranchDialog() {
             <el-button 
               type="primary" 
               @click="createNewBranch" 
-              :loading="isCreatingBranch"
+              :loading="gitStore.isCreatingBranch"
             >
               创建
             </el-button>
@@ -307,35 +305,81 @@ function openCreateBranchDialog() {
   </div>
 
   <footer class="main-footer">
-    <div class="branch-info" v-if="currentBranch">
-      <span class="branch-label">当前分支:</span>
-      <el-select 
-        v-model="currentBranch" 
-        size="small" 
-        @change="changeBranch"
-        :loading="isChangingBranch"
-        class="branch-select"
-      >
-        <el-option 
-          v-for="branch in allBranches" 
-          :key="branch" 
-          :label="branch" 
-          :value="branch"
-        />
-      </el-select>
-      <el-button 
-        type="primary" 
-        size="small" 
-        @click="openCreateBranchDialog"
-        style="margin-left: 5px;"
-      >
-        <el-icon><Plus /></el-icon>
-      </el-button>
+    <div class="branch-info" v-if="gitStore.currentBranch">
+      <div class="branch-wrapper">
+        <span class="branch-label">当前分支:</span>
+        <el-select 
+          v-model="gitStore.currentBranch" 
+          size="small" 
+          @change="handleBranchChange"
+          :loading="gitStore.isChangingBranch"
+          class="branch-select"
+        >
+          <el-option 
+            v-for="branch in gitStore.allBranches" 
+            :key="branch" 
+            :label="branch" 
+            :value="branch"
+          />
+        </el-select>
+        <el-button 
+          type="primary" 
+          size="small" 
+          @click="openCreateBranchDialog"
+          class="create-branch-btn"
+        >
+          <el-icon><Plus /></el-icon>
+          新建分支
+        </el-button>
+      </div>
     </div>
     <div class="footer-right">
       <!-- <span>Zen GitSync © 2024</span> -->
     </div>
   </footer>
+
+  <!-- 用户设置对话框 -->
+  <el-dialog
+    v-model="userSettingsDialogVisible"
+    title="Git用户设置"
+    width="30%"
+    destroy-on-close
+  >
+    <el-form>
+      <el-form-item label="用户名">
+        <el-input v-model="tempUserName" placeholder="请输入Git用户名" />
+      </el-form-item>
+      <el-form-item label="邮箱">
+        <el-input v-model="tempUserEmail" placeholder="请输入Git邮箱" />
+      </el-form-item>
+      <el-form-item>
+        <el-alert
+          type="info"
+          :closable="false"
+          show-icon
+        >
+          这些设置将影响全局Git配置，对所有Git仓库生效。
+        </el-alert>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button 
+          type="danger" 
+          @click="clearUserSettings"
+        >
+          清除配置
+        </el-button>
+        <el-button @click="userSettingsDialogVisible = false">取消</el-button>
+        <el-button 
+          type="primary" 
+          @click="saveUserSettings"
+        >
+          保存
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
 </template>
 
 <style>
@@ -488,10 +532,10 @@ h1 {
   font-size: 12px;
 }
 /* 添加分支选择框样式 */
-.branch-select {
+/* .branch-select {
   width: 150px;
   margin-left: 5px;
-}
+} */
 
 /* 调整下拉选择框在深色背景下的样式 */
 .branch-select :deep(.el-input__inner) {
@@ -503,6 +547,63 @@ 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;
+}
+
+.user-settings-btn {
+  margin-left: 10px;
+}
+
+.user-warning {
+  color: #E6A23C;
+  font-weight: bold;
+}
 </style>
 
 <style scoped>
@@ -525,15 +626,63 @@ h1 {
   left: 0;
   right: 0;
   z-index: 100;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
 }
 
 .branch-info {
   display: flex;
   align-items: center;
+  gap: 10px;
+}
+
+.branch-wrapper {
+  display: flex;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+  padding: 8px 12px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s;
+}
+
+.branch-wrapper:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.branch-label {
+  font-weight: bold;
+  margin-right: 10px;
+  color: #ffffff;
+}
+
+.branch-select {
+  width: 200px;
+  margin-right: 10px;
+}
+
+.create-branch-btn {
+  background-color: #2ea44f;
+  border-color: #2ea44f;
+  transition: all 0.3s;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.create-branch-btn:hover {
+  background-color: #3bbc63;
+  border-color: #3bbc63;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
 .footer-right {
-  color: rgba(255, 255, 255, 0.7);
-  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 13px;
+  background-color: rgba(255, 255, 255, 0.1);
+  padding: 8px 12px;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 </style>