long-git-cli 1.0.16 → 1.0.18

package/src/devops/ui/public/js/projects-page.js

@@ -0,0 +1,659 @@
+/**
+ * 项目管理页面逻辑
+ */
+
+const ProjectsPage = {
+  projects: {},
+  currentEditingProject: null,
+
+  /**
+   * 初始化项目管理页面
+   */
+  async init() {
+    /** 加载项目列表 */
+    await this.loadProjects();
+
+    /** 绑定事件 */
+    this.bindEvents();
+  },
+
+  /**
+   * 加载项目列表
+   */
+  async loadProjects() {
+    try {
+      const data = await API.get("/projects");
+      this.projects = data.projects || {};
+      this.renderProjects();
+    } catch (error) {
+      Components.Toast.error("加载项目列表失败: " + error.message);
+    }
+  },
+
+  /**
+   * 绑定事件
+   */
+  bindEvents() {
+    /** 添加项目按钮 */
+    document.getElementById("add-project-btn").addEventListener("click", () => {
+      this.showProjectModal();
+    });
+  },
+
+  /**
+   * 渲染项目列表
+   */
+  renderProjects() {
+    const container = document.getElementById("projects-list");
+    const emptyState = document.getElementById("projects-empty");
+    const projectPaths = Object.keys(this.projects);
+
+    if (projectPaths.length === 0) {
+      container.innerHTML = "";
+      emptyState.classList.remove("hidden");
+      return;
+    }
+
+    emptyState.classList.add("hidden");
+    container.innerHTML = "";
+
+    projectPaths.forEach((projectPath) => {
+      const project = this.projects[projectPath];
+      const projectCard = this.createProjectCard(project);
+      container.insertAdjacentHTML("beforeend", projectCard);
+    });
+
+    /** 绑定卡片事件 */
+    projectPaths.forEach((projectPath) => {
+      const editBtn = document.querySelector(
+        `[data-project-path="${projectPath}"] .edit-project-btn`
+      );
+      const deleteBtn = document.querySelector(
+        `[data-project-path="${projectPath}"] .delete-project-btn`
+      );
+
+      if (editBtn) {
+        editBtn.addEventListener("click", () => {
+          this.showProjectModal(this.projects[projectPath]);
+        });
+      }
+
+      if (deleteBtn) {
+        deleteBtn.addEventListener("click", () => {
+          this.deleteProject(projectPath);
+        });
+      }
+    });
+  },
+
+  /**
+   * 创建项目卡片 HTML
+   */
+  createProjectCard(project) {
+    const envs = Object.keys(project.environments || {});
+
+    return `
+      <div class="card mb-lg" data-project-path="${project.path}">
+        <div class="card-header">
+          <div class="flex justify-between items-center">
+            <div>
+              <h3 class="card-title" style="margin-bottom: 0.25rem;">📁 ${project.name}</h3>
+              <p style="color: var(--text-secondary); font-size: 0.875rem; margin: 0;">
+                ${project.path}
+              </p>
+            </div>
+            <div class="flex gap-sm">
+              <button type="button" class="btn btn-secondary btn-sm edit-project-btn">
+                编辑
+              </button>
+              <button type="button" class="btn btn-danger btn-sm delete-project-btn">
+                删除
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="card-body">
+          <div class="mb-md">
+            <strong style="color: var(--text-primary);">Bitbucket 仓库:</strong>
+            <span style="color: var(--text-secondary);">
+              ${project.repository.workspace} / ${project.repository.repoSlug}
+            </span>
+          </div>
+          <div class="mb-md">
+            <strong style="color: var(--text-primary);">Tag 格式:</strong>
+            <span class="badge badge-primary">${project.tagFormat || "未设置"}</span>
+          </div>
+          <div>
+            <strong style="color: var(--text-primary);">环境:</strong>
+            ${envs.map((env) => `<span class="badge badge-success">${env}</span>`).join(" ")}
+          </div>
+        </div>
+      </div>
+    `;
+  },
+
+  /**
+   * 显示项目模态框
+   */
+  showProjectModal(project = null) {
+    this.currentEditingProject = project;
+    const isEdit = !!project;
+
+    const modalContent = `
+      <form id="project-form">
+        <div class="form-group">
+          <label class="form-label">项目名称</label>
+          <input
+            type="text"
+            class="form-input"
+            id="project-name"
+            placeholder="My Project"
+            value="${project?.name || ""}"
+            required
+          />
+        </div>
+
+        <div class="form-group">
+          <label class="form-label">项目路径</label>
+          ${
+            !isEdit
+              ? `<button type="button" class="btn btn-primary" id="select-folder-btn" style="width: 100%;">
+                📁 选择项目文件夹
+              </button>`
+              : `<div style="padding: 0.75rem; background-color: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color);">
+                <div style="color: var(--text-primary); font-size: 0.875rem;">
+                  📁 ${project?.path || ""}
+                </div>
+              </div>`
+          }
+          
+          <!-- 隐藏字段：存储路径和解析的 workspace、repoSlug -->
+          <input type="hidden" id="project-path" value="${project?.path || ""}" required />
+          <input type="hidden" id="project-workspace" value="${project?.repository?.workspace || ""}" />
+          <input type="hidden" id="project-repo-slug" value="${project?.repository?.repoSlug || ""}" />
+          
+          <!-- 显示选择的路径和解析结果 -->
+          <div id="path-info-display" style="display: ${project?.path ? "block" : "none"}; margin-top: 0.75rem;">
+            <div style="padding: 0.75rem; background-color: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color);">
+              <div style="color: var(--text-primary); font-size: 0.875rem; margin-bottom: 0.5rem;">
+                <strong>📁 路径:</strong> <span id="display-path" style="color: var(--text-secondary);">${project?.path || ""}</span>
+              </div>
+              <div id="git-info-display" style="display: ${project?.repository?.workspace ? "block" : "none"}; padding-top: 0.5rem; border-top: 1px solid var(--border-color);">
+                <div style="color: var(--text-primary); font-size: 0.875rem;">
+                  <strong>📦 Bitbucket:</strong> 
+                  <span id="display-workspace" style="color: var(--text-secondary);">${project?.repository?.workspace || ""}</span>
+                  <span style="color: var(--text-secondary);"> / </span>
+                  <span id="display-repo-slug" style="color: var(--text-secondary);">${project?.repository?.repoSlug || ""}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label class="form-label">Tag 格式</label>
+          <input
+            type="text"
+            class="form-input"
+            id="project-tag-format"
+            placeholder="v00.00.0000"
+            value="${project?.tagFormat || ""}"
+            required
+          />
+          <small style="color: var(--text-secondary); font-size: 0.75rem;">
+            统一的 Tag 格式，如 test-v00.00.0000 或 uat-v00.00.0000
+          </small>
+          <div id="tag-format-preview" style="margin-top: 0.5rem; padding: 0.5rem; background-color: var(--bg-secondary); border-radius: var(--radius-sm); display: none;">
+            <small style="color: var(--text-secondary); font-size: 0.75rem;">
+              <strong>示例:</strong> <span id="tag-format-example"></span>
+            </small>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label class="form-label">环境配置</label>
+          <div id="environments-list">
+            ${this.createEnvironmentsListHtml(project?.environments || {})}
+          </div>
+          <button type="button" class="btn btn-secondary btn-sm mt-sm" id="add-env-btn">
+            + 添加环境
+          </button>
+        </div>
+      </form>
+    `;
+
+    Components.Modal.show({
+      title: isEdit ? "编辑项目" : "添加项目",
+      content: modalContent,
+      showCancel: true,
+      cancelText: "取消",
+      confirmText: "保存",
+      onConfirm: async () => {
+        // 收集数据并保存
+        const projectData = this.collectProjectData();
+        if (projectData) {
+          await this.saveProjectWithData(projectData);
+        }
+      },
+    });
+
+    /** 绑定添加环境按钮和选择文件夹按钮 */
+    setTimeout(() => {
+      document.getElementById("add-env-btn")?.addEventListener("click", () => {
+        this.addEnvironment();
+      });
+
+      /** 绑定选择文件夹按钮（仅在新增项目时） */
+      if (!isEdit) {
+        document.getElementById("select-folder-btn")?.addEventListener("click", () => {
+          this.selectProjectFolder();
+        });
+      }
+
+      /** 绑定 Tag 格式输入框，实时预览 */
+      document.getElementById("project-tag-format")?.addEventListener("input", (e) => {
+        this.previewTagFormat(e.target.value);
+      });
+
+      /** 如果是编辑模式，显示当前格式的预览 */
+      if (project?.tagFormat) {
+        this.previewTagFormat(project.tagFormat);
+      }
+    }, 100);
+  },
+
+  /**
+   * 预览 Tag 格式
+   */
+  previewTagFormat(format) {
+    const previewDiv = document.getElementById("tag-format-preview");
+    const exampleSpan = document.getElementById("tag-format-example");
+
+    if (!format || !format.trim()) {
+      previewDiv.style.display = "none";
+      return;
+    }
+
+    try {
+      /** 生成示例 tag */
+      const example = this.generateTagExample(format);
+      exampleSpan.textContent = example;
+      previewDiv.style.display = "block";
+    } catch (error) {
+      exampleSpan.textContent = "格式无效";
+      previewDiv.style.display = "block";
+    }
+  },
+
+  /**
+   * 生成 Tag 示例
+   */
+  generateTagExample(format) {
+    /** 简单的示例生成：将 0 替换为示例数字 */
+    return format.replace(/0+/g, (match) => {
+      if (match.length === 2) return "01";
+      if (match.length === 4) return "0001";
+      return match;
+    });
+  },
+
+  /**
+   * 创建环境列表 HTML
+   */
+  createEnvironmentsListHtml(environments) {
+    const envs = Object.keys(environments);
+    if (envs.length === 0) {
+      return '<p style="color: var(--text-secondary); font-size: 0.875rem;">暂无环境，点击下方按钮添加</p>';
+    }
+
+    return envs
+      .map((env) => {
+        const config = environments[env];
+        return `
+        <div class="env-item mb-md" style="padding: 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background-color: var(--bg-color);">
+          <div class="flex justify-between items-center mb-sm">
+            <strong style="font-size: 0.875rem;">${env}</strong>
+            <button type="button" class="btn btn-danger btn-sm" onclick="ProjectsPage.removeEnvironment('${env}')">
+              删除
+            </button>
+          </div>
+          <div class="form-group" style="margin-bottom: 0;">
+            <label class="form-label" style="font-size: 0.75rem;">Jenkins Job 名称</label>
+            <input
+              type="text"
+              class="form-input env-job-name"
+              data-env="${env}"
+              placeholder="deploy-${env}"
+              value="${config.jenkinsJobName || ""}"
+              style="font-size: 0.875rem;"
+              required
+            />
+          </div>
+        </div>
+      `;
+      })
+      .join("");
+  },
+
+  /**
+   * 选择项目文件夹并自动解析 Git 信息
+   */
+  async selectProjectFolder() {
+    try {
+      Components.Loading.show("正在打开文件夹选择器...");
+
+      /** 调用后端 API 打开系统文件夹选择对话框 */
+      const response = await API.post("/select-folder", {});
+
+      Components.Loading.hide();
+
+      if (!response.path) {
+        Components.Toast.error("未选择文件夹");
+        return;
+      }
+
+      /** 设置路径 */
+      document.getElementById("project-path").value = response.path;
+
+      /** 自动解析 Git 信息 */
+      await this.parseGitInfo(response.path);
+    } catch (error) {
+      Components.Loading.hide();
+      
+      if (error.message.includes("用户取消")) {
+        /** 用户取消选择，不显示错误 */
+        return;
+      }
+      
+      Components.Toast.error("选择文件夹失败: " + error.message);
+    }
+  },
+
+  /**
+   * 解析 Git 仓库信息
+   */
+  async parseGitInfo(projectPath) {
+    try {
+      if (!projectPath) {
+        projectPath = document.getElementById("project-path").value.trim();
+      }
+
+      if (!projectPath) {
+        Components.Toast.error("请先选择项目路径");
+        return;
+      }
+
+      Components.Loading.show("正在解析 Git 信息...");
+
+      const response = await API.post("/parse-git-repo", { projectPath });
+
+      Components.Loading.hide();
+
+      /** 显示路径信息 */
+      document.getElementById("display-path").textContent = projectPath;
+      document.getElementById("path-info-display").style.display = "block";
+
+      if (response.warning) {
+        /** 不是 Bitbucket 仓库，显示警告 */
+        Components.Toast.error(response.warning);
+        Components.Modal.confirm(
+          `检测到 Git 仓库，但不是 Bitbucket 仓库。\n\nRemote URL: ${response.remoteUrl}\n\n是否手动填写 Bitbucket 信息？`,
+          () => {
+            /** 显示输入框让用户手动填写 */
+            const workspace = prompt("请输入 Bitbucket Workspace:");
+            const repoSlug = prompt("请输入 Bitbucket Repo Slug:");
+            
+            if (workspace && repoSlug) {
+              document.getElementById("project-workspace").value = workspace.trim();
+              document.getElementById("project-repo-slug").value = repoSlug.trim();
+              document.getElementById("display-workspace").textContent = workspace.trim();
+              document.getElementById("display-repo-slug").textContent = repoSlug.trim();
+              document.getElementById("git-info-display").style.display = "block";
+              Components.Toast.success("已手动设置 Bitbucket 信息");
+            }
+          }
+        );
+      } else {
+        /** 成功解析，自动填充 */
+        document.getElementById("project-workspace").value = response.workspace;
+        document.getElementById("project-repo-slug").value = response.repoSlug;
+        document.getElementById("display-workspace").textContent = response.workspace;
+        document.getElementById("display-repo-slug").textContent = response.repoSlug;
+        document.getElementById("git-info-display").style.display = "block";
+        Components.Toast.success("Git 信息解析成功");
+      }
+    } catch (error) {
+      Components.Loading.hide();
+      
+      /** 显示路径（即使解析失败） */
+      const path = document.getElementById("project-path").value;
+      if (path) {
+        document.getElementById("display-path").textContent = path;
+        document.getElementById("path-info-display").style.display = "block";
+      }
+      
+      Components.Toast.error("解析失败: " + error.message);
+
+      /** 如果是 Git 仓库相关错误，提示用户 */
+      if (error.message.includes("不是 Git 仓库")) {
+        Components.Modal.confirm(
+          "该目录不是 Git 仓库，是否需要初始化 Git？\n\n请在终端中执行：\ncd " +
+            document.getElementById("project-path").value.trim() +
+            "\ngit init\ngit remote add origin <your-bitbucket-repo-url>",
+          () => {
+            Components.Toast.error("请先初始化 Git 仓库后重试");
+          }
+        );
+      }
+    }
+  },
+
+  /**
+   * 添加环境
+   */
+  addEnvironment() {
+    const envName = prompt("请输入环境名称（如 test-01, uat 等）：");
+    if (!envName || !envName.trim()) {
+      return;
+    }
+
+    const trimmedName = envName.trim();
+    const container = document.getElementById("environments-list");
+
+    /** 检查是否已存在 */
+    const existing = container.querySelector(`[data-env="${trimmedName}"]`);
+    if (existing) {
+      Components.Toast.error("该环境已存在");
+      return;
+    }
+
+    const envHtml = `
+      <div class="env-item mb-md" style="padding: 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background-color: var(--bg-color);">
+        <div class="flex justify-between items-center mb-sm">
+          <strong style="font-size: 0.875rem;">${trimmedName}</strong>
+          <button type="button" class="btn btn-danger btn-sm" onclick="ProjectsPage.removeEnvironment('${trimmedName}')">
+            删除
+          </button>
+        </div>
+        <div class="form-group" style="margin-bottom: 0;">
+          <label class="form-label" style="font-size: 0.75rem;">Jenkins Job 名称</label>
+          <input
+            type="text"
+            class="form-input env-job-name"
+            data-env="${trimmedName}"
+            placeholder="deploy-${trimmedName}"
+            value=""
+            style="font-size: 0.875rem;"
+            required
+          />
+        </div>
+      </div>
+    `;
+
+    /** 移除空状态提示 */
+    const emptyMsg = container.querySelector("p");
+    if (emptyMsg) {
+      emptyMsg.remove();
+    }
+
+    container.insertAdjacentHTML("beforeend", envHtml);
+  },
+
+  /**
+   * 移除环境
+   */
+  removeEnvironment(envName) {
+    const container = document.getElementById("environments-list");
+    const envItem = container.querySelector(`[data-env="${envName}"]`)?.closest(".env-item");
+    if (envItem) {
+      envItem.remove();
+    }
+
+    /** 如果没有环境了，显示空状态 */
+    if (container.querySelectorAll(".env-item").length === 0) {
+      container.innerHTML = '<p style="color: var(--text-secondary); font-size: 0.875rem;">暂无环境，点击下方按钮添加</p>';
+    }
+  },
+
+  /**
+   * 收集项目数据（在模态框关闭前调用）
+   */
+  collectProjectData() {
+    try {
+      const name = document.getElementById("project-name")?.value.trim();
+      const path = document.getElementById("project-path")?.value.trim();
+      const workspace = document.getElementById("project-workspace")?.value.trim();
+      const repoSlug = document.getElementById("project-repo-slug")?.value.trim();
+      const tagFormat = document.getElementById("project-tag-format")?.value.trim();
+
+      console.log('📝 收集项目数据:');
+      console.log('  name:', name);
+      console.log('  path:', path);
+      console.log('  workspace:', workspace);
+      console.log('  repoSlug:', repoSlug);
+      console.log('  tagFormat:', tagFormat);
+
+      // 详细检查每个字段
+      const missingFields = [];
+      if (!name) missingFields.push('项目名称');
+      if (!path) missingFields.push('项目路径');
+      if (!workspace) missingFields.push('Workspace');
+      if (!repoSlug) missingFields.push('Repo Slug');
+      if (!tagFormat) missingFields.push('Tag 格式');
+
+      if (missingFields.length > 0) {
+        console.error('❌ 验证失败：缺少必填字段:', missingFields.join(', '));
+        Components.Toast.error(`请填写所有必填字段：${missingFields.join('、')}`);
+        return null;
+      }
+
+      /** 收集环境配置 */
+      const environments = {};
+      const envInputs = document.querySelectorAll(".env-job-name");
+
+      console.log('📝 收集环境配置，找到', envInputs.length, '个环境输入框');
+
+      envInputs.forEach((input) => {
+        const env = input.getAttribute("data-env");
+        const jobName = input.value.trim();
+
+        console.log('  环境:', env, '-> Job:', jobName);
+
+        if (env && jobName) {
+          environments[env] = {
+            name: env,
+            tagFormat: tagFormat, // 使用统一的 tag 格式
+            jenkinsJobName: jobName,
+            jenkinsTagParameter: "TAG_VERSION", // 固定参数名
+          };
+        }
+      });
+
+      console.log('📝 收集到的环境配置:', environments);
+
+      if (Object.keys(environments).length === 0) {
+        console.error('❌ 验证失败：没有环境配置');
+        Components.Toast.error("请至少添加一个环境");
+        return null;
+      }
+
+      const projectConfig = {
+        name,
+        path,
+        repository: {
+          workspace,
+          repoSlug,
+        },
+        jenkinsInstance: "app", // 固定为 app
+        tagFormat, // 项目级别的 tag 格式
+        environments,
+      };
+
+      console.log('📝 完整项目配置:', JSON.stringify(projectConfig, null, 2));
+
+      return projectConfig;
+    } catch (error) {
+      console.error('❌ 收集数据失败:', error);
+      Components.Toast.error("收集数据失败: " + error.message);
+      return null;
+    }
+  },
+
+  /**
+   * 使用收集的数据保存项目
+   */
+  async saveProjectWithData(projectConfig) {
+    try {
+      Components.Loading.show("保存项目中...");
+
+      if (this.currentEditingProject) {
+        /** 更新项目 */
+        console.log('📝 发送更新请求:', `/projects/${encodeURIComponent(projectConfig.path)}`);
+        await API.put(`/projects/${encodeURIComponent(projectConfig.path)}`, projectConfig);
+      } else {
+        /** 添加项目 */
+        console.log('📝 发送添加请求: /projects');
+        await API.post("/projects", projectConfig);
+      }
+
+      console.log('✅ 保存成功');
+      Components.Loading.hide();
+      Components.Toast.success("项目保存成功");
+
+      /** 重新加载项目列表 */
+      await this.loadProjects();
+    } catch (error) {
+      console.error('❌ 保存失败:', error);
+      Components.Loading.hide();
+      Components.Toast.error("保存项目失败: " + error.message);
+    }
+  },
+
+  /**
+   * 保存项目（已废弃，保留用于兼容）
+   */
+  async saveProject() {
+    const projectData = this.collectProjectData();
+    if (projectData) {
+      await this.saveProjectWithData(projectData);
+    }
+  },
+
+  /**
+   * 删除项目
+   */
+  async deleteProject(projectPath) {
+    Components.Modal.confirm(`确定要删除项目 "${this.projects[projectPath].name}" 吗？`, async () => {
+      try {
+        Components.Loading.show("删除项目中...");
+        await API.delete(`/projects/${encodeURIComponent(projectPath)}`);
+        Components.Loading.hide();
+        Components.Toast.success("项目删除成功");
+        await this.loadProjects();
+      } catch (error) {
+        Components.Loading.hide();
+        Components.Toast.error("删除项目失败: " + error.message);
+      }
+    });
+  },
+};