zen-gitsync 2.0.4 → 2.0.5

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

@@ -1,17 +1,15 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, watch } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
-import { Setting, Plus, Upload, Refresh, Download, Edit } from "@element-plus/icons-vue";
+import { Setting, Edit } from "@element-plus/icons-vue";
 import { useGitLogStore } from "../stores/gitLogStore";
 import { useGitStore } from "../stores/gitStore";
 
 const gitLogStore = useGitLogStore();
 const gitStore = useGitStore();
-const emit = defineEmits(["commit-success", "push-success", "status-update"]);
 const commitMessage = ref("");
 const isPushing = ref(false);
 // 添加提交并推送的状态变量
-const isCommitAndPushing = ref(false);
 const placeholder = ref("输入提交信息...");
 // 添加默认提交信息变量
 const defaultCommitMessage = ref("");
@@ -94,12 +92,12 @@ const finalCommitMessage = computed(() => {
 const gitCommandPreview = computed(() => {
   // 基本命令
   let command = `git commit -m "${finalCommitMessage.value}"`
-  
+
   // 如果跳过钩子开关打开，添加 --no-verify 参数
   if (skipHooks.value) {
     command += ' --no-verify'
   }
-  
+
   return command
 });
 
@@ -200,10 +198,10 @@ async function updateDescriptionTemplate() {
       // 保存原模板和新模板
       const oldTemplate = originalDescriptionTemplate.value;
       const newTemplate = newTemplateName.value;
-      
+
       // 更新本地数组
       descriptionTemplates.value[editingDescriptionIndex.value] = newTemplate;
-      
+
       // 调用API更新服务器
       const response = await fetch("/api/config/update-template", {
         method: "POST",
@@ -216,14 +214,14 @@ async function updateDescriptionTemplate() {
           type: "description",
         }),
       });
-      
+
       const result = await response.json();
       if (result.success) {
         ElMessage({
           message: "模板更新成功!",
           type: "success",
         });
-        
+
         // 重置编辑状态
         isEditingDescription.value = false;
         originalDescriptionTemplate.value = "";
@@ -331,10 +329,10 @@ async function updateScopeTemplate() {
       // 保存原模板和新模板
       const oldTemplate = originalScopeTemplate.value;
       const newTemplate = newScopeTemplate.value;
-      
+
       // 更新本地数组
       scopeTemplates.value[editingScopeIndex.value] = newTemplate;
-      
+
       // 调用API更新服务器
       const response = await fetch("/api/config/update-template", {
         method: "POST",
@@ -347,14 +345,14 @@ async function updateScopeTemplate() {
           type: "scope",
         }),
       });
-      
+
       const result = await response.json();
       if (result.success) {
         ElMessage({
           message: "作用域模板更新成功!",
           type: "success",
         });
-        
+
         // 重置编辑状态
         isEditingScope.value = false;
         originalScopeTemplate.value = "";
@@ -501,7 +499,7 @@ async function addToStage() {
     const result = await gitLogStore.addToStage();
     if (result) {
       // 触发状态更新事件
-      emit("status-update");
+      gitLogStore.fetchStatus();
     }
   } catch (error) {
     ElMessage({
@@ -524,15 +522,14 @@ async function commitChanges() {
   try {
     // 使用Store提交更改
     const result = await gitLogStore.commitChanges(finalCommitMessage.value, skipHooks.value);
-    
+
     if (result) {
       // 清空提交信息
       clearCommitFields();
-      
+
       // 触发成功事件
-      emit("commit-success");
-      // 触发状态更新事件
-      emit("status-update");
+      gitLogStore.fetchStatus();
+      gitLogStore.fetchLog();
     }
   } catch (error) {
     ElMessage({
@@ -548,12 +545,11 @@ async function pushToRemote() {
     isPushing.value = true
     // 使用Store推送更改
     const result = await gitLogStore.pushToRemote();
-    
+
     if (result) {
       // 触发成功事件
-      emit("push-success");
-      // 触发状态更新事件
-      emit("status-update");
+      gitStore.getCurrentBranch();
+      gitLogStore.fetchLog();
     }
   } catch (error) {
     ElMessage({
@@ -569,24 +565,21 @@ async function pushToRemote() {
 async function addAndCommit() {
   if (!finalCommitMessage.value.trim()) {
     ElMessage({
-      message: "提交信息不能为空", 
+      message: "提交信息不能为空",
       type: "warning",
     });
     return;
   }
 
   try {
-    const result = await gitLogStore.addAndCommit(finalCommitMessage.value, skipHooks.value);
-    
-    if (result) {
-      // 清空提交信息
-      clearCommitFields();
-      
-      // 触发成功事件
-      emit("commit-success");
-      // 触发状态更新事件
-      emit("status-update");
-    }
+    await gitLogStore.addAndCommit(finalCommitMessage.value, skipHooks.value);
+
+    // 清空提交信息
+    clearCommitFields();
+
+    // 触发成功事件
+    gitLogStore.fetchStatus();
+    gitLogStore.fetchLog();
   } catch (error) {
     ElMessage({
       message: `暂存并提交失败: ${(error as Error).message}`,
@@ -606,60 +599,22 @@ async function addCommitAndPush() {
   }
 
   try {
-    isCommitAndPushing.value = true
-    const result = await gitLogStore.addCommitAndPush(finalCommitMessage.value, skipHooks.value);
-    
-    if (result) {
-      // 清空提交信息
-      clearCommitFields();
-      
-      // 触发成功事件
-      emit("commit-success");
-      
-      // 添加小延迟后再触发推送成功事件，确保提交历史能够刷新
-      setTimeout(() => {
-        emit("push-success");
-      }, 300);
-      
-      // 触发状态更新事件
-      emit("status-update");
-    }
+    await gitLogStore.addCommitAndPush(finalCommitMessage.value, skipHooks.value);
+
+
+    // 清空提交信息
+    clearCommitFields();
+
+    // 触发成功事件
+    gitStore.getCurrentBranch();
+    gitLogStore.fetchLog();
+
   } catch (error) {
     ElMessage({
       message: `暂存、提交并推送失败: ${(error as Error).message}`,
       type: "error",
     });
   } finally {
-    isCommitAndPushing.value = false
-  }
-}
-
-// 重置暂存区 (git reset HEAD)
-async function resetHead() {
-  try {
-    await ElMessageBox.confirm(
-      '确定要重置暂存区吗？这将取消所有已暂存的更改，但不会影响工作区的文件。',
-      '重置暂存区',
-      {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }
-    );
-    
-    const result = await gitLogStore.resetHead();
-    if (result) {
-      // 触发状态更新事件
-      emit("status-update");
-    }
-  } catch (error) {
-    // 用户取消操作，不显示错误
-    if ((error as any) !== 'cancel') {
-      ElMessage({
-        message: `重置暂存区失败: ${(error as Error).message}`,
-        type: 'error'
-      });
-    }
   }
 }
 
@@ -675,11 +630,13 @@ async function resetToRemote() {
         type: 'warning'
       }
     );
-    
+
     const result = await gitLogStore.resetToRemote(gitStore.currentBranch);
     if (result) {
       // 触发状态更新事件
-      emit("status-update");
+      gitLogStore.fetchStatus();
+      // 更新提交历史
+      gitLogStore.fetchLog();
     }
   } catch (error) {
     // 用户取消操作，不显示错误
@@ -702,13 +659,13 @@ function clearCommitFields() {
 
 onMounted(() => {
   loadConfig();
-  
+
   // 从 localStorage 中获取标准化提交设置
   const savedStandardCommit = localStorage.getItem("zen-gitsync-standard-commit");
   if (savedStandardCommit !== null) {
     isStandardCommit.value = savedStandardCommit === "true";
   }
-  
+
   // 从 localStorage 中获取跳过钩子设置
   const savedSkipHooks = localStorage.getItem("zen-gitsync-skip-hooks");
   if (savedSkipHooks !== null) {
@@ -721,239 +678,200 @@ onMounted(() => {
   <div class="card">
     <h2>提交更改</h2>
 
-    <div class="commit-options">
-      <div class="options-row">
-        <div class="commit-mode-toggle">
-          <el-switch
-            v-model="isStandardCommit"
-            active-text="标准化提交"
-            inactive-text="普通提交"
-          />
-        </div>
-
-        <div class="no-verify-toggle">
-          <el-tooltip content="跳过 Git 钩子检查 (--no-verify)" placement="top">
-            <el-switch v-model="skipHooks" active-text="跳过钩子 (--no-verify)" />
-          </el-tooltip>
-        </div>
+    <div class="layout-container">
+      <!-- 如果没有配置Git用户信息，显示提示 -->
+      <div v-if="gitStore.userName === '' || gitStore.userEmail === ''" class="git-config-warning">
+        <el-alert
+          title="Git用户信息未配置"
+          type="warning"
+          :closable="false"
+          show-icon
+        >
+          <p>您需要配置Git用户名和邮箱才能提交代码。请使用以下命令配置：</p>
+          <pre class="config-command">git config --global user.name "Your Name"
+git config --global user.email "your.email@example.com"</pre>
+        </el-alert>
       </div>
-    </div>
+      
+      <!-- 正常的提交区域，仅在Git用户信息已配置时显示 -->
+      <template v-else>
+        <!-- 左侧：提交表单 -->
+        <div class="commit-section">
+          <div class="commit-options">
+            <div class="options-row">
+              <div class="commit-mode-toggle">
+                <el-switch v-model="isStandardCommit" active-text="标准化提交" inactive-text="普通提交" />
+              </div>
 
-    <!-- 普通提交表单 -->
-    <div v-if="!isStandardCommit" class="commit-form">
-      <el-input v-model="commitMessage" :placeholder="placeholder" clearable />
-    </div>
+              <div class="no-verify-toggle">
+                <el-tooltip content="跳过 Git 钩子检查 (--no-verify)" placement="top">
+                  <el-switch v-model="skipHooks" active-text="跳过钩子 (--no-verify)" />
+                </el-tooltip>
+              </div>
+            </div>
+          </div>
 
-    <!-- 标准化提交表单 -->
-    <div v-else class="standard-commit-form">
-      <div class="standard-commit-header">
-        <el-select
-          v-model="commitType"
-          placeholder="提交类型"
-          class="type-select"
-          clearable
-        >
-          <el-option
-            v-for="item in commitTypeOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-
-        <div class="scope-container">
-          <el-input
-            v-model="commitScope"
-            placeholder="作用域（可选）"
-            class="scope-input"
-            clearable
-          />
-          <el-button
-            type="primary"
-            :icon="Setting"
-            circle
-            size="small"
-            class="settings-button"
-            @click="openScopeSettings"
-          >
-          </el-button>
-        </div>
+          <!-- 普通提交表单 -->
+          <div v-if="!isStandardCommit" class="commit-form">
+            <el-input v-model="commitMessage" :placeholder="placeholder" clearable />
+          </div>
 
-        <div class="description-container">
-          <el-input
-            v-model="commitDescription"
-            placeholder="简短描述（必填）"
-            class="description-input"
-            clearable
-          />
-          <el-button
-            type="primary"
-            :icon="Setting"
-            circle
-            size="small"
-            class="settings-button"
-            @click="openDescriptionSettings"
-          >
-          </el-button>
-        </div>
-      </div>
+          <!-- 标准化提交表单 -->
+          <div v-else class="standard-commit-form">
+            <div class="standard-commit-header">
+              <el-select v-model="commitType" placeholder="提交类型" class="type-select" clearable>
+                <el-option v-for="item in commitTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+
+              <div class="scope-container">
+                <el-input v-model="commitScope" placeholder="作用域（可选）" class="scope-input" clearable />
+                <el-button type="primary" :icon="Setting" circle size="small" class="settings-button"
+                  @click="openScopeSettings">
+                </el-button>
+              </div>
 
-      <el-input
-        v-model="commitBody"
-        type="textarea"
-        :rows="4"
-        placeholder="正文（可选）：详细描述本次提交的内容和原因"
-        class="body-input"
-        clearable
-      />
-
-      <el-input
-        v-model="commitFooter"
-        placeholder="页脚（可选）：如 Closes #123"
-        class="footer-input"
-        clearable
-      />
-
-      <div class="preview-section">
-        <div class="preview-title">提交信息预览：</div>
-        <pre class="preview-content">{{ finalCommitMessage }}</pre>
-        
-        <div class="preview-title" style="margin-top: 10px;">Git命令预览：</div>
-        <pre class="preview-content code-command">{{ gitCommandPreview }}</pre>
-      </div>
-    </div>
+              <div class="description-container">
+                <el-input v-model="commitDescription" placeholder="简短描述（必填）" class="description-input" clearable />
+                <el-button type="primary" :icon="Setting" circle size="small" class="settings-button"
+                  @click="openDescriptionSettings">
+                </el-button>
+              </div>
+            </div>
 
-    <div class="git-actions">
-      <div class="action-row">
-        <el-button
-          type="primary"
-          @click="addToStage"
-          :loading="gitLogStore.isAddingFiles"
-          :icon="Plus"
-        >
-          添加到暂存区(git add .)
-        </el-button>
-        
-        <el-button
-          type="primary"
-          @click="commitChanges"
-          :loading="gitLogStore.isLoadingStatus"
-        >
-          提交(git commit)
-        </el-button>
-        
-        <el-button
-          type="success"
-          @click="pushToRemote"
-          :icon="Upload"
-          :loading="isPushing"
-        >
-          推送(git push)
-        </el-button>
-      </div>
-      
-      <div class="action-row">
-        <el-button
-          type="warning"
-          @click="addAndCommit"
-        >
-          添加并提交(git add+commit)
-        </el-button>
-        
-        <el-button
-          type="danger"
-          @click="addCommitAndPush"
-          :loading="isCommitAndPushing"
-        >
-          添加、提交并推送(git add+commit+push)
-        </el-button>
-      </div>
-      
-      <div class="action-row">
-        <el-button
-          type="info"
-          @click="resetHead"
-          :loading="gitLogStore.isResetting"
-          :icon="Refresh"
-        >
-          重置暂存区(git reset HEAD)
-        </el-button>
-        
-        <el-button
-          type="info"
-          @click="resetToRemote"
-          :loading="gitLogStore.isResetting"
-          :icon="Download"
-        >
-          重置到远程(git reset --hard origin/branch)
-        </el-button>
-      </div>
+            <el-input v-model="commitBody" type="textarea" :rows="4" placeholder="正文（可选）：详细描述本次提交的内容和原因" class="body-input"
+              clearable />
+
+            <el-input v-model="commitFooter" placeholder="页脚（可选）：如 Closes #123" class="footer-input" clearable />
+
+            <div class="preview-section">
+              <div class="preview-title">提交信息预览：</div>
+              <pre class="preview-content">{{ finalCommitMessage }}</pre>
+
+              <div class="preview-title" style="margin-top: 10px;">Git命令预览：</div>
+              <pre class="preview-content code-command">{{ gitCommandPreview }}</pre>
+            </div>
+          </div>
+        </div>
+
+        <!-- 右侧：操作区域 -->
+        <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>
+            </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>
+            </div>
+
+            <div class="action-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>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
     </div>
 
     <!-- 简短描述设置弹窗 -->
-    <el-dialog
-      title="简短描述模板设置"
-      v-model="descriptionDialogVisible"
-      width="80vw"
-      style="height: 80vh"
-    >
+    <el-dialog title="简短描述模板设置" v-model="descriptionDialogVisible" width="80vw" style="height: 80vh">
       <div class="template-container">
         <div class="template-form">
-          <el-input
-            v-model="newTemplateName"
-            :placeholder="isEditingDescription ? '编辑模板内容' : '输入新模板内容'"
-            class="template-input"
-            clearable
-          />
+          <el-input v-model="newTemplateName" :placeholder="isEditingDescription ? '编辑模板内容' : '输入新模板内容'"
+            class="template-input" clearable />
           <div class="template-form-buttons">
-            <el-button
-              v-if="isEditingDescription"
-              @click="cancelEditDescriptionTemplate"
-              >取消</el-button
-            >
-            <el-button
-              type="primary"
-              @click="saveDescriptionTemplate"
-              :disabled="!newTemplateName.trim()"
-              >{{ isEditingDescription ? '更新模板' : '添加模板' }}</el-button
-            >
+            <el-button v-if="isEditingDescription" @click="cancelEditDescriptionTemplate">取消</el-button>
+            <el-button type="primary" @click="saveDescriptionTemplate" :disabled="!newTemplateName.trim()">{{
+              isEditingDescription ? '更新模板' : '添加模板' }}</el-button>
           </div>
         </div>
 
         <div class="template-list">
           <h3>已保存模板</h3>
-          <el-empty
-            v-if="descriptionTemplates.length === 0"
-            description="暂无保存的模板"
-          />
-          <el-card
-            v-for="(template, index) in descriptionTemplates"
-            :key="index"
-            class="template-item"
-          >
+          <el-empty v-if="descriptionTemplates.length === 0" description="暂无保存的模板" />
+          <el-card v-for="(template, index) in descriptionTemplates" :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="useTemplate(template)"
-                  >使用</el-button
-                >
-                <el-button
-                  type="warning"
-                  size="small"
-                  :icon="Edit"
-                  @click="startEditDescriptionTemplate(template, index)"
-                  >编辑</el-button
-                >
-                <el-button
-                  type="danger"
-                  size="small"
-                  @click="deleteDescriptionTemplate(template)"
-                  >删除</el-button
-                >
+                <el-button type="primary" size="small" @click="useTemplate(template)">使用</el-button>
+                <el-button type="warning" size="small" :icon="Edit"
+                  @click="startEditDescriptionTemplate(template, index)">编辑</el-button>
+                <el-button type="danger" size="small" @click="deleteDescriptionTemplate(template)">删除</el-button>
               </div>
             </el-row>
           </el-card>
@@ -962,68 +880,29 @@ onMounted(() => {
     </el-dialog>
 
     <!-- 作用域设置弹窗 -->
-    <el-dialog
-      title="作用域模板设置"
-      v-model="scopeDialogVisible"
-      width="80%"
-      style="height: 80vh"
-    >
+    <el-dialog title="作用域模板设置" v-model="scopeDialogVisible" width="80%" style="height: 80vh">
       <div class="template-container">
         <div class="template-form">
-          <el-input
-            v-model="newScopeTemplate"
-            :placeholder="isEditingScope ? '编辑作用域模板内容' : '输入新作用域模板'"
-            class="template-input"
-            clearable
-          />
+          <el-input v-model="newScopeTemplate" :placeholder="isEditingScope ? '编辑作用域模板内容' : '输入新作用域模板'"
+            class="template-input" clearable />
           <div class="template-form-buttons">
-            <el-button
-              v-if="isEditingScope"
-              @click="cancelEditScopeTemplate"
-              >取消</el-button
-            >
-            <el-button
-              type="primary"
-              @click="saveScopeTemplate"
-              :disabled="!newScopeTemplate.trim()"
-              >{{ isEditingScope ? '更新模板' : '添加模板' }}</el-button
-            >
+            <el-button v-if="isEditingScope" @click="cancelEditScopeTemplate">取消</el-button>
+            <el-button type="primary" @click="saveScopeTemplate" :disabled="!newScopeTemplate.trim()">{{ isEditingScope
+              ? '更新模板' : '添加模板' }}</el-button>
           </div>
         </div>
 
         <div class="template-list">
           <h3>已保存作用域</h3>
-          <el-empty
-            v-if="scopeTemplates.length === 0"
-            description="暂无保存的作用域"
-          />
-          <el-card
-            v-for="(template, index) in scopeTemplates"
-            :key="index"
-            class="template-item"
-          >
+          <el-empty v-if="scopeTemplates.length === 0" description="暂无保存的作用域" />
+          <el-card v-for="(template, index) in scopeTemplates" :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="useScopeTemplate(template)"
-                  >使用</el-button
-                >
-                <el-button
-                  type="warning"
-                  size="small"
-                  :icon="Edit"
-                  @click="startEditScopeTemplate(template, index)"
-                  >编辑</el-button
-                >
-                <el-button
-                  type="danger"
-                  size="small"
-                  @click="deleteScopeTemplate(template)"
-                  >删除</el-button
-                >
+                <el-button type="primary" size="small" @click="useScopeTemplate(template)">使用</el-button>
+                <el-button type="warning" size="small" :icon="Edit"
+                  @click="startEditScopeTemplate(template, index)">编辑</el-button>
+                <el-button type="danger" size="small" @click="deleteScopeTemplate(template)">删除</el-button>
               </div>
             </el-row>
           </el-card>
@@ -1037,11 +916,36 @@ onMounted(() => {
 .card {
   background-color: white;
   border-radius: 5px;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   margin-bottom: 20px;
   padding: 20px;
 }
 
+.layout-container {
+  display: flex;
+  gap: 20px;
+}
+
+.commit-section {
+  flex: 1;
+  min-width: 0; /* 防止子元素撑开 */
+}
+
+.actions-section {
+  width: 300px;
+  flex-shrink: 0;
+}
+
+.actions-section h3 {
+  margin-top: 0;
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #dcdfe6;
+  font-size: 18px;
+  color: #303133;
+  font-weight: 500;
+}
+
 .commit-form {
   display: flex;
   margin-bottom: 15px;
@@ -1050,19 +954,99 @@ onMounted(() => {
 
 .git-actions {
   margin-top: 20px;
+}
+
+.action-groups {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 15px;
+}
+
+.action-group {
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  padding: 12px 15px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  border-left: 4px solid #409EFF;
+  overflow: hidden; /* 确保子元素不会溢出 */
+}
+
+.action-group:nth-child(2) {
+  border-left-color: #E6A23C;
 }
 
-.action-row {
+.action-group:nth-child(3) {
+  border-left-color: #909399;
+}
+
+.group-title {
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  color: #606266;
+  text-align: left;
+  display: block;
+  position: relative;
+  padding-left: 10px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  padding-bottom: 8px;
+}
+
+.group-buttons {
   display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0 2px;
+}
+
+.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;
+}
+
+.action-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 
-.commit-mode-toggle {
-  /* 移除margin-bottom */
+.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%;
+}
+
+.action-button :deep(.el-icon) {
+  margin-right: 0;
+  margin-bottom: 4px;
+  font-size: 18px;
+}
+
+.command-text {
+  position: absolute;
+  bottom: 6px;
+  font-size: 14px;
+  font-family: monospace;
+  width: 100%;
+  text-align: center;
+  left: 0;
+  white-space: nowrap;
+
 }
 
 .standard-commit-form {
@@ -1074,21 +1058,20 @@ onMounted(() => {
 
 .standard-commit-header {
   display: flex;
+  flex-direction: column;
   gap: 10px;
   width: 100%;
 }
 
 .type-select {
-  width: 120px;
-  flex-shrink: 0;
+  width: 100%;
 }
 
 .scope-container {
   display: flex;
   align-items: center;
   gap: 5px;
-  flex-grow: 0;
-  width: 200px;
+  width: 100%;
 }
 
 .scope-input {
@@ -1099,12 +1082,11 @@ onMounted(() => {
   display: flex;
   align-items: center;
   gap: 5px;
-  flex-grow: 1;
+  width: 100%;
 }
 
 .description-input {
   flex-grow: 1;
-  min-width: 200px;
 }
 
 .settings-button {
@@ -1197,9 +1179,61 @@ onMounted(() => {
 }
 
 @media (max-width: 768px) {
-  .action-row {
+  .layout-container {
     flex-direction: column;
   }
+
+  .actions-section {
+    width: 100%;
+  }
+  
+  .group-buttons {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+  
+  .action-button {
+    flex: 1;
+    min-width: 120px;
+  }
+}
+
+.git-config-warning {
+  width: 100%;
+}
+
+.config-command {
+  background-color: #2d2d2d;
+  color: #f8f8f2;
+  font-family: 'Courier New', Courier, monospace;
+  padding: 10px;
+  border-radius:
+  4px;
+  margin-top: 10px;
+  white-space: pre;
 }
-</style>
 
+/* 特定按钮样式 */
+.push-button {
+  background-color: #67c23a;
+  border-color: #67c23a;
+}
+
+.push-button:hover {
+  background-color: #85ce61;
+  border-color: #85ce61;
+}
+
+.reset-button {
+  background-color: #909399;
+  border-color: #909399;
+}
+
+.reset-button:hover {
+  background-color: #a6a9ad;
+  border-color: #a6a9ad;
+}
+.el-button+.el-button {
+  margin-left: 0;
+}
+</style>