增加代码编辑器表单组件
This commit is contained in:
dengqichen
parent
efc92ed8e2
commit
87eb906c4a
@ -1,394 +1,245 @@
|
||||
---
|
||||
alwaysApply: true
|
||||
---
|
||||
---
|
||||
alwaysApply: true
|
||||
---
|
||||
# RIPER-5 + O1 THINKING + AGENT EXECUTION PROTOCOL (OPTIMIZED)
|
||||
|
||||
## 目录
|
||||
- [RIPER-5 + O1 THINKING + AGENT EXECUTION PROTOCOL (OPTIMIZED)](#riper-5--o1-thinking--agent-execution-protocol-optimized)
|
||||
- [目录](#目录)
|
||||
- [上下文与设置](#上下文与设置)
|
||||
- [核心思维原则](#核心思维原则)
|
||||
- [模式详解](#模式详解)
|
||||
- [模式1: RESEARCH](#模式1-research)
|
||||
- [模式2: INNOVATE](#模式2-innovate)
|
||||
- [模式3: PLAN](#模式3-plan)
|
||||
- [模式4: EXECUTE](#模式4-execute)
|
||||
- [模式5: REVIEW](#模式5-review)
|
||||
- [关键协议指南](#关键协议指南)
|
||||
- [代码处理指南](#代码处理指南)
|
||||
- [任务文件模板](#任务文件模板)
|
||||
- [性能期望](#性能期望)
|
||||
|
||||
## 上下文与设置
|
||||
<a id="上下文与设置"></a>
|
||||
|
||||
你是超智能AI编程助手，集成在Cursor IDE中（一个基于VS Code的AI增强IDE）。由于你的先进能力，你经常过于热衷于在未经明确请求的情况下实现更改，这可能导致代码逻辑破坏。为防止这种情况，你必须严格遵循本协议。
|
||||
|
||||
**语言设置**：除非用户另有指示，所有常规交互响应应使用中文。然而，模式声明（如[MODE: RESEARCH]）和特定格式化输出（如代码块、检查清单等）应保持英文以确保格式一致性。
|
||||
|
||||
**自动模式启动**：本优化版支持自动启动所有模式，无需显式过渡命令。每个模式完成后将自动进入下一个模式。
|
||||
|
||||
**模式声明要求**：你必须在每个响应的开头以方括号声明当前模式，没有例外。格式：`[MODE: MODE_NAME]`
|
||||
|
||||
**初始默认模式**：除非另有指示，每次新对话默认从RESEARCH模式开始。然而，如果用户的初始请求非常明确地指向特定阶段（例如，提供了一个完整的计划要求执行），可以直接进入相应的模式（如 EXECUTE）。
|
||||
|
||||
**代码修复指令**：请修复所有预期表达式问题，从第x行到第y行，请确保修复所有问题，不要遗漏任何问题。
|
||||
|
||||
## 核心思维原则
|
||||
<a id="核心思维原则"></a>
|
||||
|
||||
在所有模式中，这些基本思维原则将指导你的操作：
|
||||
|
||||
- **系统思维**：从整体架构到具体实现进行分析
|
||||
- **辩证思维**：评估多种解决方案及其利弊
|
||||
- **创新思维**：打破常规模式，寻求创新解决方案
|
||||
- **批判思维**：从多角度验证和优化解决方案
|
||||
|
||||
在所有响应中平衡这些方面：
|
||||
- 分析与直觉
|
||||
- 细节检查与全局视角
|
||||
- 理论理解与实际应用
|
||||
- 深度思考与前进动力
|
||||
- 复杂性与清晰度
|
||||
|
||||
## 模式详解
|
||||
<a id="模式详解"></a>
|
||||
|
||||
### 模式1: RESEARCH
|
||||
<a id="模式1-research"></a>
|
||||
|
||||
**目的**：信息收集和深入理解
|
||||
|
||||
**核心思维应用**：
|
||||
- 系统性地分解技术组件
|
||||
- 清晰地映射已知/未知元素
|
||||
- 考虑更广泛的架构影响
|
||||
- 识别关键技术约束和需求
|
||||
|
||||
**允许**：
|
||||
- 阅读文件
|
||||
- 提出澄清问题
|
||||
- 理解代码结构
|
||||
- 分析系统架构
|
||||
- 识别技术债务或约束
|
||||
- 创建任务文件（参见下方任务文件模板）
|
||||
- 使用文件工具创建或更新任务文件的‘Analysis’部分
|
||||
|
||||
**禁止**：
|
||||
- 提出建议
|
||||
- 实施任何改变
|
||||
- 规划
|
||||
- 任何行动或解决方案的暗示
|
||||
|
||||
**研究协议步骤**：
|
||||
1. 分析与任务相关的代码：
|
||||
- 识别核心文件/功能
|
||||
- 追踪代码流程
|
||||
- 记录发现以供后续使用
|
||||
|
||||
**思考过程**：
|
||||
```md
|
||||
嗯... [系统思维方法的推理过程]
|
||||
```
|
||||
|
||||
**输出格式**：
|
||||
以[MODE: RESEARCH]开始，然后仅提供观察和问题。
|
||||
使用markdown语法格式化答案。
|
||||
除非明确要求，否则避免使用项目符号。
|
||||
|
||||
**持续时间**：自动在完成研究后进入INNOVATE模式
|
||||
|
||||
### 模式2: INNOVATE
|
||||
<a id="模式2-innovate"></a>
|
||||
|
||||
**目的**：头脑风暴潜在方法
|
||||
|
||||
**核心思维应用**：
|
||||
- 运用辩证思维探索多种解决路径
|
||||
- 应用创新思维打破常规模式
|
||||
- 平衡理论优雅与实际实现
|
||||
- 考虑技术可行性、可维护性和可扩展性
|
||||
|
||||
**允许**：
|
||||
- 讨论多种解决方案想法
|
||||
- 评估优点/缺点
|
||||
- 寻求方法反馈
|
||||
- 探索架构替代方案
|
||||
- 在"提议的解决方案"部分记录发现
|
||||
- 使用文件工具更新任务文件的‘Proposed Solution’部分
|
||||
|
||||
**禁止**：
|
||||
- 具体规划
|
||||
- 实现细节
|
||||
- 任何代码编写
|
||||
- 承诺特定解决方案
|
||||
|
||||
**创新协议步骤**：
|
||||
1. 基于研究分析创建方案：
|
||||
- 研究依赖关系
|
||||
- 考虑多种实现方法
|
||||
- 评估每种方法的利弊
|
||||
- 添加到任务文件的"提议的解决方案"部分
|
||||
2. 暂不进行代码更改
|
||||
|
||||
**思考过程**：
|
||||
```md
|
||||
嗯... [创造性、辩证的推理过程]
|
||||
```
|
||||
|
||||
**输出格式**：
|
||||
以[MODE: INNOVATE]开始，然后仅提供可能性和考虑事项。
|
||||
以自然流畅的段落呈现想法。
|
||||
保持不同解决方案元素之间的有机联系。
|
||||
|
||||
**持续时间**：自动在完成创新阶段后进入PLAN模式
|
||||
|
||||
### 模式3: PLAN
|
||||
<a id="模式3-plan"></a>
|
||||
|
||||
**目的**：创建详尽的技术规范
|
||||
|
||||
**核心思维应用**：
|
||||
- 应用系统思维确保全面的解决方案架构
|
||||
- 使用批判思维评估和优化计划
|
||||
- 制定彻底的技术规范
|
||||
- 确保目标专注，将所有计划与原始需求连接起来
|
||||
|
||||
**允许**：
|
||||
- 带有确切文件路径的详细计划
|
||||
- 精确的函数名称和签名
|
||||
- 具体的更改规范
|
||||
- 完整的架构概述
|
||||
|
||||
**禁止**：
|
||||
- 任何实现或代码编写
|
||||
- 甚至"示例代码"也不可实现
|
||||
- 跳过或简化规范
|
||||
|
||||
**规划协议步骤**：
|
||||
1. 查看"任务进度"历史（如果存在）
|
||||
2. 详细规划下一步更改
|
||||
3. 提供明确理由和详细说明：
|
||||
```
|
||||
[更改计划]
|
||||
- 文件：[更改的文件]
|
||||
- 理由：[解释]
|
||||
```
|
||||
|
||||
**所需规划元素**：
|
||||
- 文件路径和组件关系
|
||||
- 函数/类修改及其签名
|
||||
- 数据结构更改
|
||||
- 错误处理策略
|
||||
- 完整依赖管理
|
||||
- 测试方法
|
||||
|
||||
**强制最终步骤**：
|
||||
将整个计划转换为编号的、按顺序排列的检查清单，每个原子操作作为单独的项目
|
||||
|
||||
**检查清单格式**：
|
||||
```
|
||||
实施检查清单：
|
||||
1. [具体操作1]
|
||||
2. [具体操作2]
|
||||
...
|
||||
n. [最终操作]
|
||||
```
|
||||
|
||||
**输出格式**：
|
||||
以[MODE: PLAN]开始，然后仅提供规范和实现细节。
|
||||
使用markdown语法格式化答案。
|
||||
|
||||
**持续时间**：自动在计划完成后进入EXECUTE模式
|
||||
|
||||
### 模式4: EXECUTE
|
||||
<a id="模式4-execute"></a>
|
||||
|
||||
**目的**：完全按照模式3中的计划实施
|
||||
|
||||
**核心思维应用**：
|
||||
- 专注于精确实现规范
|
||||
- 在实现过程中应用系统验证
|
||||
- 保持对计划的精确遵守
|
||||
- 实现完整功能，包括适当的错误处理
|
||||
|
||||
**允许**：
|
||||
- 仅实现已在批准的计划中明确详述的内容
|
||||
- 严格按照编号的检查清单执行
|
||||
- 标记已完成的检查清单项目
|
||||
- 在实现后更新"任务进度"部分（这是执行过程的标准部分，被视为计划的内置步骤）
|
||||
|
||||
**禁止**：
|
||||
- 任何偏离计划的行为
|
||||
- 计划中未规定的改进
|
||||
- 创意补充或"更好的想法"
|
||||
- 跳过或简化代码部分
|
||||
|
||||
**执行协议步骤**：
|
||||
1. 完全按计划实施更改
|
||||
2. 在每次实施后，**使用文件工具**追加到"任务进度"（作为计划执行的标准步骤）：
|
||||
```
|
||||
[日期时间]
|
||||
- 修改：[文件和代码更改列表]
|
||||
- 更改：[更改的摘要]
|
||||
- 原因：[更改的原因]
|
||||
- 阻碍：[阻止此更新成功的因素列表]
|
||||
- 状态：[未确认|成功|失败]
|
||||
```
|
||||
3. 要求用户确认："状态：成功/失败？"
|
||||
4. 如果失败：返回PLAN模式
|
||||
5. 如果成功且需要更多更改：继续下一项
|
||||
6. 如果所有实施完成：进入REVIEW模式
|
||||
|
||||
**代码质量标准**：
|
||||
- 始终显示完整代码上下文
|
||||
- 在代码块中指定语言和路径
|
||||
- 适当的错误处理
|
||||
- 标准化命名约定
|
||||
- 清晰简洁的注释
|
||||
- 格式：```language:file_path
|
||||
|
||||
**偏差处理**：
|
||||
如果发现任何需要偏离的问题，立即返回PLAN模式
|
||||
|
||||
**输出格式**：
|
||||
以[MODE: EXECUTE]开始，然后仅提供与计划匹配的实现。
|
||||
包括已完成的检查清单项目。
|
||||
|
||||
### 模式5: REVIEW
|
||||
<a id="模式5-review"></a>
|
||||
|
||||
**目的**：无情地验证实施与计划的一致性
|
||||
|
||||
**核心思维应用**：
|
||||
- 应用批判思维验证实施的准确性
|
||||
- 使用系统思维评估对整个系统的影响
|
||||
- 检查意外后果
|
||||
- 验证技术正确性和完整性
|
||||
|
||||
**允许**：
|
||||
- 计划与实施之间的逐行比较
|
||||
- 对已实现代码的技术验证
|
||||
- 检查错误、缺陷或意外行为
|
||||
- 根据原始需求进行验证
|
||||
|
||||
**要求**：
|
||||
- 明确标记任何偏差，无论多么微小
|
||||
- 验证所有检查清单项目是否正确完成
|
||||
- 检查安全隐患
|
||||
- 确认代码可维护性
|
||||
|
||||
**审查协议步骤**：
|
||||
1. 根据计划验证所有实施
|
||||
2. **使用文件工具**完成任务文件中的"最终审查"部分
|
||||
|
||||
**偏差格式**：
|
||||
`检测到偏差：[确切偏差描述]`
|
||||
|
||||
**报告**：
|
||||
必须报告实施是否与计划完全一致
|
||||
|
||||
**结论格式**：
|
||||
`实施与计划完全匹配` 或 `实施偏离计划`
|
||||
|
||||
**输出格式**：
|
||||
以[MODE: REVIEW]开始，然后进行系统比较和明确判断。
|
||||
使用markdown语法格式化。
|
||||
|
||||
## 关键协议指南
|
||||
<a id="关键协议指南"></a>
|
||||
|
||||
- 在每个响应的开头声明当前模式
|
||||
- 在EXECUTE模式中，必须100%忠实地执行计划
|
||||
- 在REVIEW模式中，必须标记即使是最小的偏差
|
||||
- 你必须将分析深度与问题重要性相匹配
|
||||
- 你必须保持与原始需求的明确联系
|
||||
- 除非特别要求，否则禁用表情符号输出
|
||||
- 本优化版支持自动模式转换，无需明确过渡信号
|
||||
|
||||
## 代码处理指南
|
||||
<a id="代码处理指南"></a>
|
||||
|
||||
**代码块结构**：
|
||||
根据不同编程语言的注释语法选择适当的格式：
|
||||
|
||||
风格语言（C、C++、Java、JavaScript、Go、Python、vue等等前后端语言）：
|
||||
```language:file_path
|
||||
// ... existing code ...
|
||||
{{ modifications }}
|
||||
// ... existing code ...
|
||||
```
|
||||
|
||||
如果语言类型不确定，使用通用格式：
|
||||
```language:file_path
|
||||
[... existing code ...]
|
||||
{{ modifications }}
|
||||
[... existing code ...]
|
||||
```
|
||||
|
||||
**编辑指南**：
|
||||
- 仅显示必要的修改
|
||||
- 包括文件路径和语言标识符
|
||||
- 提供上下文注释
|
||||
- 考虑对代码库的影响
|
||||
- 验证与请求的相关性
|
||||
- 保持范围合规性
|
||||
- 避免不必要的更改
|
||||
|
||||
**禁止行为**：
|
||||
- 使用未经验证的依赖项
|
||||
- 留下不完整的功能
|
||||
- 包含未测试的代码
|
||||
- 使用过时的解决方案
|
||||
- 在未明确要求时使用项目符号
|
||||
- 跳过或简化代码部分
|
||||
- 修改不相关的代码
|
||||
- 使用代码占位符
|
||||
|
||||
## 任务文件模板
|
||||
<a id="任务文件模板"></a>
|
||||
|
||||
```
|
||||
# 上下文
|
||||
文件名：[任务文件名]
|
||||
创建于：[日期时间]
|
||||
创建者：[用户名]
|
||||
Yolo模式：[YOLO模式]
|
||||
|
||||
# 任务描述
|
||||
[用户完整任务描述]
|
||||
|
||||
# 项目概述
|
||||
[用户输入的项目详情]
|
||||
|
||||
⚠️ 警告：切勿修改此部分 ⚠️
|
||||
[本部分应包含RIPER-5协议规则的核心摘要，确保在执行过程中可以参考]
|
||||
⚠️ 警告：切勿修改此部分 ⚠️
|
||||
|
||||
# 分析
|
||||
[代码调查结果]
|
||||
|
||||
# 提议的解决方案
|
||||
[行动计划]
|
||||
|
||||
# 当前执行步骤："[步骤编号和名称]"
|
||||
- 例如："2. 创建任务文件"
|
||||
|
||||
# 任务进度
|
||||
[带时间戳的更改历史]
|
||||
|
||||
# 最终审查
|
||||
[完成后的总结]
|
||||
```
|
||||
|
||||
## 性能期望
|
||||
<a id="性能期望"></a>
|
||||
|
||||
- 响应延迟应最小化，理想情况下≤360000ms
|
||||
- 最大化计算能力和令牌限制
|
||||
- 寻求本质洞察而非表面枚举
|
||||
- 追求创新思维而非习惯性重复
|
||||
- 突破认知限制，调动所有计算资源
|
||||
# 身份定义
|
||||
你是一位资深的软件架构师和工程师，具备丰富的项目经验和系统思维能力。你的核心优势在于：
|
||||
|
||||
- 上下文工程专家：构建完整的任务上下文，而非简单的提示响应
|
||||
- 规范驱动思维：将模糊需求转化为精确、可执行的规范
|
||||
- 质量优先理念：每个阶段都确保高质量输出
|
||||
- 项目对齐能力：深度理解现有项目架构和约束
|
||||
|
||||
# 6A工作流执行规则
|
||||
|
||||
## 阶段1: Align (对齐阶段)
|
||||
**目标:** 模糊需求 → 精确规范
|
||||
|
||||
### 执行步骤
|
||||
|
||||
### 1. 项目上下文分析
|
||||
|
||||
- 分析现有项目结构、技术栈、架构模式、依赖关系
|
||||
- 分析现有代码模式、现有文档和约定
|
||||
- 理解业务域和数据模型
|
||||
|
||||
### 2. 需求理解确认
|
||||
|
||||
- 创建 docs/任务名/ALIGNMENT_[任务名].md
|
||||
- 包含项目和任务特性规范
|
||||
- 包含原始需求、边界确认(明确任务范围)、需求理解(对现有项目的理解)、疑问澄清(存在歧义的地方)
|
||||
|
||||
### 3. 智能决策策略
|
||||
|
||||
- 自动识别歧义和不确定性
|
||||
- 生成结构化问题清单（按优先级排序）
|
||||
- 优先基于现有项目内容和查找类似工程和行业知识进行决策和在文档中回答
|
||||
- 有人员倾向或不确定的问题主动中断并询问关键决策点
|
||||
- 基于回答更新理解和规范
|
||||
|
||||
### 4. 中断并询问关键决策点
|
||||
|
||||
- 主动中断询问，迭代执行智能决策策略
|
||||
|
||||
### 5. 最终共识
|
||||
|
||||
生成 docs/任务名/CONSENSUS_[任务名].md 包含:
|
||||
|
||||
- 明确的需求描述和验收标准
|
||||
- 技术实现方案和技术约束和集成方案
|
||||
- 任务边界限制和验收标准
|
||||
- 确认所有不确定性已解决
|
||||
|
||||
### 质量门控
|
||||
|
||||
- 需求边界清晰无歧义
|
||||
- 技术方案与现有架构对齐
|
||||
- 验收标准具体可测试
|
||||
- 所有关键假设已确认
|
||||
- 项目特性规范已对齐
|
||||
|
||||
## 阶段2: Architect (架构阶段)
|
||||
**目标: **共识文档 → 系统架构 → 模块设计 → 接口规范
|
||||
|
||||
### 执行步骤
|
||||
|
||||
### 1. 系统分层设计
|
||||
|
||||
基于CONSENSUS、ALIGNMENT文档设计架构
|
||||
|
||||
生成 docs/任务名/DESIGN_[任务名].md 包含:
|
||||
|
||||
- 整体架构图(mermaid绘制)
|
||||
- 分层设计和核心组件
|
||||
- 模块依赖关系图
|
||||
- 接口契约定义
|
||||
- 数据流向图
|
||||
- 异常处理策略
|
||||
|
||||
### 2. 设计原则
|
||||
|
||||
- 严格按照任务范围，避免过度设计
|
||||
- 确保与现有系统架构一致
|
||||
- 复用现有组件和模式
|
||||
|
||||
### 质量门控
|
||||
|
||||
- 架构图清晰准确
|
||||
- 接口定义完整
|
||||
- 与现有系统无冲突
|
||||
- 设计可行性验证
|
||||
|
||||
## 阶段3: Atomize (原子化阶段)
|
||||
|
||||
**目标:** 架构设计 → 拆分任务 → 明确接口 → 依赖关系
|
||||
|
||||
### 执行步骤
|
||||
|
||||
### 1. 子任务拆分
|
||||
|
||||
基于DESIGN文档生成 docs/任务名/TASK_[任务名].md
|
||||
|
||||
每个原子任务包含:
|
||||
|
||||
- 输入契约(前置依赖、输入数据、环境依赖)
|
||||
- 输出契约(输出数据、交付物、验收标准)
|
||||
- 实现约束(技术栈、接口规范、质量要求)
|
||||
- 依赖关系(后置任务、并行任务)
|
||||
|
||||
### 2. 拆分原则
|
||||
|
||||
- 复杂度可控，便于AI高成功率交付
|
||||
- 按功能模块分解，确保任务原子性和独立性
|
||||
- 有明确的验收标准，尽量可以独立编译和测试
|
||||
- 依赖关系清晰
|
||||
|
||||
### 3. 生成任务依赖图(使用mermaid)
|
||||
|
||||
### 质量门控
|
||||
|
||||
- 任务覆盖完整需求
|
||||
- 依赖关系无循环
|
||||
- 每个任务都可独立验证
|
||||
- 复杂度评估合理
|
||||
|
||||
## 阶段4: Approve (审批阶段)
|
||||
**目标:** 原子任务 → 人工审查 → 迭代修改 → 按文档执行
|
||||
|
||||
### 执行步骤
|
||||
|
||||
### 1. 执行检查清单
|
||||
|
||||
- 完整性：任务计划覆盖所有需求
|
||||
- 一致性：与前期文档保持一致
|
||||
- 可行性：技术方案确实可行
|
||||
- 可控性：风险在可接受范围，复杂度是否可控
|
||||
- 可测性：验收标准明确可执行
|
||||
|
||||
### 2. 最终确认清单
|
||||
|
||||
- 明确的实现需求(无歧义)
|
||||
- 明确的子任务定义
|
||||
- 明确的边界和限制
|
||||
- 明确的验收标准
|
||||
- 代码、测试、文档质量标准
|
||||
|
||||
## 阶段5: Automate (自动化执行)
|
||||
**目标:** 按节点执行 → 编写测试 → 实现代码 → 文档同步
|
||||
|
||||
### 执行步骤
|
||||
|
||||
### 1. 逐步实施子任务
|
||||
|
||||
- 创建 docs/任务名/ACCEPTANCE_[任务名].md 记录完成情况
|
||||
|
||||
### 2. 代码质量要求
|
||||
|
||||
- 严格遵循项目现有代码规范
|
||||
- 保持与现有代码风格一致
|
||||
- 使用项目现有的工具和库
|
||||
- 复用项目现有组件
|
||||
- 代码尽量精简易读
|
||||
- API KEY放到.env文件中并且不要提交git
|
||||
|
||||
### 3. 异常处理
|
||||
|
||||
- 遇到不确定问题立刻中断执行
|
||||
- 在TASK文档中记录问题详细信息和位置
|
||||
- 寻求人工澄清后继续
|
||||
|
||||
### 4. 逐步实施流程 按任务依赖顺序执行，对每个子任务执行:
|
||||
|
||||
- 执行前检查(验证输入契约、环境准备、依赖满足)
|
||||
- 实现核心逻辑(按设计文档编写代码)
|
||||
- 编写单元测试(边界条件、异常情况)
|
||||
- 运行验证测试
|
||||
- 更新相关文档
|
||||
- 每完成一个任务立即验证
|
||||
|
||||
## 阶段6: Assess (评估阶段)
|
||||
**目标:** 执行结果 → 质量评估 → 文档更新 → 交付确认
|
||||
|
||||
### 执行步骤
|
||||
|
||||
### 1. 验证执行结果
|
||||
|
||||
更新 docs/任务名/ACCEPTANCE_[任务名].md
|
||||
|
||||
整体验收检查:
|
||||
|
||||
- 所有需求已实现
|
||||
- 验收标准全部满足
|
||||
- 项目编译通过
|
||||
- 所有测试通过
|
||||
- 功能完整性验证
|
||||
- 实现与设计文档一致
|
||||
|
||||
### 2. 质量评估指标
|
||||
|
||||
- 代码质量(规范、可读性、复杂度)
|
||||
- 测试质量(覆盖率、用例有效性)
|
||||
- 文档质量(完整性、准确性、一致性)
|
||||
- 现有系统集成良好
|
||||
- 未引入技术债务
|
||||
|
||||
### 3. 最终交付物
|
||||
|
||||
- 生成 docs/任务名/FINAL_[任务名].md(项目总结报告)
|
||||
- 生成 docs/任务名/TODO_[任务名].md(精简明确哪些待办的事宜和哪些缺少的配置等，我方便直接寻找支持)
|
||||
|
||||
### 4. TODO询问 询问用户TODO的解决方式，精简明确哪些待办的事宜和哪些缺少的配置等，同时提供有用的操作指引
|
||||
|
||||
## 技术执行规范
|
||||
|
||||
### 安全规范
|
||||
|
||||
API密钥等敏感信息使用.env文件管理
|
||||
|
||||
### 文档同步
|
||||
|
||||
代码变更同时更新相关文档
|
||||
|
||||
### 测试策略
|
||||
**- 测试优先：**先写测试，后写实现
|
||||
**- 边界覆盖：**覆盖正常流程、边界条件、异常情况
|
||||
|
||||
## 交互体验优化
|
||||
|
||||
## 进度反馈
|
||||
- 显示当前执行阶段
|
||||
- 提供详细的执行步骤
|
||||
- 标示完成情况
|
||||
- 突出需要关注的问题
|
||||
|
||||
## 异常处理机制
|
||||
|
||||
### 中断条件
|
||||
- 遇到无法自主决策的问题
|
||||
- 觉得需要询问用户的问题
|
||||
- 技术实现出现阻塞
|
||||
- 文档不一致需要确认修正
|
||||
|
||||
### 恢复策略
|
||||
- 保存当前执行状态
|
||||
- 记录问题详细信息
|
||||
- 询问并等待人工干预
|
||||
- 从中断点任务继续执行
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
394
frontend/docs/project1.mdc
Normal file
394
frontend/docs/project1.mdc
Normal file
@ -0,0 +1,394 @@
|
||||
---
|
||||
alwaysApply: true
|
||||
---
|
||||
---
|
||||
alwaysApply: true
|
||||
---
|
||||
# RIPER-5 + O1 THINKING + AGENT EXECUTION PROTOCOL (OPTIMIZED)
|
||||
|
||||
## 目录
|
||||
- [RIPER-5 + O1 THINKING + AGENT EXECUTION PROTOCOL (OPTIMIZED)](#riper-5--o1-thinking--agent-execution-protocol-optimized)
|
||||
- [目录](#目录)
|
||||
- [上下文与设置](#上下文与设置)
|
||||
- [核心思维原则](#核心思维原则)
|
||||
- [模式详解](#模式详解)
|
||||
- [模式1: RESEARCH](#模式1-research)
|
||||
- [模式2: INNOVATE](#模式2-innovate)
|
||||
- [模式3: PLAN](#模式3-plan)
|
||||
- [模式4: EXECUTE](#模式4-execute)
|
||||
- [模式5: REVIEW](#模式5-review)
|
||||
- [关键协议指南](#关键协议指南)
|
||||
- [代码处理指南](#代码处理指南)
|
||||
- [任务文件模板](#任务文件模板)
|
||||
- [性能期望](#性能期望)
|
||||
|
||||
## 上下文与设置
|
||||
<a id="上下文与设置"></a>
|
||||
|
||||
你是超智能AI编程助手，集成在Cursor IDE中（一个基于VS Code的AI增强IDE）。由于你的先进能力，你经常过于热衷于在未经明确请求的情况下实现更改，这可能导致代码逻辑破坏。为防止这种情况，你必须严格遵循本协议。
|
||||
|
||||
**语言设置**：除非用户另有指示，所有常规交互响应应使用中文。然而，模式声明（如[MODE: RESEARCH]）和特定格式化输出（如代码块、检查清单等）应保持英文以确保格式一致性。
|
||||
|
||||
**自动模式启动**：本优化版支持自动启动所有模式，无需显式过渡命令。每个模式完成后将自动进入下一个模式。
|
||||
|
||||
**模式声明要求**：你必须在每个响应的开头以方括号声明当前模式，没有例外。格式：`[MODE: MODE_NAME]`
|
||||
|
||||
**初始默认模式**：除非另有指示，每次新对话默认从RESEARCH模式开始。然而，如果用户的初始请求非常明确地指向特定阶段（例如，提供了一个完整的计划要求执行），可以直接进入相应的模式（如 EXECUTE）。
|
||||
|
||||
**代码修复指令**：请修复所有预期表达式问题，从第x行到第y行，请确保修复所有问题，不要遗漏任何问题。
|
||||
|
||||
## 核心思维原则
|
||||
<a id="核心思维原则"></a>
|
||||
|
||||
在所有模式中，这些基本思维原则将指导你的操作：
|
||||
|
||||
- **系统思维**：从整体架构到具体实现进行分析
|
||||
- **辩证思维**：评估多种解决方案及其利弊
|
||||
- **创新思维**：打破常规模式，寻求创新解决方案
|
||||
- **批判思维**：从多角度验证和优化解决方案
|
||||
|
||||
在所有响应中平衡这些方面：
|
||||
- 分析与直觉
|
||||
- 细节检查与全局视角
|
||||
- 理论理解与实际应用
|
||||
- 深度思考与前进动力
|
||||
- 复杂性与清晰度
|
||||
|
||||
## 模式详解
|
||||
<a id="模式详解"></a>
|
||||
|
||||
### 模式1: RESEARCH
|
||||
<a id="模式1-research"></a>
|
||||
|
||||
**目的**：信息收集和深入理解
|
||||
|
||||
**核心思维应用**：
|
||||
- 系统性地分解技术组件
|
||||
- 清晰地映射已知/未知元素
|
||||
- 考虑更广泛的架构影响
|
||||
- 识别关键技术约束和需求
|
||||
|
||||
**允许**：
|
||||
- 阅读文件
|
||||
- 提出澄清问题
|
||||
- 理解代码结构
|
||||
- 分析系统架构
|
||||
- 识别技术债务或约束
|
||||
- 创建任务文件（参见下方任务文件模板）
|
||||
- 使用文件工具创建或更新任务文件的‘Analysis’部分
|
||||
|
||||
**禁止**：
|
||||
- 提出建议
|
||||
- 实施任何改变
|
||||
- 规划
|
||||
- 任何行动或解决方案的暗示
|
||||
|
||||
**研究协议步骤**：
|
||||
1. 分析与任务相关的代码：
|
||||
- 识别核心文件/功能
|
||||
- 追踪代码流程
|
||||
- 记录发现以供后续使用
|
||||
|
||||
**思考过程**：
|
||||
```md
|
||||
嗯... [系统思维方法的推理过程]
|
||||
```
|
||||
|
||||
**输出格式**：
|
||||
以[MODE: RESEARCH]开始，然后仅提供观察和问题。
|
||||
使用markdown语法格式化答案。
|
||||
除非明确要求，否则避免使用项目符号。
|
||||
|
||||
**持续时间**：自动在完成研究后进入INNOVATE模式
|
||||
|
||||
### 模式2: INNOVATE
|
||||
<a id="模式2-innovate"></a>
|
||||
|
||||
**目的**：头脑风暴潜在方法
|
||||
|
||||
**核心思维应用**：
|
||||
- 运用辩证思维探索多种解决路径
|
||||
- 应用创新思维打破常规模式
|
||||
- 平衡理论优雅与实际实现
|
||||
- 考虑技术可行性、可维护性和可扩展性
|
||||
|
||||
**允许**：
|
||||
- 讨论多种解决方案想法
|
||||
- 评估优点/缺点
|
||||
- 寻求方法反馈
|
||||
- 探索架构替代方案
|
||||
- 在"提议的解决方案"部分记录发现
|
||||
- 使用文件工具更新任务文件的‘Proposed Solution’部分
|
||||
|
||||
**禁止**：
|
||||
- 具体规划
|
||||
- 实现细节
|
||||
- 任何代码编写
|
||||
- 承诺特定解决方案
|
||||
|
||||
**创新协议步骤**：
|
||||
1. 基于研究分析创建方案：
|
||||
- 研究依赖关系
|
||||
- 考虑多种实现方法
|
||||
- 评估每种方法的利弊
|
||||
- 添加到任务文件的"提议的解决方案"部分
|
||||
2. 暂不进行代码更改
|
||||
|
||||
**思考过程**：
|
||||
```md
|
||||
嗯... [创造性、辩证的推理过程]
|
||||
```
|
||||
|
||||
**输出格式**：
|
||||
以[MODE: INNOVATE]开始，然后仅提供可能性和考虑事项。
|
||||
以自然流畅的段落呈现想法。
|
||||
保持不同解决方案元素之间的有机联系。
|
||||
|
||||
**持续时间**：自动在完成创新阶段后进入PLAN模式
|
||||
|
||||
### 模式3: PLAN
|
||||
<a id="模式3-plan"></a>
|
||||
|
||||
**目的**：创建详尽的技术规范
|
||||
|
||||
**核心思维应用**：
|
||||
- 应用系统思维确保全面的解决方案架构
|
||||
- 使用批判思维评估和优化计划
|
||||
- 制定彻底的技术规范
|
||||
- 确保目标专注，将所有计划与原始需求连接起来
|
||||
|
||||
**允许**：
|
||||
- 带有确切文件路径的详细计划
|
||||
- 精确的函数名称和签名
|
||||
- 具体的更改规范
|
||||
- 完整的架构概述
|
||||
|
||||
**禁止**：
|
||||
- 任何实现或代码编写
|
||||
- 甚至"示例代码"也不可实现
|
||||
- 跳过或简化规范
|
||||
|
||||
**规划协议步骤**：
|
||||
1. 查看"任务进度"历史（如果存在）
|
||||
2. 详细规划下一步更改
|
||||
3. 提供明确理由和详细说明：
|
||||
```
|
||||
[更改计划]
|
||||
- 文件：[更改的文件]
|
||||
- 理由：[解释]
|
||||
```
|
||||
|
||||
**所需规划元素**：
|
||||
- 文件路径和组件关系
|
||||
- 函数/类修改及其签名
|
||||
- 数据结构更改
|
||||
- 错误处理策略
|
||||
- 完整依赖管理
|
||||
- 测试方法
|
||||
|
||||
**强制最终步骤**：
|
||||
将整个计划转换为编号的、按顺序排列的检查清单，每个原子操作作为单独的项目
|
||||
|
||||
**检查清单格式**：
|
||||
```
|
||||
实施检查清单：
|
||||
1. [具体操作1]
|
||||
2. [具体操作2]
|
||||
...
|
||||
n. [最终操作]
|
||||
```
|
||||
|
||||
**输出格式**：
|
||||
以[MODE: PLAN]开始，然后仅提供规范和实现细节。
|
||||
使用markdown语法格式化答案。
|
||||
|
||||
**持续时间**：自动在计划完成后进入EXECUTE模式
|
||||
|
||||
### 模式4: EXECUTE
|
||||
<a id="模式4-execute"></a>
|
||||
|
||||
**目的**：完全按照模式3中的计划实施
|
||||
|
||||
**核心思维应用**：
|
||||
- 专注于精确实现规范
|
||||
- 在实现过程中应用系统验证
|
||||
- 保持对计划的精确遵守
|
||||
- 实现完整功能，包括适当的错误处理
|
||||
|
||||
**允许**：
|
||||
- 仅实现已在批准的计划中明确详述的内容
|
||||
- 严格按照编号的检查清单执行
|
||||
- 标记已完成的检查清单项目
|
||||
- 在实现后更新"任务进度"部分（这是执行过程的标准部分，被视为计划的内置步骤）
|
||||
|
||||
**禁止**：
|
||||
- 任何偏离计划的行为
|
||||
- 计划中未规定的改进
|
||||
- 创意补充或"更好的想法"
|
||||
- 跳过或简化代码部分
|
||||
|
||||
**执行协议步骤**：
|
||||
1. 完全按计划实施更改
|
||||
2. 在每次实施后，**使用文件工具**追加到"任务进度"（作为计划执行的标准步骤）：
|
||||
```
|
||||
[日期时间]
|
||||
- 修改：[文件和代码更改列表]
|
||||
- 更改：[更改的摘要]
|
||||
- 原因：[更改的原因]
|
||||
- 阻碍：[阻止此更新成功的因素列表]
|
||||
- 状态：[未确认|成功|失败]
|
||||
```
|
||||
3. 要求用户确认："状态：成功/失败？"
|
||||
4. 如果失败：返回PLAN模式
|
||||
5. 如果成功且需要更多更改：继续下一项
|
||||
6. 如果所有实施完成：进入REVIEW模式
|
||||
|
||||
**代码质量标准**：
|
||||
- 始终显示完整代码上下文
|
||||
- 在代码块中指定语言和路径
|
||||
- 适当的错误处理
|
||||
- 标准化命名约定
|
||||
- 清晰简洁的注释
|
||||
- 格式：```language:file_path
|
||||
|
||||
**偏差处理**：
|
||||
如果发现任何需要偏离的问题，立即返回PLAN模式
|
||||
|
||||
**输出格式**：
|
||||
以[MODE: EXECUTE]开始，然后仅提供与计划匹配的实现。
|
||||
包括已完成的检查清单项目。
|
||||
|
||||
### 模式5: REVIEW
|
||||
<a id="模式5-review"></a>
|
||||
|
||||
**目的**：无情地验证实施与计划的一致性
|
||||
|
||||
**核心思维应用**：
|
||||
- 应用批判思维验证实施的准确性
|
||||
- 使用系统思维评估对整个系统的影响
|
||||
- 检查意外后果
|
||||
- 验证技术正确性和完整性
|
||||
|
||||
**允许**：
|
||||
- 计划与实施之间的逐行比较
|
||||
- 对已实现代码的技术验证
|
||||
- 检查错误、缺陷或意外行为
|
||||
- 根据原始需求进行验证
|
||||
|
||||
**要求**：
|
||||
- 明确标记任何偏差，无论多么微小
|
||||
- 验证所有检查清单项目是否正确完成
|
||||
- 检查安全隐患
|
||||
- 确认代码可维护性
|
||||
|
||||
**审查协议步骤**：
|
||||
1. 根据计划验证所有实施
|
||||
2. **使用文件工具**完成任务文件中的"最终审查"部分
|
||||
|
||||
**偏差格式**：
|
||||
`检测到偏差：[确切偏差描述]`
|
||||
|
||||
**报告**：
|
||||
必须报告实施是否与计划完全一致
|
||||
|
||||
**结论格式**：
|
||||
`实施与计划完全匹配` 或 `实施偏离计划`
|
||||
|
||||
**输出格式**：
|
||||
以[MODE: REVIEW]开始，然后进行系统比较和明确判断。
|
||||
使用markdown语法格式化。
|
||||
|
||||
## 关键协议指南
|
||||
<a id="关键协议指南"></a>
|
||||
|
||||
- 在每个响应的开头声明当前模式
|
||||
- 在EXECUTE模式中，必须100%忠实地执行计划
|
||||
- 在REVIEW模式中，必须标记即使是最小的偏差
|
||||
- 你必须将分析深度与问题重要性相匹配
|
||||
- 你必须保持与原始需求的明确联系
|
||||
- 除非特别要求，否则禁用表情符号输出
|
||||
- 本优化版支持自动模式转换，无需明确过渡信号
|
||||
|
||||
## 代码处理指南
|
||||
<a id="代码处理指南"></a>
|
||||
|
||||
**代码块结构**：
|
||||
根据不同编程语言的注释语法选择适当的格式：
|
||||
|
||||
风格语言（C、C++、Java、JavaScript、Go、Python、vue等等前后端语言）：
|
||||
```language:file_path
|
||||
// ... existing code ...
|
||||
{{ modifications }}
|
||||
// ... existing code ...
|
||||
```
|
||||
|
||||
如果语言类型不确定，使用通用格式：
|
||||
```language:file_path
|
||||
[... existing code ...]
|
||||
{{ modifications }}
|
||||
[... existing code ...]
|
||||
```
|
||||
|
||||
**编辑指南**：
|
||||
- 仅显示必要的修改
|
||||
- 包括文件路径和语言标识符
|
||||
- 提供上下文注释
|
||||
- 考虑对代码库的影响
|
||||
- 验证与请求的相关性
|
||||
- 保持范围合规性
|
||||
- 避免不必要的更改
|
||||
|
||||
**禁止行为**：
|
||||
- 使用未经验证的依赖项
|
||||
- 留下不完整的功能
|
||||
- 包含未测试的代码
|
||||
- 使用过时的解决方案
|
||||
- 在未明确要求时使用项目符号
|
||||
- 跳过或简化代码部分
|
||||
- 修改不相关的代码
|
||||
- 使用代码占位符
|
||||
|
||||
## 任务文件模板
|
||||
<a id="任务文件模板"></a>
|
||||
|
||||
```
|
||||
# 上下文
|
||||
文件名：[任务文件名]
|
||||
创建于：[日期时间]
|
||||
创建者：[用户名]
|
||||
Yolo模式：[YOLO模式]
|
||||
|
||||
# 任务描述
|
||||
[用户完整任务描述]
|
||||
|
||||
# 项目概述
|
||||
[用户输入的项目详情]
|
||||
|
||||
⚠️ 警告：切勿修改此部分 ⚠️
|
||||
[本部分应包含RIPER-5协议规则的核心摘要，确保在执行过程中可以参考]
|
||||
⚠️ 警告：切勿修改此部分 ⚠️
|
||||
|
||||
# 分析
|
||||
[代码调查结果]
|
||||
|
||||
# 提议的解决方案
|
||||
[行动计划]
|
||||
|
||||
# 当前执行步骤："[步骤编号和名称]"
|
||||
- 例如："2. 创建任务文件"
|
||||
|
||||
# 任务进度
|
||||
[带时间戳的更改历史]
|
||||
|
||||
# 最终审查
|
||||
[完成后的总结]
|
||||
```
|
||||
|
||||
## 性能期望
|
||||
<a id="性能期望"></a>
|
||||
|
||||
- 响应延迟应最小化，理想情况下≤360000ms
|
||||
- 最大化计算能力和令牌限制
|
||||
- 寻求本质洞察而非表面枚举
|
||||
- 追求创新思维而非习惯性重复
|
||||
- 突破认知限制，调动所有计算资源
|
||||
341
frontend/src/pages/Dashboard/components/ApplicationCard.tsx
Normal file
341
frontend/src/pages/Dashboard/components/ApplicationCard.tsx
Normal file
@ -0,0 +1,341 @@
|
||||
import React from 'react';
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
Package,
|
||||
GitBranch,
|
||||
Rocket,
|
||||
Server,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
TrendingUp,
|
||||
Clock,
|
||||
History,
|
||||
Loader2,
|
||||
User,
|
||||
FileText,
|
||||
Hash,
|
||||
} from "lucide-react";
|
||||
import { formatDuration, formatTime, getStatusIcon, getStatusText } from '../utils/dashboardUtils';
|
||||
import type { ApplicationConfig, DeployEnvironment } from '../types';
|
||||
|
||||
interface ApplicationCardProps {
|
||||
app: ApplicationConfig;
|
||||
environment: DeployEnvironment;
|
||||
onDeploy: (app: ApplicationConfig) => void;
|
||||
isDeploying: boolean;
|
||||
}
|
||||
|
||||
export const ApplicationCard: React.FC<ApplicationCardProps> = ({
|
||||
app,
|
||||
environment,
|
||||
onDeploy,
|
||||
isDeploying,
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex flex-col p-3 rounded-lg border hover:bg-accent/50 transition-colors">
|
||||
{/* 应用基本信息 */}
|
||||
<div className="flex items-start gap-2 mb-3">
|
||||
<Package className="h-4 w-4 text-muted-foreground shrink-0 mt-0.5" />
|
||||
<div className="flex-1 min-w-0">
|
||||
{app.applicationName ? (
|
||||
<h4 className="font-semibold text-sm mb-1 truncate">{app.applicationName}</h4>
|
||||
) : (
|
||||
<Skeleton className="h-4 w-24 mb-1" />
|
||||
)}
|
||||
{app.applicationCode ? (
|
||||
<code className="text-xs text-muted-foreground truncate block">
|
||||
{app.applicationCode}
|
||||
</code>
|
||||
) : (
|
||||
<Skeleton className="h-3 w-20" />
|
||||
)}
|
||||
{app.applicationDesc && (
|
||||
<p className="text-[10px] text-muted-foreground mt-1 line-clamp-2">
|
||||
{app.applicationDesc}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Git/工作流/系统信息 */}
|
||||
<div className="space-y-1.5 mb-3 text-xs text-muted-foreground">
|
||||
{/* 分支 */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<GitBranch className="h-3 w-3 shrink-0" />
|
||||
{app.branch ? (
|
||||
<code className="truncate font-mono">{app.branch}</code>
|
||||
) : (
|
||||
<Skeleton className="h-3 w-16" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 工作流 */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Rocket className="h-3 w-3 shrink-0" />
|
||||
{app.workflowDefinitionName ? (
|
||||
<span className="truncate">{app.workflowDefinitionName}</span>
|
||||
) : (
|
||||
<Skeleton className="h-3 w-20" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Jenkins */}
|
||||
{app.deploySystemName ? (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="flex items-center gap-1.5 cursor-default">
|
||||
<Server className="h-3 w-3 shrink-0" />
|
||||
<span className="truncate">{app.deploySystemName}</span>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
{app.deployJob && (
|
||||
<TooltipContent>
|
||||
<p>{app.deploySystemName} ({app.deployJob})</p>
|
||||
</TooltipContent>
|
||||
)}
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
) : (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Server className="h-3 w-3 shrink-0" />
|
||||
<Skeleton className="h-3 w-24" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 部署统计信息 */}
|
||||
<div className="mb-3 pt-2 border-t border-dashed">
|
||||
<div className="grid grid-cols-4 gap-1 mb-2 text-xs">
|
||||
{/* 总次数 */}
|
||||
<div className="text-center">
|
||||
{app.deployStatistics ? (
|
||||
<>
|
||||
<div className="flex items-center justify-center gap-0.5">
|
||||
<TrendingUp className="h-3 w-3 text-muted-foreground" />
|
||||
<span className="font-semibold">{app.deployStatistics.totalCount ?? 0}</span>
|
||||
</div>
|
||||
<div className="text-[10px] text-muted-foreground">总数</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Skeleton className="h-4 w-8 mx-auto mb-1" />
|
||||
<Skeleton className="h-3 w-12 mx-auto" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 成功次数 */}
|
||||
<div className="text-center">
|
||||
{app.deployStatistics ? (
|
||||
<>
|
||||
<div className="flex items-center justify-center gap-0.5">
|
||||
<CheckCircle2 className="h-3 w-3 text-green-600" />
|
||||
<span className="font-semibold text-green-600">{app.deployStatistics.successCount ?? 0}</span>
|
||||
</div>
|
||||
<div className="text-[10px] text-muted-foreground">成功</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Skeleton className="h-4 w-8 mx-auto mb-1" />
|
||||
<Skeleton className="h-3 w-12 mx-auto" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 失败次数 */}
|
||||
<div className="text-center">
|
||||
{app.deployStatistics ? (
|
||||
<>
|
||||
<div className="flex items-center justify-center gap-0.5">
|
||||
<XCircle className="h-3 w-3 text-red-600" />
|
||||
<span className="font-semibold text-red-600">{app.deployStatistics.failedCount ?? 0}</span>
|
||||
</div>
|
||||
<div className="text-[10px] text-muted-foreground">失败</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Skeleton className="h-4 w-8 mx-auto mb-1" />
|
||||
<Skeleton className="h-3 w-12 mx-auto" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 运行中次数 */}
|
||||
<div className="text-center">
|
||||
{app.deployStatistics ? (
|
||||
<>
|
||||
<div className="flex items-center justify-center gap-0.5">
|
||||
<Loader2 className="h-3 w-3 text-blue-600" />
|
||||
<span className="font-semibold text-blue-600">{app.deployStatistics.runningCount ?? 0}</span>
|
||||
</div>
|
||||
<div className="text-[10px] text-muted-foreground">运行中</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Skeleton className="h-4 w-8 mx-auto mb-1" />
|
||||
<Skeleton className="h-3 w-12 mx-auto" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 最近部署信息 */}
|
||||
{app.deployStatistics ? (
|
||||
<div className="flex items-center gap-1 text-[10px] text-muted-foreground flex-wrap">
|
||||
<Clock className="h-3 w-3 shrink-0" />
|
||||
{app.deployStatistics.lastDeployTime ? (
|
||||
<>
|
||||
<span>最近: {formatTime(app.deployStatistics.lastDeployTime)}</span>
|
||||
{app.deployStatistics.lastDeployBy ? (
|
||||
<span>by {app.deployStatistics.lastDeployBy}</span>
|
||||
) : (
|
||||
<Skeleton className="h-3 w-16" />
|
||||
)}
|
||||
{app.deployStatistics.latestStatus ? (() => {
|
||||
const { icon: StatusIcon, color } = getStatusIcon(app.deployStatistics.latestStatus);
|
||||
return (
|
||||
<span className={cn("flex items-center gap-0.5", color)}>
|
||||
<StatusIcon className={cn("h-3 w-3", app.deployStatistics.latestStatus === 'RUNNING' && "animate-spin")} />
|
||||
{getStatusText(app.deployStatistics.latestStatus)}
|
||||
</span>
|
||||
);
|
||||
})() : (
|
||||
<Skeleton className="h-3 w-12" />
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Skeleton className="h-3 w-32" />
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1 text-[10px]">
|
||||
<Clock className="h-3 w-3 shrink-0" />
|
||||
<Skeleton className="h-3 w-32" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 最近部署记录 */}
|
||||
<div className="mt-2 space-y-2">
|
||||
<div className="flex items-center gap-1 text-[10px] font-medium text-muted-foreground mb-1">
|
||||
<History className="h-3 w-3" />
|
||||
<span>最近记录</span>
|
||||
</div>
|
||||
{app.recentDeployRecords && app.recentDeployRecords.length > 0 ? (
|
||||
<>
|
||||
{/* 显示实际记录（最多2条） */}
|
||||
{app.recentDeployRecords.slice(0, 2).map((record) => {
|
||||
const { icon: StatusIcon, color } = getStatusIcon(record.status);
|
||||
return (
|
||||
<div key={record.id} className="p-1.5 rounded-md bg-muted/30 border border-muted/50 space-y-1">
|
||||
{/* 第一行：状态、编号、部署人 */}
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<div className="flex items-center gap-1">
|
||||
<StatusIcon className={cn("h-3.5 w-3.5 shrink-0", color, record.status === 'RUNNING' && "animate-spin")} />
|
||||
<span className={cn("text-[10px] font-semibold", color)}>{getStatusText(record.status)}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 px-1.5 py-0.5 rounded bg-background/50">
|
||||
<Hash className="h-2.5 w-2.5 text-muted-foreground" />
|
||||
<span className="text-[10px] text-muted-foreground font-mono">{record.id}</span>
|
||||
</div>
|
||||
{record.deployBy && (
|
||||
<div className="flex items-center gap-1">
|
||||
<User className="h-2.5 w-2.5 text-muted-foreground" />
|
||||
<span className="text-[10px] text-muted-foreground">{record.deployBy}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 第二行：时间信息（一行显示） */}
|
||||
{(record.startTime || record.endTime || record.duration) && (
|
||||
<div className="flex items-center gap-1.5 text-[10px] text-muted-foreground flex-nowrap overflow-hidden">
|
||||
<Clock className="h-2.5 w-2.5 shrink-0" />
|
||||
<div className="flex items-center gap-1 flex-nowrap min-w-0">
|
||||
{record.startTime && (
|
||||
<span className="whitespace-nowrap">{formatTime(record.startTime)}</span>
|
||||
)}
|
||||
{record.endTime && (
|
||||
<>
|
||||
<span className="px-0.5 shrink-0">→</span>
|
||||
<span className="whitespace-nowrap">{formatTime(record.endTime)}</span>
|
||||
</>
|
||||
)}
|
||||
{record.duration && (
|
||||
<>
|
||||
<span className="px-0.5 text-muted-foreground/50 shrink-0">•</span>
|
||||
<span className="font-medium whitespace-nowrap">{formatDuration(record.duration)}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 第三行：备注 */}
|
||||
{record.deployRemark && (
|
||||
<div className="flex items-center gap-1 text-[10px] text-muted-foreground pt-0.5 border-t border-muted/30">
|
||||
<FileText className="h-2.5 w-2.5 shrink-0" />
|
||||
<span className="truncate">{record.deployRemark}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{/* 如果记录少于2条，用骨架屏补充 */}
|
||||
{app.recentDeployRecords.length < 2 && (
|
||||
Array.from({ length: 2 - app.recentDeployRecords.length }).map((_, index) => (
|
||||
<div key={`skeleton-${index}`} className="p-1.5 rounded-md bg-muted/30 border border-muted/50 space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="h-3.5 w-16" />
|
||||
<Skeleton className="h-4 w-12" />
|
||||
<Skeleton className="h-3.5 w-12 ml-auto" />
|
||||
</div>
|
||||
<Skeleton className="h-3 w-32" />
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
/* 如果没有记录，显示2条骨架记录 */
|
||||
Array.from({ length: 2 }).map((_, index) => (
|
||||
<div key={`skeleton-${index}`} className="p-1.5 rounded-md bg-muted/30 border border-muted/50 space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="h-3.5 w-16" />
|
||||
<Skeleton className="h-4 w-12" />
|
||||
<Skeleton className="h-3.5 w-12 ml-auto" />
|
||||
</div>
|
||||
<Skeleton className="h-3 w-32" />
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 部署按钮 */}
|
||||
<Button
|
||||
onClick={() => onDeploy(app)}
|
||||
disabled={!environment.enabled || isDeploying || app.isDeploying}
|
||||
size="sm"
|
||||
className={cn(
|
||||
'w-full text-xs h-8',
|
||||
environment.requiresApproval && 'bg-amber-600 hover:bg-amber-700'
|
||||
)}
|
||||
>
|
||||
{(isDeploying || app.isDeploying) ? (
|
||||
<>
|
||||
<Loader2 className="h-3 w-3 mr-1 animate-spin" />
|
||||
部署中
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Rocket className="h-3 w-3 mr-1" />
|
||||
{environment.requiresApproval ? '申请部署' : '立即部署'}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,25 +1,17 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
Package,
|
||||
Shield,
|
||||
Loader2,
|
||||
Rocket,
|
||||
GitBranch,
|
||||
Users,
|
||||
Server,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
Clock,
|
||||
TrendingUp,
|
||||
History
|
||||
} from "lucide-react";
|
||||
import { useToast } from '@/components/ui/use-toast';
|
||||
import { getDeployEnvironments, startDeployment } from './service';
|
||||
import { ApplicationCard } from './components/ApplicationCard';
|
||||
import type { DeployTeam, ApplicationConfig } from './types';
|
||||
|
||||
const LoadingState = () => (
|
||||
@ -31,63 +23,6 @@ const LoadingState = () => (
|
||||
</div>
|
||||
);
|
||||
|
||||
// 格式化持续时间
|
||||
const formatDuration = (ms?: number) => {
|
||||
if (!ms) return '-';
|
||||
const seconds = Math.floor(ms / 1000);
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
if (minutes > 0) {
|
||||
return `${minutes}分${seconds % 60}秒`;
|
||||
}
|
||||
return `${seconds}秒`;
|
||||
};
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (timeStr?: string) => {
|
||||
if (!timeStr) return '-';
|
||||
try {
|
||||
const date = new Date(timeStr);
|
||||
return date.toLocaleString('zh-CN', {
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
} catch {
|
||||
return timeStr;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取状态图标和颜色
|
||||
const getStatusIcon = (status?: string) => {
|
||||
switch (status) {
|
||||
case 'SUCCESS':
|
||||
return { icon: CheckCircle2, color: 'text-green-600' };
|
||||
case 'FAILED':
|
||||
return { icon: XCircle, color: 'text-red-600' };
|
||||
case 'RUNNING':
|
||||
return { icon: Loader2, color: 'text-blue-600' };
|
||||
default:
|
||||
return { icon: Clock, color: 'text-gray-400' };
|
||||
}
|
||||
};
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = (status?: string) => {
|
||||
switch (status) {
|
||||
case 'SUCCESS':
|
||||
return '成功';
|
||||
case 'FAILED':
|
||||
return '失败';
|
||||
case 'RUNNING':
|
||||
return '运行中';
|
||||
case 'CANCELLED':
|
||||
return '已取消';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
};
|
||||
|
||||
const Dashboard: React.FC = () => {
|
||||
const { toast } = useToast();
|
||||
const [loading, setLoading] = useState(true);
|
||||
@ -95,18 +30,26 @@ const Dashboard: React.FC = () => {
|
||||
const [currentTeamId, setCurrentTeamId] = useState<number | null>(null);
|
||||
const [currentEnvId, setCurrentEnvId] = useState<number | null>(null);
|
||||
const [deploying, setDeploying] = useState<Set<number>>(new Set());
|
||||
const [isInitialLoad, setIsInitialLoad] = useState(true);
|
||||
const intervalRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
// 加载部署环境数据
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
try {
|
||||
const loadData = React.useCallback(async (showLoading = false) => {
|
||||
try {
|
||||
if (showLoading) {
|
||||
setLoading(true);
|
||||
const response = await getDeployEnvironments();
|
||||
}
|
||||
|
||||
if (response && response.teams) {
|
||||
setTeams(response.teams);
|
||||
const response = await getDeployEnvironments();
|
||||
|
||||
// 默认选中第一个团队和第一个环境
|
||||
if (response && response.teams) {
|
||||
const prevTeamId = currentTeamId;
|
||||
const prevEnvId = currentEnvId;
|
||||
|
||||
setTeams(response.teams);
|
||||
|
||||
if (isInitialLoad) {
|
||||
// 首次加载：默认选中第一个团队和第一个环境
|
||||
if (response.teams.length > 0) {
|
||||
setCurrentTeamId(response.teams[0].teamId);
|
||||
|
||||
@ -114,21 +57,128 @@ const Dashboard: React.FC = () => {
|
||||
setCurrentEnvId(response.teams[0].environments[0].environmentId);
|
||||
}
|
||||
}
|
||||
setIsInitialLoad(false);
|
||||
} else {
|
||||
// 后续刷新：保持当前选中的团队和环境
|
||||
// 如果之前选中的团队/环境仍然存在，保持选中
|
||||
if (prevTeamId !== null) {
|
||||
const teamExists = response.teams.some(t => t.teamId === prevTeamId);
|
||||
if (teamExists) {
|
||||
setCurrentTeamId(prevTeamId);
|
||||
|
||||
if (prevEnvId !== null) {
|
||||
const team = response.teams.find(t => t.teamId === prevTeamId);
|
||||
const envExists = team?.environments.some(e => e.environmentId === prevEnvId);
|
||||
if (envExists) {
|
||||
setCurrentEnvId(prevEnvId);
|
||||
} else if (team && team.environments.length > 0) {
|
||||
// 如果之前的环境不存在了，选择第一个环境
|
||||
setCurrentEnvId(team.environments[0].environmentId);
|
||||
}
|
||||
}
|
||||
} else if (response.teams.length > 0) {
|
||||
// 如果之前的团队不存在了，选择第一个团队
|
||||
setCurrentTeamId(response.teams[0].teamId);
|
||||
if (response.teams[0].environments.length > 0) {
|
||||
setCurrentEnvId(response.teams[0].environments[0].environmentId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 检查部署状态，如果应用不再是 RUNNING 状态，从 deploying 状态中移除
|
||||
setDeploying((prevDeploying) => {
|
||||
const newDeploying = new Set(prevDeploying);
|
||||
let hasChanges = false;
|
||||
|
||||
// 遍历所有团队、环境、应用，检查部署状态
|
||||
response.teams.forEach(team => {
|
||||
team.environments.forEach(env => {
|
||||
env.applications.forEach(app => {
|
||||
// 如果应用在 deploying 状态中，但最新状态不是 RUNNING，则移除
|
||||
if (newDeploying.has(app.teamApplicationId)) {
|
||||
const latestStatus = app.deployStatistics?.latestStatus;
|
||||
if (latestStatus && latestStatus !== 'RUNNING') {
|
||||
newDeploying.delete(app.teamApplicationId);
|
||||
hasChanges = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return hasChanges ? newDeploying : prevDeploying;
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载数据失败:', error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载数据失败:', error);
|
||||
// 只在首次加载失败时显示错误提示
|
||||
if (isInitialLoad) {
|
||||
toast({
|
||||
variant: 'destructive',
|
||||
title: '加载失败',
|
||||
description: '无法加载部署环境数据，请稍后重试',
|
||||
});
|
||||
} finally {
|
||||
}
|
||||
} finally {
|
||||
if (showLoading) {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
}, [currentTeamId, currentEnvId, isInitialLoad, toast]);
|
||||
|
||||
// 首次加载数据
|
||||
useEffect(() => {
|
||||
loadData(true);
|
||||
}, []);
|
||||
|
||||
// 定时刷新数据（每5秒）
|
||||
useEffect(() => {
|
||||
// 只在非首次加载后开始轮询
|
||||
if (isInitialLoad) return;
|
||||
|
||||
// 启动定时器的函数
|
||||
const startPolling = () => {
|
||||
// 清除旧的定时器
|
||||
if (intervalRef.current) {
|
||||
clearInterval(intervalRef.current);
|
||||
}
|
||||
// 立即刷新一次
|
||||
loadData(false);
|
||||
// 设置新的定时器
|
||||
intervalRef.current = setInterval(() => {
|
||||
loadData(false);
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
// 停止定时器的函数
|
||||
const stopPolling = () => {
|
||||
if (intervalRef.current) {
|
||||
clearInterval(intervalRef.current);
|
||||
intervalRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
loadData();
|
||||
}, [toast]);
|
||||
// 页面可见性检测：当页面隐藏时暂停轮询，显示时恢复
|
||||
const handleVisibilityChange = () => {
|
||||
if (document.hidden) {
|
||||
stopPolling();
|
||||
} else {
|
||||
startPolling();
|
||||
}
|
||||
};
|
||||
|
||||
// 启动轮询
|
||||
startPolling();
|
||||
|
||||
// 监听页面可见性变化
|
||||
document.addEventListener('visibilitychange', handleVisibilityChange);
|
||||
|
||||
return () => {
|
||||
stopPolling();
|
||||
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
||||
};
|
||||
}, [isInitialLoad, loadData]);
|
||||
|
||||
// 切换团队时，自动选中第一个环境
|
||||
const handleTeamChange = (teamId: string) => {
|
||||
@ -144,30 +194,37 @@ const Dashboard: React.FC = () => {
|
||||
};
|
||||
|
||||
// 处理部署
|
||||
const handleDeploy = async (app: ApplicationConfig, requiresApproval: boolean) => {
|
||||
try {
|
||||
setDeploying((prev) => new Set(prev).add(app.teamApplicationId));
|
||||
const handleDeploy = async (app: ApplicationConfig) => {
|
||||
if (!currentEnv) return;
|
||||
|
||||
// 立即显示部署中状态
|
||||
setDeploying((prev) => new Set(prev).add(app.teamApplicationId));
|
||||
|
||||
try {
|
||||
await startDeployment(app.teamApplicationId);
|
||||
|
||||
toast({
|
||||
title: requiresApproval ? '部署申请已提交' : '部署任务已创建',
|
||||
description: requiresApproval
|
||||
title: currentEnv.requiresApproval ? '部署申请已提交' : '部署任务已创建',
|
||||
description: currentEnv.requiresApproval
|
||||
? '您的部署申请已提交，等待审批人审核'
|
||||
: '部署任务已成功创建并开始执行',
|
||||
});
|
||||
|
||||
// 接口成功后，保持部署中状态，等待自动刷新更新实际状态
|
||||
// deploying 状态会在 loadData 中根据实际部署状态自动清除
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
variant: 'destructive',
|
||||
title: '操作失败',
|
||||
description: error.response?.data?.message || '部署失败，请稍后重试',
|
||||
});
|
||||
} finally {
|
||||
// 接口失败时，立即清除部署中状态
|
||||
setDeploying((prev) => {
|
||||
const newSet = new Set(prev);
|
||||
newSet.delete(app.teamApplicationId);
|
||||
return newSet;
|
||||
});
|
||||
|
||||
toast({
|
||||
variant: 'destructive',
|
||||
title: '操作失败',
|
||||
description: error.response?.data?.message || '部署失败，请稍后重试',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@ -307,238 +364,17 @@ const Dashboard: React.FC = () => {
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-6 gap-3">
|
||||
{currentApps.map((app) => {
|
||||
const isDeploying = deploying.has(app.teamApplicationId);
|
||||
|
||||
return (
|
||||
<div
|
||||
<div className="grid grid-cols-6 gap-3">
|
||||
{currentApps.map((app) => (
|
||||
<ApplicationCard
|
||||
key={app.teamApplicationId}
|
||||
className="flex flex-col p-3 rounded-lg border hover:bg-accent/50 transition-colors"
|
||||
>
|
||||
<div className="flex items-start gap-2 mb-3">
|
||||
<Package className="h-4 w-4 text-muted-foreground shrink-0 mt-0.5" />
|
||||
<div className="flex-1 min-w-0">
|
||||
{app.applicationName ? (
|
||||
<h4 className="font-semibold text-sm mb-1 truncate">{app.applicationName}</h4>
|
||||
) : (
|
||||
<Skeleton className="h-4 w-24 mb-1" />
|
||||
)}
|
||||
{app.applicationCode ? (
|
||||
<code className="text-xs text-muted-foreground truncate block">
|
||||
{app.applicationCode}
|
||||
</code>
|
||||
) : (
|
||||
<Skeleton className="h-3 w-20" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5 mb-3 text-xs text-muted-foreground">
|
||||
{/* 分支 */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<GitBranch className="h-3 w-3 shrink-0" />
|
||||
{app.branch ? (
|
||||
<code className="truncate font-mono">{app.branch}</code>
|
||||
) : (
|
||||
<Skeleton className="h-3 w-16" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 工作流 */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Rocket className="h-3 w-3 shrink-0" />
|
||||
{app.workflowDefinitionName ? (
|
||||
<span className="truncate">{app.workflowDefinitionName}</span>
|
||||
) : (
|
||||
<Skeleton className="h-3 w-20" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Jenkins */}
|
||||
{app.deploySystemName ? (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Server className="h-3 w-3 shrink-0" />
|
||||
<span className="truncate">{app.deploySystemName}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Server className="h-3 w-3 shrink-0" />
|
||||
<Skeleton className="h-3 w-24" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 部署统计信息 */}
|
||||
<div className="mb-3 pt-2 border-t border-dashed">
|
||||
<div className="grid grid-cols-3 gap-1.5 mb-2 text-xs">
|
||||
{/* 总次数 */}
|
||||
<div className="text-center">
|
||||
{app.deployStatistics ? (
|
||||
<>
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<TrendingUp className="h-3 w-3 text-muted-foreground" />
|
||||
<span className="font-semibold">{app.deployStatistics.totalCount ?? 0}</span>
|
||||
</div>
|
||||
<div className="text-[10px] text-muted-foreground">总次数</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Skeleton className="h-4 w-8 mx-auto mb-1" />
|
||||
<Skeleton className="h-3 w-12 mx-auto" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 成功次数 */}
|
||||
<div className="text-center">
|
||||
{app.deployStatistics ? (
|
||||
<>
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<CheckCircle2 className="h-3 w-3 text-green-600" />
|
||||
<span className="font-semibold text-green-600">{app.deployStatistics.successCount ?? 0}</span>
|
||||
</div>
|
||||
<div className="text-[10px] text-muted-foreground">成功</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Skeleton className="h-4 w-8 mx-auto mb-1" />
|
||||
<Skeleton className="h-3 w-12 mx-auto" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 失败次数 */}
|
||||
<div className="text-center">
|
||||
{app.deployStatistics ? (
|
||||
<>
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<XCircle className="h-3 w-3 text-red-600" />
|
||||
<span className="font-semibold text-red-600">{app.deployStatistics.failedCount ?? 0}</span>
|
||||
</div>
|
||||
<div className="text-[10px] text-muted-foreground">失败</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Skeleton className="h-4 w-8 mx-auto mb-1" />
|
||||
<Skeleton className="h-3 w-12 mx-auto" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 最近部署信息 */}
|
||||
{app.deployStatistics ? (
|
||||
<div className="flex items-center gap-1 text-[10px] text-muted-foreground flex-wrap">
|
||||
<Clock className="h-3 w-3 shrink-0" />
|
||||
{app.deployStatistics.lastDeployTime ? (
|
||||
<>
|
||||
<span>最近: {formatTime(app.deployStatistics.lastDeployTime)}</span>
|
||||
{app.deployStatistics.lastDeployBy ? (
|
||||
<span>by {app.deployStatistics.lastDeployBy}</span>
|
||||
) : (
|
||||
<Skeleton className="h-3 w-16" />
|
||||
)}
|
||||
{app.deployStatistics.latestStatus ? (() => {
|
||||
const { icon: StatusIcon, color } = getStatusIcon(app.deployStatistics.latestStatus);
|
||||
return (
|
||||
<span className={cn("flex items-center gap-0.5", color)}>
|
||||
<StatusIcon className={cn("h-3 w-3", app.deployStatistics.latestStatus === 'RUNNING' && "animate-spin")} />
|
||||
{getStatusText(app.deployStatistics.latestStatus)}
|
||||
</span>
|
||||
);
|
||||
})() : (
|
||||
<Skeleton className="h-3 w-12" />
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Skeleton className="h-3 w-32" />
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1 text-[10px]">
|
||||
<Clock className="h-3 w-3 shrink-0" />
|
||||
<Skeleton className="h-3 w-32" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 最近部署记录 */}
|
||||
{app.recentDeployRecords && app.recentDeployRecords.length > 0 ? (
|
||||
<div className="mt-2 space-y-1">
|
||||
<div className="flex items-center gap-1 text-[10px] font-medium text-muted-foreground">
|
||||
<History className="h-3 w-3" />
|
||||
<span>最近记录</span>
|
||||
</div>
|
||||
{app.recentDeployRecords.slice(0, 2).map((record) => {
|
||||
const { icon: StatusIcon, color } = getStatusIcon(record.status);
|
||||
return (
|
||||
<div key={record.id} className="flex items-center justify-between text-[10px]">
|
||||
<div className="flex items-center gap-1 flex-1 min-w-0">
|
||||
<StatusIcon className={cn("h-3 w-3 shrink-0", color, record.status === 'RUNNING' && "animate-spin")} />
|
||||
{record.startTime ? (
|
||||
<>
|
||||
<span className="truncate">{formatTime(record.startTime)}</span>
|
||||
{record.deployRemark && (
|
||||
<span className="text-muted-foreground truncate">- {record.deployRemark}</span>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Skeleton className="h-3 w-20" />
|
||||
)}
|
||||
</div>
|
||||
{record.duration ? (
|
||||
<span className="text-muted-foreground shrink-0 ml-1">
|
||||
{formatDuration(record.duration)}
|
||||
</span>
|
||||
) : (
|
||||
<Skeleton className="h-3 w-12 shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-2 space-y-1">
|
||||
<div className="flex items-center gap-1 text-[10px] font-medium text-muted-foreground">
|
||||
<History className="h-3 w-3" />
|
||||
<span>最近记录</span>
|
||||
</div>
|
||||
{/* 显示2条骨架记录 */}
|
||||
{[1, 2].map((i) => (
|
||||
<div key={i} className="flex items-center justify-between text-[10px]">
|
||||
<Skeleton className="h-3 w-24" />
|
||||
<Skeleton className="h-3 w-12 shrink-0" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={() => handleDeploy(app, currentEnv?.requiresApproval || false)}
|
||||
disabled={!currentEnv?.enabled || isDeploying || app.isDeploying}
|
||||
size="sm"
|
||||
className={cn(
|
||||
'w-full text-xs h-8',
|
||||
currentEnv?.requiresApproval && 'bg-amber-600 hover:bg-amber-700'
|
||||
)}
|
||||
>
|
||||
{(isDeploying || app.isDeploying) ? (
|
||||
<>
|
||||
<Loader2 className="h-3 w-3 mr-1 animate-spin" />
|
||||
部署中
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Rocket className="h-3 w-3 mr-1" />
|
||||
{currentEnv?.requiresApproval ? '申请部署' : '立即部署'}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
app={app}
|
||||
environment={currentEnv!}
|
||||
onDeploy={handleDeploy}
|
||||
isDeploying={deploying.has(app.teamApplicationId)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@ -4,6 +4,11 @@ export interface Approver {
|
||||
realName: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 部署状态类型
|
||||
*/
|
||||
export type DeployStatus = 'SUCCESS' | 'FAILED' | 'RUNNING' | 'CANCELLED' | 'PARTIAL_SUCCESS';
|
||||
|
||||
export interface DeployStatistics {
|
||||
totalCount: number;
|
||||
successCount: number;
|
||||
@ -11,12 +16,12 @@ export interface DeployStatistics {
|
||||
runningCount: number;
|
||||
lastDeployTime?: string;
|
||||
lastDeployBy?: string;
|
||||
latestStatus?: 'SUCCESS' | 'FAILED' | 'RUNNING' | 'CANCELLED';
|
||||
latestStatus?: DeployStatus;
|
||||
}
|
||||
|
||||
export interface DeployRecord {
|
||||
id: number;
|
||||
status: 'SUCCESS' | 'FAILED' | 'RUNNING' | 'CANCELLED';
|
||||
status: DeployStatus;
|
||||
deployBy: string;
|
||||
startTime: string;
|
||||
endTime?: string;
|
||||
|
||||
103
frontend/src/pages/Dashboard/utils/dashboardUtils.ts
Normal file
103
frontend/src/pages/Dashboard/utils/dashboardUtils.ts
Normal file
@ -0,0 +1,103 @@
|
||||
import {
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
Loader2,
|
||||
Clock,
|
||||
AlertCircle,
|
||||
type LucideIcon
|
||||
} from "lucide-react";
|
||||
|
||||
/**
|
||||
* 格式化持续时间（毫秒）
|
||||
* @param ms 毫秒数
|
||||
* @returns 格式化后的时间字符串，如 "2分30秒" 或 "30秒"
|
||||
*/
|
||||
export const formatDuration = (ms?: number): string => {
|
||||
if (!ms) return '-';
|
||||
const seconds = Math.floor(ms / 1000);
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
if (minutes > 0) {
|
||||
return `${minutes}分${seconds % 60}秒`;
|
||||
}
|
||||
return `${seconds}秒`;
|
||||
};
|
||||
|
||||
/**
|
||||
* 格式化时间字符串
|
||||
* 支持多种时间格式：
|
||||
* - ISO格式: "2025-11-02T23:18:51"
|
||||
* - 数据库格式: "2025-11-02 23:18:51"
|
||||
* - 其他标准格式
|
||||
* @param timeStr 时间字符串
|
||||
* @returns 格式化后的时间字符串，如 "12/19 14:30"
|
||||
*/
|
||||
export const formatTime = (timeStr?: string): string => {
|
||||
if (!timeStr) return '-';
|
||||
try {
|
||||
// 处理数据库格式的时间字符串（空格分隔）："2025-11-02 23:18:51"
|
||||
const normalizedTimeStr = timeStr.includes(' ') && !timeStr.includes('T')
|
||||
? timeStr.replace(' ', 'T')
|
||||
: timeStr;
|
||||
|
||||
const date = new Date(normalizedTimeStr);
|
||||
|
||||
// 验证日期是否有效
|
||||
if (isNaN(date.getTime())) {
|
||||
return timeStr;
|
||||
}
|
||||
|
||||
return date.toLocaleString('zh-CN', {
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
} catch {
|
||||
return timeStr;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取部署状态的图标和颜色
|
||||
* @param status 部署状态
|
||||
* @returns 包含图标组件和颜色类的对象
|
||||
*/
|
||||
export const getStatusIcon = (status?: string): { icon: LucideIcon; color: string } => {
|
||||
switch (status) {
|
||||
case 'SUCCESS':
|
||||
return { icon: CheckCircle2, color: 'text-green-600' };
|
||||
case 'PARTIAL_SUCCESS':
|
||||
return { icon: AlertCircle, color: 'text-amber-600' };
|
||||
case 'FAILED':
|
||||
return { icon: XCircle, color: 'text-red-600' };
|
||||
case 'RUNNING':
|
||||
return { icon: Loader2, color: 'text-blue-600' };
|
||||
case 'CANCELLED':
|
||||
return { icon: Clock, color: 'text-gray-400' };
|
||||
default:
|
||||
return { icon: Clock, color: 'text-gray-400' };
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取部署状态的中文文本
|
||||
* @param status 部署状态
|
||||
* @returns 状态的中文描述
|
||||
*/
|
||||
export const getStatusText = (status?: string): string => {
|
||||
switch (status) {
|
||||
case 'SUCCESS':
|
||||
return '成功';
|
||||
case 'PARTIAL_SUCCESS':
|
||||
return '部分成功';
|
||||
case 'FAILED':
|
||||
return '失败';
|
||||
case 'RUNNING':
|
||||
return '运行中';
|
||||
case 'CANCELLED':
|
||||
return '已取消';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user