long-git-cli 1.0.16 → 1.0.20

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

@@ -0,0 +1,158 @@
+/**
+ * Jenkins 部署测试页面逻辑
+ */
+
+const DeployPage = {
+  /**
+   * 初始化部署页面
+   */
+  async init() {
+    /** 加载保存的配置 */
+    await this.loadConfig();
+
+    /** 绑定事件 */
+    this.bindEvents();
+  },
+
+  /**
+   * 加载保存的配置
+   */
+  async loadConfig() {
+    try {
+      const config = localStorage.getItem('jenkins-deploy-config');
+      if (config) {
+        const data = JSON.parse(config);
+        document.getElementById('deploy-jenkins-url').value = data.url || '';
+        document.getElementById('deploy-jenkins-username').value = data.username || '';
+        document.getElementById('deploy-jenkins-token').value = data.token || '';
+        document.getElementById('deploy-job-name').value = data.jobName || '';
+      }
+    } catch (error) {
+      console.error('加载配置失败:', error);
+    }
+  },
+
+  /**
+   * 保存配置
+   */
+  saveConfig() {
+    try {
+      const config = {
+        url: document.getElementById('deploy-jenkins-url').value.trim(),
+        username: document.getElementById('deploy-jenkins-username').value.trim(),
+        token: document.getElementById('deploy-jenkins-token').value.trim(),
+        jobName: document.getElementById('deploy-job-name').value.trim(),
+      };
+      
+      localStorage.setItem('jenkins-deploy-config', JSON.stringify(config));
+      Components.Toast.success('配置已保存');
+    } catch (error) {
+      console.error('保存配置失败:', error);
+      Components.Toast.error('保存配置失败: ' + error.message);
+    }
+  },
+
+  /**
+   * 绑定事件
+   */
+  bindEvents() {
+    /** 保存配置按钮 */
+    document.getElementById('save-deploy-config-btn')?.addEventListener('click', () => {
+      this.saveConfig();
+    });
+
+    /** 部署按钮 */
+    document.getElementById('deploy-btn')?.addEventListener('click', () => {
+      this.triggerDeploy();
+    });
+  },
+
+  /**
+   * 添加日志
+   */
+  addLog(message, type = 'info') {
+    const logContainer = document.getElementById('deploy-logs');
+    if (!logContainer) return;
+
+    const timestamp = new Date().toLocaleTimeString();
+    const logEntry = document.createElement('div');
+    logEntry.style.cssText = 'padding: 0.25rem 0; font-family: monospace; font-size: 0.875rem;';
+    
+    const colors = {
+      info: 'var(--text-secondary)',
+      success: 'var(--success-color)',
+      error: 'var(--error-color)',
+      warning: '#f59e0b',
+    };
+    
+    logEntry.innerHTML = `<span style="color: var(--text-secondary);">[${timestamp}]</span> <span style="color: ${colors[type]};">${message}</span>`;
+    logContainer.appendChild(logEntry);
+    logContainer.scrollTop = logContainer.scrollHeight;
+  },
+
+  /**
+   * 清空日志
+   */
+  clearLogs() {
+    const logContainer = document.getElementById('deploy-logs');
+    if (logContainer) {
+      logContainer.innerHTML = '';
+    }
+  },
+
+  /**
+   * 触发部署
+   */
+  async triggerDeploy() {
+    try {
+      const url = document.getElementById('deploy-jenkins-url').value.trim();
+      const username = document.getElementById('deploy-jenkins-username').value.trim();
+      const token = document.getElementById('deploy-jenkins-token').value.trim();
+      const jobName = document.getElementById('deploy-job-name').value.trim();
+
+      if (!url || !username || !token || !jobName) {
+        Components.Toast.error('请填写所有必填字段');
+        return;
+      }
+
+      /** 显示日志容器 */
+      const statusDiv = document.getElementById('deploy-status');
+      statusDiv.style.display = 'block';
+      statusDiv.innerHTML = `
+        <div style="padding: 1rem; background-color: #1e1e1e; border-radius: var(--radius-md); border: 1px solid var(--border-color);">
+          <div style="color: #4ade80; font-size: 0.875rem; margin-bottom: 0.5rem; font-weight: 600;">
+            📋 Jenkins 部署日志
+          </div>
+          <div id="deploy-logs" style="max-height: 400px; overflow-y: auto; color: var(--text-secondary); font-family: monospace; font-size: 0.875rem;">
+          </div>
+        </div>
+      `;
+
+      this.clearLogs();
+      this.addLog('开始触发 Jenkins 部署...', 'info');
+      this.addLog(`Jenkins: ${url}`, 'info');
+      this.addLog(`Job: ${jobName}`, 'info');
+      this.addLog(`参数: action=approve`, 'info');
+
+      const response = await API.post('/test-jenkins-deploy', {
+        url,
+        username,
+        token,
+        jobName,
+        parameters: {
+          action: 'approve',
+        },
+      });
+
+      this.addLog(`构建触发成功`, 'success');
+      this.addLog(`构建编号: #${response.buildNumber}`, 'success');
+      this.addLog(`构建结果: ${response.result}`, 'success');
+      this.addLog(`构建 URL: ${response.url}`, 'success');
+
+      Components.Toast.success('部署成功！');
+    } catch (error) {
+      this.addLog(`错误: ${error.message}`, 'error');
+      Components.Toast.error('部署失败: ' + error.message);
+    }
+  },
+};

