zen-gitsync 2.0.8 → 2.1.0

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

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, watch } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
-import { Setting, Edit, Check, Upload, RefreshRight, Delete, Position, Download, Connection } from "@element-plus/icons-vue";
+import { Setting, Edit, Check, Upload, RefreshRight, Delete, Position, Download, Connection, ArrowDown } from "@element-plus/icons-vue";
 import { useGitLogStore } from "../stores/gitLogStore";
 import { useGitStore } from "../stores/gitStore";
+import { useConfigStore } from "../stores/configStore";
 
 const gitLogStore = useGitLogStore();
 const gitStore = useGitStore();
+const configStore = useConfigStore();
 const commitMessage = ref("");
 const isPushing = ref(false);
 // 添加提交并推送的状态变量
@@ -51,6 +53,9 @@ const newDefaultMessage = ref("");
 // 跳过钩子
 const skipHooks = ref(false);
 
+// 添加控制正文和页脚显示的状态变量
+const showAdvancedFields = ref(false);
+
 // 提交类型选项
 const commitTypeOptions = [
   { value: "feat", label: "feat: 新功能" },
@@ -119,28 +124,29 @@ const gitCommandPreview = computed(() => {
 // 加载配置
 async function loadConfig() {
   try {
-    const response = await fetch("/api/config/getConfig");
-    const config = await response.json();
-    placeholder.value = `输入提交信息 (默认: ${config.defaultCommitMessage})`;
-    // 保存默认提交信息到变量中，以便后续使用
-    defaultCommitMessage.value = config.defaultCommitMessage || "";
-
-    // 加载描述模板
-    if (
-      config.descriptionTemplates &&
-      Array.isArray(config.descriptionTemplates)
-    ) {
-      descriptionTemplates.value = config.descriptionTemplates;
-    }
+    const config = await configStore.loadConfig();
+    if (config) {
+      placeholder.value = `输入提交信息 (默认: ${config.defaultCommitMessage})`;
+      // 保存默认提交信息到变量中，以便后续使用
+      defaultCommitMessage.value = config.defaultCommitMessage || "";
+
+      // 加载描述模板
+      if (
+        config.descriptionTemplates &&
+        Array.isArray(config.descriptionTemplates)
+      ) {
+        descriptionTemplates.value = config.descriptionTemplates;
+      }
 
-    // 加载作用域模板
-    if (config.scopeTemplates && Array.isArray(config.scopeTemplates)) {
-      scopeTemplates.value = config.scopeTemplates;
-    }
-    
-    // 加载提交信息模板
-    if (config.messageTemplates && Array.isArray(config.messageTemplates)) {
-      messageTemplates.value = config.messageTemplates;
+      // 加载作用域模板
+      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);
@@ -173,90 +179,67 @@ async function saveDescriptionTemplate() {
         return;
       }
 
-      // 添加到本地数组
-      descriptionTemplates.value.push(newTemplateName.value);
-
-      // 保存到服务器
-      const response = await fetch("/api/config/save-template", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          template: newTemplateName.value,
-          type: "description",
-        }),
-      });
-
-      const result = await response.json();
-      if (result.success) {
-        ElMessage({
-          message: "模板保存成功!",
-          type: "success",
-        });
-        newTemplateName.value = "";
-      } else {
-        ElMessage({
-          message: "模板保存失败: " + result.error,
-          type: "error",
-        });
+      // 使用 configStore 保存模板
+      const success = await configStore.saveTemplate(newTemplateName.value, 'description');
+      
+      if (success) {
+        // 确保本地数组同步更新
+        if (!descriptionTemplates.value.includes(newTemplateName.value)) {
+          descriptionTemplates.value.push(newTemplateName.value);
+        }
+        // 强制更新视图
+        descriptionTemplates.value = [...descriptionTemplates.value];
+        
+        // configStore已经显示了成功消息，这里不需要重复操作
+        newTemplateName.value = ""; // 清空输入框，但不关闭弹窗
       }
     }
   } catch (error) {
     ElMessage({
-      message: "模板保存失败: " + (error as Error).message,
+      message: `保存模板失败: ${(error as Error).message}`,
       type: "error",
     });
   }
 }
 
-// 编辑描述模板
+// 更新描述模板
 async function updateDescriptionTemplate() {
-  try {
-    // 先从本地数组中更新
-    if (editingDescriptionIndex.value >= 0) {
-      // 保存原模板和新模板
-      const oldTemplate = originalDescriptionTemplate.value;
-      const newTemplate = newTemplateName.value;
-
-      // 更新本地数组
-      descriptionTemplates.value[editingDescriptionIndex.value] = newTemplate;
-
-      // 调用API更新服务器
-      const response = await fetch("/api/config/update-template", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          oldTemplate,
-          newTemplate,
-          type: "description",
-        }),
-      });
+  if (!newTemplateName.value.trim()) {
+    ElMessage({
+      message: "请输入模板内容",
+      type: "warning",
+    });
+    return;
+  }
 
-      const result = await response.json();
-      if (result.success) {
-        ElMessage({
-          message: "模板更新成功!",
-          type: "success",
-        });
+  try {
+    // 使用 configStore 更新模板
+    const success = await configStore.updateTemplate(
+      originalDescriptionTemplate.value,
+      newTemplateName.value,
+      'description'
+    );
 
-        // 重置编辑状态
-        isEditingDescription.value = false;
-        originalDescriptionTemplate.value = "";
-        editingDescriptionIndex.value = -1;
-        newTemplateName.value = "";
-      } else {
-        ElMessage({
-          message: "模板更新失败: " + result.error,
-          type: "error",
-        });
+    if (success) {
+      // 确保本地数组同步更新
+      const index = descriptionTemplates.value.indexOf(originalDescriptionTemplate.value);
+      if (index !== -1) {
+        descriptionTemplates.value[index] = newTemplateName.value;
       }
+      // 强制更新视图
+      descriptionTemplates.value = [...descriptionTemplates.value];
+      
+      // configStore已经更新了本地数组并显示了成功消息，这里不需要重复操作
+      
+      // 重置编辑状态
+      isEditingDescription.value = false;
+      originalDescriptionTemplate.value = "";
+      editingDescriptionIndex.value = -1;
+      newTemplateName.value = "";
     }
   } catch (error) {
     ElMessage({
-      message: "模板更新失败: " + (error as Error).message,
+      message: `更新模板失败: ${(error as Error).message}`,
       type: "error",
     });
   }
@@ -304,38 +287,24 @@ async function saveScopeTemplate() {
         return;
       }
 
-      // 添加到本地数组
-      scopeTemplates.value.push(newScopeTemplate.value);
-
-      // 保存到服务器
-      const response = await fetch("/api/config/save-template", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          template: newScopeTemplate.value,
-          type: "scope",
-        }),
-      });
-
-      const result = await response.json();
-      if (result.success) {
-        ElMessage({
-          message: "作用域模板保存成功!",
-          type: "success",
-        });
-        newScopeTemplate.value = "";
-      } else {
-        ElMessage({
-          message: "作用域模板保存失败: " + result.error,
-          type: "error",
-        });
+      // 使用 configStore 保存模板
+      const success = await configStore.saveTemplate(newScopeTemplate.value, 'scope');
+      
+      if (success) {
+        // 确保本地数组同步更新
+        if (!scopeTemplates.value.includes(newScopeTemplate.value)) {
+          scopeTemplates.value.push(newScopeTemplate.value);
+        }
+        // 强制更新视图
+        scopeTemplates.value = [...scopeTemplates.value];
+        
+        // configStore已经显示了成功消息，这里不需要重复操作
+        newScopeTemplate.value = ""; // 清空输入框，但不关闭弹窗
       }
     }
   } catch (error) {
     ElMessage({
-      message: "作用域模板保存失败: " + (error as Error).message,
+      message: `保存模板失败: ${(error as Error).message}`,
       type: "error",
     });
   }
