zen-gitsync 2.0.6 → 2.0.8

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, watch } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
-import { Setting, Edit } from "@element-plus/icons-vue";
+import { Setting, Edit, Check, Upload, RefreshRight, Delete, Position, Download, Connection } from "@element-plus/icons-vue";
 import { useGitLogStore } from "../stores/gitLogStore";
 import { useGitStore } from "../stores/gitStore";
 
@@ -10,6 +10,11 @@ const gitStore = useGitStore();
 const commitMessage = ref("");
 const isPushing = ref(false);
 // 添加提交并推送的状态变量
+const showPushSuccess = ref(false);
+// 添加git pull和fetch操作相关状态变量
+const isGitPulling = ref(false);
+const isGitFetching = ref(false);
+// 添加placeholder变量
 const placeholder = ref("输入提交信息...");
 // 添加默认提交信息变量
 const defaultCommitMessage = ref("");
@@ -39,6 +44,10 @@ const isEditingScope = ref(false);
 const originalScopeTemplate = ref("");
 const editingScopeIndex = ref(-1);
 
+// 默认提交信息设置相关变量
+const defaultMessageDialogVisible = ref(false);
+const newDefaultMessage = ref("");
+
 // 跳过钩子
 const skipHooks = ref(false);
 
@@ -53,6 +62,12 @@ const commitTypeOptions = [
   { value: "chore", label: "chore: 构建/工具修改" },
 ];
 