package/src/devops/ui/public/js/full-deploy-page.js

@@ -0,0 +1,247 @@
+/**
+ * 完整部署流程页面逻辑
+ */
+
+const FullDeployPage = {
+  projects: {},
+  selectedProject: null,
+  selectedEnvironment: null,
+
+  /**
+   * 初始化完整部署页面
+   */
+  async init() {
+    /** 加载项目列表 */
+    await this.loadProjects();
+
+    /** 绑定事件 */
+    this.bindEvents();
+  },
+
+  /**
+   * 加载项目列表
+   */
+  async loadProjects() {
+    try {
+      const data = await API.get("/projects");
+      this.projects = data.projects || {};
+      this.renderProjectSelect();
+    } catch (error) {
+      Components.Toast.error("加载项目列表失败: " + error.message);
+    }
+  },
+
+  /**
+   * 渲染项目选择下拉框
+   */
+  renderProjectSelect() {
+    const select = document.getElementById("full-deploy-project");
+    if (!select) return;
+
+    const projectPaths = Object.keys(this.projects);
+
+    if (projectPaths.length === 0) {
+      select.innerHTML = '<option value="">暂无项目，请先添加项目</option>';
+      return;
+    }
+
+    select.innerHTML = '<option value="">请选择项目</option>';
+    projectPaths.forEach((projectPath) => {
+      const project = this.projects[projectPath];
+      const option = document.createElement("option");
+      option.value = projectPath;
+      option.textContent = project.name;
+      select.appendChild(option);
+    });
+  },
+
+  /**
+   * 渲染环境选择下拉框
+   */
+  renderEnvironmentSelect(projectPath) {
+    const select = document.getElementById("full-deploy-environment");
+    if (!select) return;
+
+    const project = this.projects[projectPath];
+    if (!project) {
+      select.innerHTML = '<option value="">请先选择项目</option>';
+      return;
+    }
+
+    const environments = Object.keys(project.environments || {});
+
+    if (environments.length === 0) {
+      select.innerHTML = '<option value="">该项目暂无环境配置</option>';
+      return;
+    }
+
+    select.innerHTML = '<option value="">请选择环境</option>';
+    environments.forEach((env) => {
+      const option = document.createElement("option");
+      option.value = env;
+      option.textContent = env;
+      select.appendChild(option);
+    });
+  },
+
+  /**
+   * 绑定事件
+   */
+  bindEvents() {
+    /** 项目选择变化 */
+    document
+      .getElementById("full-deploy-project")
+      ?.addEventListener("change", (e) => {
+        const projectPath = e.target.value;
+        this.selectedProject = projectPath;
+        this.renderEnvironmentSelect(projectPath);
+      });
+
+    /** 环境选择变化 */
+    document
+      .getElementById("full-deploy-environment")
+      ?.addEventListener("change", (e) => {
+        this.selectedEnvironment = e.target.value;
+      });
+
+    /** 部署按钮 */
+    document
+      .getElementById("full-deploy-btn")
+      ?.addEventListener("click", () => {
+        this.startDeploy();
+      });
+  },
+
+  /**
+   * 开始部署
+   */
+  async startDeploy() {
+    try {
+      const projectPath = this.selectedProject;
+      const environment = this.selectedEnvironment;
+
+      if (!projectPath || !environment) {
+        Components.Toast.error("请选择项目和环境");
+        return;
+      }
+
+      const statusDiv = document.getElementById("full-deploy-status");
+      statusDiv.style.display = "block";
+      statusDiv.innerHTML = `
+        <div style="padding: 1rem; background-color: #1e1e1e; border-radius: var(--radius-md); border: 1px solid var(--border-color);">
+          <div style="color: #4ade80; font-size: 0.875rem; margin-bottom: 0.5rem; font-weight: 600;">
+            📋 一键部署执行日志
+          </div>
+          <div id="full-deploy-logs" style="max-height: 400px; overflow-y: auto; color: var(--text-secondary); font-family: monospace; font-size: 0.875rem;">
+          </div>
+        </div>
+      `;
+
+      this.clearLogs();
+
+      // 使用 EventSource 接收 SSE
+      const params = new URLSearchParams({
+        projectPath,
+        environment,
+      });
+
+      const eventSource = new EventSource(`/api/full-deploy-stream?${params}`);
+
+      eventSource.addEventListener('log', (e) => {
+        const data = JSON.parse(e.data);
+        this.addLog(data.message, data.type || 'info');
+      });
+
+      eventSource.addEventListener('error', (e) => {
+        try {
+          const data = JSON.parse(e.data);
+          this.addLog(`错误: ${data.message}`, 'error');
+          Components.Toast.error('部署失败');
+        } catch (err) {
+          console.error('解析错误消息失败:', err);
+        }
+        eventSource.close();
+      });
+
+      eventSource.addEventListener('complete', (e) => {
+        const data = JSON.parse(e.data);
+        this.addLog(`${data.message}`, 'success');
+        this.addLog(`Tag: ${data.tagName}`, 'info');
+        this.addLog(`Jenkins 构建: #${data.jenkinsBuildNumber}`, 'info');
+        this.addLog(`构建 URL: ${data.jenkinsBuildUrl}`, 'info');
+        Components.Toast.success('部署成功！');
+        eventSource.close();
+      });
+
+      eventSource.onerror = (error) => {
+        console.error('SSE 连接错误:', error);
+        this.addLog('连接中断或服务器错误', 'error');
+        Components.Toast.error('连接失败');
+        eventSource.close();
+      };
+
+    } catch (error) {
+      this.addLog(`错误: ${error.message}`, 'error');
+      Components.Toast.error('部署失败: ' + error.message);
+    }
+  },
+
+  /**
+   * 添加日志
+   */
+  addLog(message, type = 'info') {
+    const logContainer = document.getElementById('full-deploy-logs');
+    if (!logContainer) return;
+
+    const timestamp = new Date().toLocaleTimeString();
+    const logEntry = document.createElement('div');
+    logEntry.style.cssText = 'padding: 0.25rem 0; font-family: monospace; font-size: 0.875rem;';
+    
+    const colors = {
+      info: 'var(--text-secondary)',
+      success: 'var(--success-color)',
+      error: 'var(--error-color)',
+      warning: '#f59e0b',
+    };
+    
+    logEntry.innerHTML = `<span style="color: var(--text-secondary);">[${timestamp}]</span> <span style="color: ${colors[type]};">${message}</span>`;
+    logContainer.appendChild(logEntry);
+    logContainer.scrollTop = logContainer.scrollHeight;
+  },
+
+  /**
+   * 清空日志
+   */
+  clearLogs() {
+    const logContainer = document.getElementById('full-deploy-logs');
+    if (logContainer) {
+      logContainer.innerHTML = '';
+    }
+  },
+
+  /**
+   * 创建进度 HTML
+   */
+  createProgressHtml(currentStep, steps) {
+    return `
+      <div style="padding: 1rem; 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>${currentStep}</strong>
+        </div>
+        ${
+          steps.length > 0
+            ? `
+          <div style="margin-top: 1rem;">
+            ${steps.map((step) => `<div style="color: var(--text-secondary); font-size: 0.75rem; margin-bottom: 0.25rem;">✓ ${step}</div>`).join("")}
+          </div>
+        `
+            : ""
+        }
+        <div style="margin-top: 0.75rem;">
+          <div class="loading-spinner"></div>
+        </div>
+      </div>
+    `;
+  },
+};
+