@@ -343,51 +312,42 @@ async function saveScopeTemplate() {
 
 // 更新作用域模板
 async function updateScopeTemplate() {
-  try {
-    // 先从本地数组中更新
-    if (editingScopeIndex.value >= 0) {
-      // 保存原模板和新模板
-      const oldTemplate = originalScopeTemplate.value;
-      const newTemplate = newScopeTemplate.value;
-
-      // 更新本地数组
-      scopeTemplates.value[editingScopeIndex.value] = newTemplate;
-
-      // 调用API更新服务器
-      const response = await fetch("/api/config/update-template", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          oldTemplate,
-          newTemplate,
-          type: "scope",
-        }),
-      });
+  if (!newScopeTemplate.value.trim()) {
+    ElMessage({
+      message: "请输入模板内容",
+      type: "warning",
+    });
+    return;
+  }
 
-      const result = await response.json();
-      if (result.success) {
-        ElMessage({
-          message: "作用域模板更新成功!",
-          type: "success",
-        });
+  try {
+    // 使用 configStore 更新模板
+    const success = await configStore.updateTemplate(
+      originalScopeTemplate.value,
+      newScopeTemplate.value,
+      'scope'
+    );
 
-        // 重置编辑状态
-        isEditingScope.value = false;
-        originalScopeTemplate.value = "";
-        editingScopeIndex.value = -1;
-        newScopeTemplate.value = "";
-      } else {
-        ElMessage({
-          message: "作用域模板更新失败: " + result.error,
-          type: "error",
-        });
+    if (success) {
+      // 确保本地数组同步更新
+      const index = scopeTemplates.value.indexOf(originalScopeTemplate.value);
+      if (index !== -1) {
+        scopeTemplates.value[index] = newScopeTemplate.value;
       }
+      // 强制更新视图
+      scopeTemplates.value = [...scopeTemplates.value];
+      
+      // configStore已经更新了本地数组并显示了成功消息，这里不需要重复操作
+      
+      // 重置编辑状态
+      isEditingScope.value = false;
+      originalScopeTemplate.value = "";
+      editingScopeIndex.value = -1;
+      newScopeTemplate.value = "";
     }
   } catch (error) {
     ElMessage({
-      message: "作用域模板更新失败: " + (error as Error).message,
+      message: `更新模板失败: ${(error as Error).message}`,
       type: "error",
     });
   }
@@ -412,39 +372,37 @@ function cancelEditScopeTemplate() {
 // 删除描述模板
 async function deleteDescriptionTemplate(template: string) {
   try {
-    // 从本地数组中删除
-    const index = descriptionTemplates.value.indexOf(template);
-    if (index !== -1) {
-      descriptionTemplates.value.splice(index, 1);
-    }
-
-    // 从服务器删除
-    const response = await fetch("/api/config/delete-template", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        template,
-        type: "description",
-      }),
-    });
+    // 确认删除
+    await ElMessageBox.confirm(
+      `确定要删除描述模板 "${template}" 吗？`,
+      "删除确认",
+      {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }
+    );
 
-    const result = await response.json();
-    if (result.success) {
-      ElMessage({
-        message: "模板删除成功!",
-        type: "success",
-      });
-    } else {
-      ElMessage({
-        message: "模板删除失败: " + result.error,
-        type: "error",
-      });
+    // 使用 configStore 删除模板
+    const success = await configStore.deleteTemplate(template, 'description');
+    
+    if (success) {
+      // 确保本地数组同步更新
+      const index = descriptionTemplates.value.indexOf(template);
+      if (index !== -1) {
+        descriptionTemplates.value.splice(index, 1);
+      }
+      // 强制更新视图
+      descriptionTemplates.value = [...descriptionTemplates.value];
     }
   } catch (error) {
+    if (error === "cancel") {
+      // 用户取消删除，不做任何操作
+      return;
+    }
+    
     ElMessage({
-      message: "模板删除失败: " + (error as Error).message,
+      message: `删除模板失败: ${(error as Error).message}`,
       type: "error",
     });
   }
@@ -453,39 +411,37 @@ async function deleteDescriptionTemplate(template: string) {
 // 删除作用域模板
 async function deleteScopeTemplate(template: string) {
   try {
-    // 从本地数组中删除
-    const index = scopeTemplates.value.indexOf(template);
-    if (index !== -1) {
-      scopeTemplates.value.splice(index, 1);
-    }
-
-    // 从服务器删除
-    const response = await fetch("/api/config/delete-template", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        template,
-        type: "scope",
-      }),
-    });
+    // 确认删除
+    await ElMessageBox.confirm(
+      `确定要删除作用域模板 "${template}" 吗？`,
+      "删除确认",
+      {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }
+    );
 
-    const result = await response.json();
-    if (result.success) {
-      ElMessage({
-        message: "作用域模板删除成功!",
-        type: "success",
-      });
-    } else {
-      ElMessage({
-        message: "作用域模板删除失败: " + result.error,
-        type: "error",
-      });
+    // 使用 configStore 删除模板
+    const success = await configStore.deleteTemplate(template, 'scope');
+    
+    if (success) {
+      // 确保本地数组同步更新
+      const index = scopeTemplates.value.indexOf(template);
+      if (index !== -1) {
+        scopeTemplates.value.splice(index, 1);
+      }
+      // 强制更新视图
+      scopeTemplates.value = [...scopeTemplates.value];
     }
   } catch (error) {
+    if (error === "cancel") {
+      // 用户取消删除，不做任何操作
+      return;
+    }
+    
     ElMessage({
-      message: "作用域模板删除失败: " + (error as Error).message,
+      message: `删除模板失败: ${(error as Error).message}`,
       type: "error",
     });
   }
@@ -746,39 +702,26 @@ async function saveDefaultMessage() {
   }
 
   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) {
-      // 更新本地状态
+    // 使用 configStore 保存默认提交信息
+    const success = await configStore.saveDefaultMessage(newDefaultMessage.value);
+    
+    if (success) {
+      // 更新本地默认提交信息
       defaultCommitMessage.value = newDefaultMessage.value;
-      placeholder.value = `输入提交信息 (默认: ${defaultCommitMessage.value})`;
+      placeholder.value = `输入提交信息 (默认: ${newDefaultMessage.value})`;
       
-      ElMessage({
-        message: "默认提交信息保存成功!",
-        type: "success",
-      });
+      // configStore 已经显示了成功消息，这里不需要重复显示
+      // ElMessage({
+      //   message: "默认提交信息已保存",
+      //   type: "success",
+      // });
       
-      // 不再关闭弹窗，而是保留当前编辑状态
-      // defaultMessageDialogVisible.value = false;
-    } else {
-      ElMessage({
-        message: "保存失败: " + result.error,
-        type: "error",
-      });
+      // 关闭对话框
+      defaultMessageDialogVisible.value = false;
     }
   } catch (error) {
     ElMessage({
-      message: "保存失败: " + (error as Error).message,
+      message: `保存默认提交信息失败: ${(error as Error).message}`,
       type: "error",
     });
   }
@@ -1026,8 +969,6 @@ onMounted(() => {
     skipHooks.value = savedSkipHooks === "true";
   }
   
-  // 获取一次分支状态
-  gitStore.getBranchStatus();
 });
 </script>
 