+// 添加默认提交信息模板相关变量
+const messageTemplates = ref<string[]>([]);
+const isEditingMessage = ref(false);
+const originalMessageTemplate = ref("");
+const editingMessageIndex = ref(-1);
+
 // 监听标准化提交状态变化，保存到localStorage
 watch(isStandardCommit, (newValue) => {
   localStorage.setItem("zen-gitsync-standard-commit", newValue.toString());
@@ -122,6 +137,11 @@ async function loadConfig() {
     if (config.scopeTemplates && Array.isArray(config.scopeTemplates)) {
       scopeTemplates.value = config.scopeTemplates;
     }
+    
+    // 加载提交信息模板
+    if (config.messageTemplates && Array.isArray(config.messageTemplates)) {
+      messageTemplates.value = config.messageTemplates;
+    }
   } catch (error) {
     console.error("加载配置失败:", error);
   }
@@ -530,6 +550,9 @@ async function commitChanges() {
       // 触发成功事件
       gitLogStore.fetchStatus();
       gitLogStore.fetchLog();
+      
+      // 手动更新分支状态
+      gitStore.getBranchStatus();
     }
   } catch (error) {
     ElMessage({
@@ -539,25 +562,65 @@ async function commitChanges() {
   }
 }
 
+// 显示推送成功提示
+function showPushSuccessIndicator() {
+  showPushSuccess.value = true;
+  setTimeout(() => {
+    showPushSuccess.value = false;
+  }, 2000);
+}
+
 // 推送到远程 (git push)
 async function pushToRemote() {
+  isPushing.value = true;
   try {
-    isPushing.value = true
-    // 使用Store推送更改
-    const result = await gitLogStore.pushToRemote();
-
-    if (result) {
-      // 触发成功事件
-      gitStore.getCurrentBranch();
-      gitLogStore.fetchLog();
-    }
+    await gitLogStore.pushToRemote();
+    // 显示推送成功提示
+    showPushSuccessIndicator();
+    
+    // 手动更新分支状态
+    gitStore.getBranchStatus();
   } catch (error) {
     ElMessage({
       message: `推送失败: ${(error as Error).message}`,
-      type: "error",
+      type: 'error',
     });
   } finally {
-    isPushing.value = false
+    isPushing.value = false;
+  }
+}
+
+// 处理git pull操作
+async function handleGitPull() {
+  isGitPulling.value = true;
+  try {
+    await gitStore.gitPull();
+    // 刷新状态
+    await gitLogStore.fetchStatus();
+  } catch (error) {
+    ElMessage({
+      message: `拉取失败: ${(error as Error).message}`,
+      type: 'error',
+    });
+  } finally {
+    isGitPulling.value = false;
+  }
+}
+
+// 处理git fetch --all操作
+async function handleGitFetchAll() {
+  isGitFetching.value = true;
+  try {
+    await gitStore.gitFetchAll();
+    // 刷新状态
+    await gitLogStore.fetchStatus();
+  } catch (error) {
+    ElMessage({
+      message: `获取远程分支信息失败: ${(error as Error).message}`,
+      type: 'error',
+    });
+  } finally {
+    isGitFetching.value = false;
   }
 }
 
@@ -599,22 +662,31 @@ async function addCommitAndPush() {
   }
 
   try {
+    isPushing.value = true
     await gitLogStore.addCommitAndPush(finalCommitMessage.value, skipHooks.value);
 
-
     // 清空提交信息
     clearCommitFields();
 
     // 触发成功事件
     gitStore.getCurrentBranch();
+    
+    // 确保通过fetchLog获取的是最新的第1页数据
     gitLogStore.fetchLog();
+    
+    // 手动更新分支状态
+    gitStore.getBranchStatus();
+    
+    // 显示成功动画
+    isPushing.value = false
+    showPushSuccessIndicator();
 
   } catch (error) {
     ElMessage({
       message: `暂存、提交并推送失败: ${(error as Error).message}`,
       type: "error",
     });
-  } finally {
+    isPushing.value = false
   }
 }
 
@@ -657,6 +729,288 @@ function clearCommitFields() {
   commitFooter.value = "";
 }
 
+// 打开默认提交信息设置弹窗
+function openDefaultMessageSettings() {
+  newDefaultMessage.value = defaultCommitMessage.value;
+  defaultMessageDialogVisible.value = true;
+}
+
+// 保存默认提交信息
+async function saveDefaultMessage() {
+  if (!newDefaultMessage.value.trim()) {
+    ElMessage({
+      message: "请输入默认提交信息",
+      type: "warning",
+    });
+    return;
+  }
+
+  try {
+    // 保存到服务器
+    const response = await fetch("/api/config/saveDefaultMessage", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        defaultCommitMessage: newDefaultMessage.value,
+      }),
+    });
+
+    const result = await response.json();
+    if (result.success) {
+      // 更新本地状态
+      defaultCommitMessage.value = newDefaultMessage.value;
+      placeholder.value = `输入提交信息 (默认: ${defaultCommitMessage.value})`;
+      
+      ElMessage({
+        message: "默认提交信息保存成功!",
+        type: "success",
+      });
+      
+      // 不再关闭弹窗，而是保留当前编辑状态
+      // defaultMessageDialogVisible.value = false;
+    } else {
+      ElMessage({
+        message: "保存失败: " + result.error,
+        type: "error",
+      });
+    }
+  } catch (error) {
+    ElMessage({
+      message: "保存失败: " + (error as Error).message,
+      type: "error",
+    });
+  }
+}
+
+// 根据Git状态计算按钮禁用状态
+const hasUnstagedChanges = computed(() => {
+  return gitLogStore.fileList.some(file => ['modified', 'deleted', 'untracked'].includes(file.type));
+});
+
+// 计算未暂存文件数量
+const unstagedFilesCount = computed(() => {
+  return gitLogStore.fileList.filter(file => ['modified', 'deleted', 'untracked'].includes(file.type)).length;
+});
+
+// 计算已暂存文件数量
+const stagedFilesCount = computed(() => {
+  return gitLogStore.fileList.filter(file => file.type === 'added').length;
+});
+
+const hasStagedChanges = computed(() => {
+  return stagedFilesCount.value > 0;
+});
+
+const hasAnyChanges = computed(() => {
+  return gitLogStore.fileList.length > 0;
+});
+
+const needsPush = computed(() => {
+  return gitStore.branchAhead > 0;
+});
+
+const needsPull = computed(() => {
+  return gitStore.branchBehind > 0;
+});
+
+const canPush = computed(() => {
+  // 修改条件判断：
+  // 1. 如果分支有上游并且领先提交，可以推送
+  // 2. 如果有已暂存的更改但未提交，不能推送
+  // 3. 如果有已提交未推送的更改，可以推送
+  return gitStore.hasUpstream && (needsPush.value || (hasStagedChanges.value && finalCommitMessage.value.trim()));
+});
+
+const canReset = computed(() => {
+  return hasStagedChanges.value;
+});
+
+const canResetToRemote = computed(() => {
+  return gitStore.hasUpstream && (needsPush.value || needsPull.value || hasAnyChanges.value);
+});
+
+// 保存默认提交信息模板
+async function saveMessageTemplate() {
+  if (!newDefaultMessage.value.trim()) {
+    ElMessage({
+      message: "请输入模板内容",
+      type: "warning",
+    });
+    return;
+  }
+
+  try {
+    // 判断是编辑还是新建
+    if (isEditingMessage.value) {
+      // 编辑现有模板
+      await updateMessageTemplate();
+    } else {
+      // 新建模板
+      // 检查是否已存在相同模板
+      if (messageTemplates.value.includes(newDefaultMessage.value)) {
+        ElMessage({
+          message: "该模板已存在",
+          type: "warning",
+        });
+        return;
+      }
+
+      // 添加到本地数组
+      messageTemplates.value.push(newDefaultMessage.value);
+
+      // 保存到服务器
+      const response = await fetch("/api/config/save-template", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          template: newDefaultMessage.value,
+          type: "message",
+        }),
+      });
+
+      const result = await response.json();
+      if (result.success) {
+        ElMessage({
+          message: "提交信息模板保存成功!",
+          type: "success",
+        });
+        newDefaultMessage.value = "";
+      } else {
+        ElMessage({
+          message: "模板保存失败: " + result.error,
+          type: "error",
+        });
+      }
+    }
+  } catch (error) {
+    ElMessage({
+      message: "模板保存失败: " + (error as Error).message,
+      type: "error",
+    });
+  }
+}
+
+// 更新提交信息模板
+async function updateMessageTemplate() {
+  try {
+    // 先从本地数组中更新
+    if (editingMessageIndex.value >= 0) {
+      // 保存原模板和新模板
+      const oldTemplate = originalMessageTemplate.value;
+      const newTemplate = newDefaultMessage.value;
+
+      // 更新本地数组
+      messageTemplates.value[editingMessageIndex.value] = newTemplate;
+
+      // 调用API更新服务器
+      const response = await fetch("/api/config/update-template", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          oldTemplate,
+          newTemplate,
+          type: "message",
+        }),
+      });
+
+      const result = await response.json();
+      if (result.success) {
+        ElMessage({
+          message: "提交信息模板更新成功!",
+          type: "success",
+        });
+
+        // 重置编辑状态
+        isEditingMessage.value = false;
+        originalMessageTemplate.value = "";
+        editingMessageIndex.value = -1;
+        newDefaultMessage.value = "";
+      } else {
+        ElMessage({
+          message: "模板更新失败: " + result.error,
+          type: "error",
+        });
+      }
+    }
+  } catch (error) {
+    ElMessage({
+      message: "模板更新失败: " + (error as Error).message,
+      type: "error",
+    });
+  }
+}
+
+// 开始编辑提交信息模板
+function startEditMessageTemplate(template: string, index: number) {
+  isEditingMessage.value = true;
+  originalMessageTemplate.value = template;
+  editingMessageIndex.value = index;
+  newDefaultMessage.value = template;
+}
+
+// 取消编辑提交信息模板
+function cancelEditMessageTemplate() {
+  isEditingMessage.value = false;
+  originalMessageTemplate.value = "";
+  editingMessageIndex.value = -1;
+  newDefaultMessage.value = "";
+}
+
+// 删除提交信息模板
+async function deleteMessageTemplate(template: string) {
+  try {
+    // 从本地数组中删除
+    const index = messageTemplates.value.indexOf(template);
+    if (index !== -1) {
+      messageTemplates.value.splice(index, 1);
+    }
+
+    // 从服务器删除
+    const response = await fetch("/api/config/delete-template", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        template,
+        type: "message",
+      }),
+    });
+
+    const result = await response.json();
+    if (result.success) {
+      ElMessage({
+        message: "提交信息模板删除成功!",
+        type: "success",
+      });
+    } else {
+      ElMessage({
+        message: "模板删除失败: " + result.error,
+        type: "error",
+      });
+    }
+  } catch (error) {
+    ElMessage({
+      message: "模板删除失败: " + (error as Error).message,
+      type: "error",
+    });
+  }
+}
+
+// 使用默认提交信息模板
+function useMessageTemplate(template: string) {
+  // 设置为当前提交信息
+  commitMessage.value = template;
+  // 设置为默认提交信息编辑框的内容
+  newDefaultMessage.value = template;
+}
+
 onMounted(() => {
   loadConfig();
 
@@ -671,6 +1025,9 @@ onMounted(() => {
   if (savedSkipHooks !== null) {
     skipHooks.value = savedSkipHooks === "true";
   }
+  
+  // 获取一次分支状态
+  gitStore.getBranchStatus();
 });
 </script>
 
@@ -680,6 +1037,26 @@ onMounted(() => {
       <h2>提交更改</h2>
     </div>
 
+    <!-- 添加推送中指示器 -->
+    <transition name="el-fade-in-linear">
+      <div v-if="isPushing" class="pushing-indicator">
+        <div class="pushing-spinner">
+          <svg viewBox="0 0 50 50" class="circular">
+            <circle class="path" cx="25" cy="25" r="20" fill="none" />
+          </svg>
+        </div>
+        <div class="pushing-text">正在推送...</div>
+      </div>
+    </transition>
+
+    <!-- 添加推送成功指示器 -->
+    <transition name="el-fade-in-linear">
+      <div v-if="showPushSuccess" class="push-success-indicator">
+        <el-icon class="push-success-icon"><Check /></el-icon>
+        <div class="push-success-text">推送成功!</div>
+      </div>
+    </transition>
+
     <div class="card-content">
       <div class="layout-container">
         <!-- 如果没有配置Git用户信息，显示提示 -->
@@ -716,7 +1093,27 @@ git config --global user.email "your.email@example.com"</pre>
 
             <!-- 普通提交表单 -->
             <div v-if="!isStandardCommit" class="commit-form">
-              <el-input v-model="commitMessage" :placeholder="placeholder" clearable />
+              <div class="description-container">
+                <el-input 
+                  v-model="commitMessage" 
+                  :placeholder="placeholder" 
+                  type="textarea"
+                  :rows="6"
+                  resize="none"
+                  class="commit-message-input"
+                />
+                <div class="input-actions">
+                  <el-button type="primary" :icon="Setting" circle size="small" class="settings-button"
+                    @click="openDefaultMessageSettings">
+                  </el-button>
+                </div>
+              </div>
+              
+              <!-- 添加Git命令预览区域 -->
+              <div class="preview-section">
+                <div class="preview-title">Git提交命令预览：</div>
+                <pre class="preview-content code-command">git commit -m "{{ finalCommitMessage || '<提交信息>' }}"{{ skipHooks ? ' --no-verify' : '' }}</pre>
+              </div>
             </div>
 
             <!-- 标准化提交表单 -->
@@ -750,7 +1147,7 @@ git config --global user.email "your.email@example.com"</pre>
                 <div class="preview-title">提交信息预览：</div>
                 <pre class="preview-content">{{ finalCommitMessage }}</pre>
 
-                <div class="preview-title" style="margin-top: 10px;">Git命令预览：</div>
+                <div class="preview-title" style="margin-top: 10px;">Git提交命令预览：</div>
                 <pre class="preview-content code-command">{{ gitCommandPreview }}</pre>
               </div>
             </div>
@@ -760,89 +1157,144 @@ git config --global user.email "your.email@example.com"</pre>
           <div class="actions-section">
             <h3>Git 操作</h3>
             <div class="action-groups">
-              <div class="action-group">
-                <div class="group-title">基础操作</div>
-                <div class="group-buttons">
-                  <el-button 
-                    type="primary" 
-                    @click="addToStage" 
-                    :loading="gitLogStore.isAddingFiles" 
-                    class="action-button"
-                  >
-                    暂存更改
-                    <span class="command-text">git add .</span>
-                  </el-button>
-
-                  <el-button 
-                    type="primary" 
-                    @click="commitChanges" 
-                    :loading="gitLogStore.isLoadingStatus"
-                    class="action-button"
-                  >
-                    提交
-                    <span class="command-text">git commit</span>
-                  </el-button>
-
-                  <el-button 
-                    type="success" 
-                    @click="pushToRemote" 
-                    :loading="gitLogStore.isPushing"
-                    class="action-button push-button"
-                  >
-                    推送
-                    <span class="command-text">git push</span>
-                  </el-button>
+              <div class="operations-wrapper">
+                <!-- 基础操作 -->
+                <div class="action-group">
+                  <div class="group-title">基础操作</div>
+                  <div class="group-buttons">
+                    <el-tooltip :content="hasUnstagedChanges ? `暂存${unstagedFilesCount}个待更改文件` : 'git add .'" placement="top" effect="light" popper-class="git-cmd-tooltip">
+                      <el-button 
+                        type="primary" 
+                        @click="addToStage" 
+                        :loading="gitLogStore.isAddingFiles" 
+                        :disabled="!hasUnstagedChanges"
+                        class="action-button"
+                      >
+                        暂存更改
+                        <span v-if="unstagedFilesCount > 0">({{unstagedFilesCount}})</span>
+                      </el-button>
+                    </el-tooltip>
+
+                    <el-tooltip :content="hasStagedChanges ? `提交${stagedFilesCount}个已暂存文件` : 'git commit'" placement="top" effect="light" popper-class="git-cmd-tooltip">
+                      <el-button 
+                        type="primary" 
+                        @click="commitChanges" 
+                        :loading="gitLogStore.isLoadingStatus"
+                        :disabled="!hasStagedChanges || !finalCommitMessage.trim()"
+                        class="action-button"
+                      >
+                        提交
+                        <span v-if="stagedFilesCount > 0">({{stagedFilesCount}})</span>
+                      </el-button>
+                    </el-tooltip>
+
+                    <el-tooltip :content="needsPush ? `推送${gitStore.branchAhead}个本地提交` : 'git push'" placement="top" effect="light" popper-class="git-cmd-tooltip">
+                      <el-button 
+                        type="primary"
+                        :icon="Upload"
+                        @click="pushToRemote"
+                        :loading="gitLogStore.isPushing"
+                        :disabled="!canPush"
+                        :class="['action-button', 'push-button', { 'is-loading': gitLogStore.isPushing || isPushing }]"
+                        :style="needsPush ? {backgroundColor: '#67c23a !important', borderColor: '#67c23a !important'} : {}"
+                      >
+                        推送
+                        <span v-if="needsPush">({{gitStore.branchAhead}})</span>
+                      </el-button>
+                    </el-tooltip>
+                    
+                    <el-tooltip :content="needsPull ? `拉取${gitStore.branchBehind}个远程提交` : 'git pull'" placement="top" effect="light" popper-class="git-cmd-tooltip">
+                      <el-button 
+                        type="primary"
+                        :icon="Download"
+                        @click="handleGitPull"
+                        :loading="isGitPulling"
+                        :disabled="!gitStore.hasUpstream"
+                        class="action-button"
+                        :style="needsPull ? {color: 'white', backgroundColor: '#E6A23C', borderColor: '#E6A23C'} : {}"
+                      >
+                        拉取
+                        <span v-if="needsPull">({{gitStore.branchBehind}})</span>
+                      </el-button>
+                    </el-tooltip>
+                    
+                    <el-tooltip content="git fetch --all" placement="top" effect="light" popper-class="git-cmd-tooltip">
+                      <el-button 
+                        type="info"
+                        :icon="Connection"
+                        @click="handleGitFetchAll"
+                        :loading="isGitFetching"
+                        class="action-button"
+                      >
+                        获取所有远程分支
+                      </el-button>
+                    </el-tooltip>
+                  </div>
                 </div>
-              </div>
-
-              <div class="action-group">
-                <div class="group-title">组合操作</div>
-                <div class="group-buttons">
-                  <el-button 
-                    type="warning" 
-                    @click="addAndCommit" 
-                    :loading="gitLogStore.isAddingFiles || gitLogStore.isCommiting"
-                    class="action-button"
-                  >
-                    暂存并提交
-                    <span class="command-text">git add + commit</span>
-                  </el-button>
 
-                  <el-button 
-                    type="danger" 
-                    @click="addCommitAndPush" 
-                    :loading="gitLogStore.isAddingFiles || gitLogStore.isCommiting || gitLogStore.isPushing"
-                    class="action-button"
-                  >
-                    一键推送
-                    <span class="command-text command-text-long">git add + commit + push</span>
-                  </el-button>
+                <!-- 组合操作 -->
+                <div class="action-group">
+                  <div class="group-title">组合操作</div>
+                  <div class="group-buttons">
+                    <el-tooltip content="git add + git commit" placement="top" effect="light" popper-class="git-cmd-tooltip">
+                      <el-button 
+                        type="primary"
+                        :icon="Edit"
+                        @click="addAndCommit"
+                        :loading="gitLogStore.isAddingFiles || gitLogStore.isCommiting"
+                        :disabled="!hasUnstagedChanges || !finalCommitMessage.trim()"
+                        class="action-button"
+                      >
+                        暂存并提交
+                      </el-button>
+                    </el-tooltip>
+
+                    <el-tooltip content="git add + git commit + git push" placement="top" effect="light" popper-class="git-cmd-tooltip">
+                      <el-button 
+                        type="success"
+                        :icon="Position"
+                        @click="addCommitAndPush"
+                        :loading="gitLogStore.isAddingFiles || gitLogStore.isCommiting || gitLogStore.isPushing"
+                        :disabled="!hasAnyChanges || !finalCommitMessage.trim() || !gitStore.hasUpstream"
+                        :class="['action-button', 'one-click-push', { 'is-loading': gitLogStore.isAddingFiles || gitLogStore.isCommiting || gitLogStore.isPushing }]"
+                      >
+                        一键推送
+                      </el-button>
+                    </el-tooltip>
+                  </div>
                 </div>
               </div>
 
-              <div class="action-group">
+              <!-- 重置操作 -->
+              <div class="action-group reset-group">
                 <div class="group-title">重置操作</div>
                 <div class="group-buttons">
-                  <!-- <el-button 
-                    type="info" 
-                    @click="resetHead" 
-                    :loading="gitLogStore.isResetting" 
-                    :icon="Refresh"
-                    class="action-button reset-button"
-                  >
-                    重置暂存区
-                    <span class="command-text">git reset HEAD</span>
-                  </el-button> -->
-
-                  <el-button 
-                    type="info" 
-                    @click="resetToRemote" 
-                    :loading="gitLogStore.isResetting" 
-                    class="action-button reset-button"
-                  >
-                    重置到远程
-                    <span class="command-text command-text-long">git reset --hard origin/branch</span>
-                  </el-button>
+                  <el-tooltip :content="canReset ? `撤销${stagedFilesCount}个已暂存文件` : 'git reset HEAD'" placement="top" effect="light" popper-class="git-cmd-tooltip">
+                    <el-button 
+                      type="warning"
+                      :icon="RefreshRight"
+                      @click="gitLogStore.resetHead"
+                      :loading="gitLogStore.isResetting"
+                      :disabled="!canReset"
+                      class="action-button reset-button"
+                    >
+                      重置暂存区
+                      <span v-if="stagedFilesCount > 0">({{stagedFilesCount}})</span>
+                    </el-button>
+                  </el-tooltip>
+
+                  <el-tooltip content="git reset --hard origin/branch" placement="top" effect="light" popper-class="git-cmd-tooltip">
+                    <el-button 
+                      type="danger"
+                      :icon="Delete"
+                      @click="resetToRemote"
+                      :loading="gitLogStore.isResetting"
+                      :disabled="!canResetToRemote"
+                      class="action-button danger-button"
+                    >
+                      重置到远程
+                    </el-button>
+                  </el-tooltip>
                 </div>
               </div>
             </div>
@@ -851,7 +1303,15 @@ git config --global user.email "your.email@example.com"</pre>
       </div>
 
       <!-- 简短描述设置弹窗 -->
-      <el-dialog title="简短描述模板设置" v-model="descriptionDialogVisible" width="80vw" style="height: 80vh">
+      <el-dialog 
+        title="简短描述模板设置" 
+        v-model="descriptionDialogVisible" 
+        width="80vw"
+        top="70px"
+        style="height: calc(100vh - 140px);"
+        :close-on-click-modal="false"
+        class="template-dialog"
+      >
         <div class="template-container">
           <div class="template-form">
             <el-input v-model="newTemplateName" :placeholder="isEditingDescription ? '编辑模板内容' : '输入新模板内容'"
@@ -883,7 +1343,15 @@ git config --global user.email "your.email@example.com"</pre>
       </el-dialog>
 
       <!-- 作用域设置弹窗 -->
-      <el-dialog title="作用域模板设置" v-model="scopeDialogVisible" width="80%" style="height: 80vh">
+      <el-dialog 
+        title="作用域模板设置" 
+        v-model="scopeDialogVisible" 
+        width="80vw"
+        top="70px" 
+        style="height: calc(100vh - 140px);"
+        :close-on-click-modal="false"
+        class="template-dialog"
+      >
         <div class="template-container">
           <div class="template-form">
             <el-input v-model="newScopeTemplate" :placeholder="isEditingScope ? '编辑作用域模板内容' : '输入新作用域模板'"
@@ -912,6 +1380,66 @@ git config --global user.email "your.email@example.com"</pre>
           </div>
         </div>
       </el-dialog>
+
+      <!-- 默认提交信息设置弹窗 -->
+      <el-dialog 
+        title="默认提交信息设置" 
+        v-model="defaultMessageDialogVisible" 
+        width="80vw" 
+        top="70px"
+        style="height: calc(100vh - 140px);"
+        :close-on-click-modal="false"
+        class="message-template-dialog"
+      >
+        <div class="template-container message-template-container">
+          <div class="template-form">
+            <el-input v-model="newDefaultMessage" :placeholder="isEditingMessage ? '编辑模板内容' : '输入新模板内容'" class="template-input" clearable />
+            <div class="template-form-buttons">
+              <el-button v-if="isEditingMessage" @click="cancelEditMessageTemplate">取消</el-button>
+              <el-button type="primary" @click="saveMessageTemplate" :disabled="!newDefaultMessage.trim()">
+                {{ isEditingMessage ? '更新模板' : '添加模板' }}
+              </el-button>
+              <el-button type="success" @click="saveDefaultMessage" :disabled="!newDefaultMessage.trim()">
+                设为默认提交信息
+              </el-button>
+            </div>
+          </div>
+
+          <div class="templates-container">
+            <div class="message-templates-list">
+              <h3>已保存模板</h3>
+              <div class="templates-scroll-area">
+                <el-empty v-if="messageTemplates.length === 0" description="暂无保存的模板" />
+                <el-card v-for="(template, index) in messageTemplates" :key="index" class="template-item">
+                  <el-row justify="space-between" align="middle" style="width: 100%">
+                    <div class="template-content">{{ template }}</div>
+                    <div class="template-actions">
+                      <el-button type="primary" size="small" @click="useMessageTemplate(template)">使用</el-button>
+                      <el-button type="warning" size="small" :icon="Edit"
+                        @click="startEditMessageTemplate(template, index)">编辑</el-button>
+                      <el-button type="danger" size="small" @click="deleteMessageTemplate(template)">删除</el-button>
+                    </div>
+                  </el-row>
+                </el-card>
+              </div>
+            </div>
+            
+            <div class="current-default-message">
+              <h3>当前默认提交信息</h3>
+              <el-card class="default-message-card" v-if="defaultCommitMessage">
+                <div class="default-message-content">{{ defaultCommitMessage }}</div>
+              </el-card>
+              <el-empty v-else description="尚未设置默认提交信息" :image-size="100" />
+              
+              <div class="message-help-text">
+                <h4>关于默认提交信息</h4>
+                <p>默认提交信息将在未输入提交信息时自动使用。</p>
+                <p>你可以通过点击左侧模板的<el-tag size="small" type="primary">使用</el-tag>按钮先选择喜欢的模板，然后点击上方<el-tag size="small" type="success">设为默认提交信息</el-tag>按钮保存。</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-dialog>
     </div>
   </div>
 </template>
@@ -960,6 +1488,7 @@ git config --global user.email "your.email@example.com"</pre>
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  position: relative;
 }
 
 .card-header {
@@ -986,7 +1515,8 @@ git config --global user.email "your.email@example.com"</pre>
 
 .layout-container {
   display: flex;
-  gap: 20px;
+  flex-direction: column;
+  gap: 15px;
   height: 100%;
 }
 
@@ -996,45 +1526,41 @@ git config --global user.email "your.email@example.com"</pre>
 }
 
 .actions-section {
-  width: 300px;
+  width: 100%;
   flex-shrink: 0;
 }
 
 .actions-section h3 {
   margin-top: 0;
-  margin-bottom: 15px;
-  padding-bottom: 10px;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
   border-bottom: 1px solid #dcdfe6;
-  font-size: 18px;
+  font-size: 16px;
   color: #303133;
   font-weight: 500;
 }
 
-.commit-form {
+.operations-wrapper {
   display: flex;
-  margin-bottom: 15px;
   gap: 10px;
 }
 
-.git-actions {
-  margin-top: 20px;
-}
-
 .action-groups {
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 12px;
 }
 
 .action-group {
   background-color: #f9f9f9;
-  border-radius: 8px;
-  padding: 12px 15px;
+  border-radius: 6px;
+  padding: 8px 10px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-  border-left: 4px solid #409EFF;
-  overflow: hidden; /* 确保子元素不会溢出 */
+  border-left: 3px solid #409EFF;
+  flex: 1;
 }
 
+
 .action-group:nth-child(2) {
   border-left-color: #E6A23C;
 }
@@ -1044,82 +1570,51 @@ git config --global user.email "your.email@example.com"</pre>
 }
 
 .group-title {
-  font-size: 14px;
+  font-size: 13px;
   font-weight: bold;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
   color: #606266;
   text-align: left;
   display: block;
   position: relative;
-  padding-left: 10px;
+  padding-left: 6px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-  padding-bottom: 8px;
+  padding-bottom: 6px;
 }
 
 .group-buttons {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  flex-wrap: wrap;
   gap: 8px;
-  padding: 0 2px;
+  padding: 0;
 }
 
 .action-button {
-  position: relative;
-  padding: 14px 0 24px 0;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: auto;
-  text-align: center;
-  font-size: 16px;
-  border-radius: 6px;
-  border: none;
+  font-size: 14px;
+  font-weight: 500;
+  flex: 1;
+  min-width: 100px;
+  border-radius: 4px;
+  height: 36px;
+  padding: 0 10px;
 }
 
 .action-button:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
 }
 
 .action-button:active {
   transform: translateY(0);
 }
 
-.action-button :deep(.el-button__content) {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-height: 40px; /* 添加最小高度确保loading不会改变按钮高度 */
-}
-
-.action-button :deep(.el-icon) {
-  margin-right: 0;
-  margin-bottom: 4px;
-  font-size: 18px;
-}
-
-/* 添加loading状态的样式 */
-.action-button :deep(.el-icon.is-loading) {
-  position: absolute;
-  top: calc(50% - 10px);
-  left: calc(16px);
-  margin-top: 0;
-}
-
 .command-text {
-  position: absolute;
-  bottom: 6px;
-  font-size: 14px;
-  font-family: monospace;
-  width: 100%;
-  text-align: center;
-  left: 0;
-  white-space: nowrap;
+  display: none;
+}
 
+.command-text-long {
+  display: none;
 }
 
 .standard-commit-form {
@@ -1170,6 +1665,7 @@ git config --global user.email "your.email@example.com"</pre>
   background-color: #f5f7fa;
   padding: 10px;
   border-radius: 4px;
+  margin-top: 10px;
 }
 
 .preview-title {
@@ -1191,15 +1687,22 @@ git config --global user.email "your.email@example.com"</pre>
   flex-direction: column;
   height: calc(85vh - 100px);
   overflow-y: auto;
+  padding: 5px;
 }
 
 .template-form {
   margin-bottom: 20px;
+  background-color: #f8f9fa;
+  padding: 15px;
+  border-radius: 6px;
+  border: 1px solid #ebeef5;
 }
 
-.template-list {
-  flex: 1;
-  overflow-y: auto;
+.template-form-buttons {
+  display: flex;
+  gap: 10px;
+  margin-top: 12px;
+  justify-content: flex-end;
 }
 
 .template-input {
@@ -1211,25 +1714,42 @@ git config --global user.email "your.email@example.com"</pre>
   height: 100%;
 }
 
+.template-list h3 {
+  margin-top: 0;
+  margin-bottom: 15px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #ebeef5;
+}
+
 .template-item {
   margin-bottom: 10px;
+  transition: all 0.2s ease;
+  border: 1px solid #ebeef5;
 }
 
 .template-item:hover {
   background-color: #f5f7fa;
+  transform: translateY(-2px);
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
 
 .template-content {
   flex-grow: 1;
   margin-right: 10px;
   word-break: break-all;
+  padding: 5px 0;
+  color: #303133;
+  font-weight: 500;
 }
 
 .template-actions {
   display: flex;
-  gap: 5px;
+  gap: 8px;
   justify-content: flex-end;
-  min-width: 120px;
+  min-width: 180px;
   flex-shrink: 0;
 }
 
@@ -1251,23 +1771,21 @@ git config --global user.email "your.email@example.com"</pre>
   font-size: 14px;
 }
 
-@media (max-width: 768px) {
+@media (min-width: 768px) {
   .layout-container {
-    flex-direction: column;
+    flex-direction: row;
   }
 
-  .actions-section {
-    width: 100%;
+  .commit-section {
+    flex: 3;
   }
-  
-  .group-buttons {
-    flex-direction: row;
-    flex-wrap: wrap;
+
+  .actions-section {
+    width: 320px;
   }
   
-  .action-button {
-    flex: 1;
-    min-width: 120px;
+  .operations-wrapper {
+    flex-direction: column;
   }
 }
 
@@ -1286,7 +1804,25 @@ git config --global user.email "your.email@example.com"</pre>
   white-space: pre;
 }
 
-/* 特定按钮样式 */
+/* 推送时的动画效果 */
+@keyframes pushing-pulse {
+  0% { box-shadow: 0 0 0 0 rgba(103, 194, 58, 0.4); }
+  70% { box-shadow: 0 0 0 15px rgba(103, 194, 58, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(103, 194, 58, 0); }
+}
+
+@keyframes pushing-border {
+  0% { border-color: #67c23a; }
+  50% { border-color: #85ce61; }
+  100% { border-color: #67c23a; }
+}
+
+.card.is-pushing {
+  animation: pushing-border 1.5s infinite ease-in-out;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
 .push-button {
   background-color: #67c23a;
   border-color: #67c23a;
@@ -1297,6 +1833,82 @@ git config --global user.email "your.email@example.com"</pre>
   border-color: #85ce61;
 }
 
+.push-button.is-loading, 
+.push-button.is-loading:hover, 
+.push-button.is-loading:focus {
+  animation: pushing-pulse 1.5s infinite;
+  background-color: #67c23a !important;
+  border-color: #67c23a !important;
+}
+
+.el-button.push-button.is-loading .el-loading-spinner {
+  color: #fff !important;
+}
+
+/* 一键推送按钮动画 */
+@keyframes one-click-push-glow {
+  0% { box-shadow: 0 0 5px rgba(103, 194, 58, 0.5); }
+  50% { box-shadow: 0 0 20px rgba(103, 194, 58, 0.8); }
+  100% { box-shadow: 0 0 5px rgba(103, 194, 58, 0.5); }
+}
+
+.action-button.one-click-push {
+  position: relative;
+  overflow: hidden;
+}
+
+.action-button.one-click-push.is-loading, 
+.action-button.one-click-push.is-loading:hover {
+  animation: one-click-push-glow 1.5s infinite;
+  background-color: #67c23a !important;
+  border-color: #67c23a !important;
+}
+
+/* 推送成功动画 */
+@keyframes push-success {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+  100% { transform: scale(1); }
+}
+
+.push-success-indicator {
+  position: absolute;
+  inset: 0; /* 同时设置top, right, bottom, left为0 */
+  margin: auto;
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 12px;
+  padding: 20px 30px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  animation: push-success 0.5s ease-out;
+  z-index: 9999;
+  width: 200px;
+  height: 200px;
+}
+
+.push-success-icon {
+  font-size: 64px;
+  color: #67c23a;
+  margin-bottom: 16px;
+  animation: bounce 0.8s ease-in-out;
+}
+
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
+  40% {transform: translateY(-20px);}
+  60% {transform: translateY(-10px);}
+}
+
+.push-success-text {
+  font-size: 20px;
+  font-weight: bold;
+  color: #303133;
+  text-align: center;
+}
+
 .reset-button {
   background-color: #909399;
   border-color: #909399;
@@ -1309,4 +1921,246 @@ git config --global user.email "your.email@example.com"</pre>
 .el-button+.el-button {
   margin-left: 0;
 }
+
+/* 推送中动画样式 */
+.pushing-indicator {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  background-color: rgba(64, 158, 255, 1);
+  border-radius: 12px;
+  padding: 20px 30px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  width: 200px;
+  height: 200px;
+  color: white;
+}
+
+.pushing-spinner {
+  margin-bottom: 16px;
+}
+
+.pushing-text {
+  font-size: 20px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.circular {
+  height: 64px;
+  width: 64px;
+  animation: pushing-rotate 2s linear infinite;
+}
+
+.path {
+  stroke: white;
+  stroke-width: 4;
+  stroke-linecap: round;
+  stroke-dasharray: 90, 150;
+  stroke-dashoffset: 0;
+  animation: pushing-dash 1.5s ease-in-out infinite;
+}
+
+@keyframes pushing-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pushing-dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+
+.message-template-container {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 278px);
+  overflow: hidden;
+}
+
+.templates-container {
+  display: flex;
+  gap: 20px;
+  margin-top: 15px;
+  flex: 1;
+  overflow: hidden;
+}
+
+.message-templates-list {
+  flex: 3;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid #ebeef5;
+  padding-right: 15px;
+  height: calc(100vh - 432px);
+}
+
+.message-templates-list h3 {
+  margin-top: 0;
+  margin-bottom: 15px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.current-default-message {
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  padding-left: 15px;
+}
+
+.current-default-message h3 {
+  margin-top: 0;
+  margin-bottom: 15px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.templates-scroll-area {
+  overflow-y: auto;
+  padding-right: 5px;
+  flex: 1;
+}
+
+.default-message-card {
+  margin-bottom: 15px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+
+.default-message-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+}
+
+.default-message-content {
+  padding: 12px 15px;
+  background-color: #f0f9eb;
+  border-left: 3px solid #67c23a;
+  font-weight: 500;
+  word-break: break-all;
+  min-height: 60px;
+  display: flex;
+  align-items: center;
+  border-radius: 0 4px 4px 0;
+  color: #303133;
+}
+
+.message-help-text {
+  background-color: #f8f9fa;
+  border-radius: 4px;
+  padding: 15px;
+  font-size: 14px;
+  color: #606266;
+  border-left: 3px solid #909399;
+  margin-top: auto;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.message-help-text h4 {
+  margin-top: 0;
+  margin-bottom: 10px;
+  color: #303133;
+  font-size: 15px;
+}
+
+.message-help-text p {
+  margin: 8px 0;
+  line-height: 1.5;
+}
+</style>
+
+<!-- 添加全局样式 -->
+<style>
+/* Git命令tooltip样式 */
+.git-cmd-tooltip {
+  font-family: 'Consolas', 'Courier New', monospace !important;
+  font-size: 13px !important;
+  font-weight: 500 !important;
+  color: #303133 !important;
+  background-color: #f5f7fa !important;
+  border: 1px solid #dcdfe6 !important;
+  border-radius: 4px !important;
+  padding: 8px 12px !important;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
+}
+
+/* 弹窗样式优化 */
+.template-dialog .el-dialog__header,
+.message-template-dialog .el-dialog__header {
+  padding: 15px 20px;
+  margin-right: 0;
+  border-bottom: 1px solid #ebeef5;
+  background-color: #f8f9fa;
+}
+
+.template-dialog .el-dialog__title,
+.message-template-dialog .el-dialog__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.template-dialog .el-dialog__body,
+.message-template-dialog .el-dialog__body {
+  padding: 20px;
+}
+
+.template-dialog .el-dialog__headerbtn,
+.message-template-dialog .el-dialog__headerbtn {
+  top: 15px;
+  right: 20px;
+}
+
+.template-dialog .el-input__inner,
+.message-template-dialog .el-input__inner {
+  height: 40px;
+  line-height: 40px;
+}
+
+.template-dialog .el-button,
+.message-template-dialog .el-button {
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+.template-dialog .el-card,
+.message-template-dialog .el-card {
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.template-dialog .el-card__body,
+.message-template-dialog .el-card__body {
+  padding: 12px 15px;
+}
+
+.template-dialog .el-empty__image,
+.message-template-dialog .el-empty__image {
+  width: 80px;
+  height: 80px;
+}
 </style>