@@ -1119,15 +1060,17 @@ git config --global user.email "your.email@example.com"</pre>
             <!-- 标准化提交表单 -->
             <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 class="type-scope-container">
+                  <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-wrapper">
+                    <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>
 
                 <div class="description-container">
@@ -1138,10 +1081,21 @@ git config --global user.email "your.email@example.com"</pre>
                 </div>
               </div>
 
-              <el-input v-model="commitBody" type="textarea" :rows="4" placeholder="正文（可选）：详细描述本次提交的内容和原因" class="body-input"
-                clearable />
+              <!-- 添加展开/收起高级选项的控制按钮 -->
+              <div class="advanced-options-toggle" @click="showAdvancedFields = !showAdvancedFields">
+                <span>{{ showAdvancedFields ? '收起' : '正文及页脚' }}</span>
+                <el-icon class="toggle-icon" :class="{ 'is-active': showAdvancedFields }">
+                  <arrow-down />
+                </el-icon>
+              </div>
+
+              <!-- 使用过渡效果包装高级字段 -->
+              <div v-show="showAdvancedFields" class="advanced-fields">
+                <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 />
+                <el-input v-model="commitFooter" placeholder="页脚（可选）：如 Closes #123" class="footer-input" clearable />
+              </div>
 
               <div class="preview-section">
                 <div class="preview-title">提交信息预览：</div>
@@ -1631,19 +1585,22 @@ git config --global user.email "your.email@example.com"</pre>
   width: 100%;
 }
 
-.type-select {
+.type-scope-container {
+  display: flex;
+  gap: 10px;
   width: 100%;
+  margin-bottom: 10px;
 }
 
-.scope-container {
+.type-select {
+  width: 35%; /* 提交类型占35%宽度 */
+}
+
+.scope-wrapper {
   display: flex;
   align-items: center;
   gap: 5px;
-  width: 100%;
-}
-
-.scope-input {
-  flex-grow: 1;
+  width: 65%; /* 作用域占65%宽度 */
 }
 
 .description-container {
@@ -1653,7 +1610,7 @@ git config --global user.email "your.email@example.com"</pre>
   width: 100%;
 }
 
-.description-input {
+.scope-input, .description-input {
   flex-grow: 1;
 }
 
@@ -1665,7 +1622,6 @@ git config --global user.email "your.email@example.com"</pre>
   background-color: #f5f7fa;
   padding: 10px;
   border-radius: 4px;
-  margin-top: 10px;
 }
 
 .preview-title {
@@ -2091,6 +2047,51 @@ git config --global user.email "your.email@example.com"</pre>
   margin: 8px 0;
   line-height: 1.5;
 }
+
+.advanced-options-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 0;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  user-select: none;
+}
+
+.advanced-options-toggle:hover {
+  background-color: #ebeef5;
+  color: #409EFF;
+}
+
+.toggle-icon {
+  margin-left: 8px;
+  transition: transform 0.3s ease;
+}
+
+.toggle-icon.is-active {
+  transform: rotate(180deg);
+}
+
+.advanced-fields {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  animation: fade-in 0.3s ease-in-out;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 </style>
 
 <!-- 添加全局样式 -->