@devops-flow/devops-flow-pipeline-detail 0.0.37

package/es/components/common/teambition/flow-job-btn/state-info-with-redline/index.js

@@ -0,0 +1,621 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { Button } from '@teamix/ui';
+import { Title } from '@alife/devops-ui';
+import { BaiscIconFont } from "../../icon-font";
+import intl from "../../../../../locale";
+import "./index.scss";
+import { replaceHost } from "../replaceHost";
+var rateClass = function rateClass(rate) {
+  if (parseInt(rate, 0) > 99) return 'success';
+  if (parseInt(rate, 0) > 60) return 'warning';
+  return 'danger';
+};
+var UnitTestReportSummary = function UnitTestReportSummary(_ref) {
+  var statistic = _ref.statistic,
+    link = _ref.link;
+  return [{
+    value: statistic.Passed.value + " / " + statistic.Total.value,
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.TestCases',
+      defaultMessage: '测试用例'
+    }),
+    clazz: 'success'
+  }, {
+    value: statistic.Failed.value,
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.Failed',
+      defaultMessage: '失败'
+    }),
+    clazz: 'danger'
+  }, {
+    value: statistic.Skipped.value,
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.Skip',
+      defaultMessage: '跳过'
+    }),
+    clazz: 'muted'
+  }, {
+    value: statistic.PassedRate.value + "%",
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.PassRate',
+      defaultMessage: '通过率'
+    }),
+    clazz: rateClass(statistic.PassedRate.value)
+  }].map(function (data, i) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "stat-info-item unit-test-" + i,
+      key: data.value + "-" + data.label + "-" + data.clazz
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "stat-info-item--value"
+    }, link ? /*#__PURE__*/React.createElement(Button, link, /*#__PURE__*/React.createElement("span", {
+      className: data.clazz
+    }, data.value)) : /*#__PURE__*/React.createElement("span", {
+      className: data.clazz
+    }, data.value)), /*#__PURE__*/React.createElement("div", {
+      className: "stat-info-item--desc"
+    }, data.label));
+  });
+};
+var UnitTestAndCoverageReportSummary = function UnitTestAndCoverageReportSummary(_ref2) {
+  var statistic = _ref2.statistic,
+    link = _ref2.link;
+  return [{
+    value: statistic.LineCoverageRate.value + "%",
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.RowCoverage',
+      defaultMessage: '行覆盖率'
+    }),
+    clazz: 'success'
+  }, {
+    value: statistic.Passed.value + " / " + statistic.Total.value,
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.TestCases',
+      defaultMessage: '测试用例'
+    }),
+    clazz: 'success'
+  }, {
+    value: statistic.Failed.value,
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.Failed',
+      defaultMessage: '失败'
+    }),
+    clazz: 'danger'
+  }, {
+    value: statistic.Skipped.value,
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.Skip',
+      defaultMessage: '跳过'
+    }),
+    clazz: 'muted'
+  }, {
+    value: statistic.PassedRate.value + "%",
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.PassRate',
+      defaultMessage: '通过率'
+    }),
+    clazz: rateClass(statistic.PassedRate.value)
+  }].map(function (data) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "stat-info-item",
+      key: data.value + "-" + data.label + "-" + data.clazz
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "stat-info-item--value"
+    }, link ? /*#__PURE__*/React.createElement(Button, link, /*#__PURE__*/React.createElement("span", {
+      className: data.clazz
+    }, data.value)) : /*#__PURE__*/React.createElement("span", {
+      className: data.clazz
+    }, data.value)), /*#__PURE__*/React.createElement("div", {
+      className: "stat-info-item--desc"
+    }, data.label));
+  });
+};
+var CodeScanSummary = function CodeScanSummary(_ref3) {
+  var statistic = _ref3.statistic,
+    link = _ref3.link;
+  return [{
+    value: statistic.Total.value,
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.TotalNumber',
+      defaultMessage: '总数'
+    }),
+    clazz: 'danger'
+  }, {
+    value: statistic.Blocker.value,
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.Blocking',
+      defaultMessage: '阻塞'
+    }),
+    clazz: 'danger'
+  }, {
+    value: statistic.Critical.value,
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.Serious',
+      defaultMessage: '严重'
+    }),
+    clazz: 'warning'
+  }, {
+    value: statistic.Major.value,
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.General',
+      defaultMessage: '一般'
+    }),
+    clazz: 'muted'
+  }].map(function (data, i) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "stat-info-item code-scan-" + i,
+      key: data.value + "-" + data.label + "-" + data.clazz
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "stat-info-item--value"
+    }, link ? /*#__PURE__*/React.createElement(Button, link, /*#__PURE__*/React.createElement("span", {
+      className: data.clazz
+    }, data.value)) : /*#__PURE__*/React.createElement("span", {
+      className: data.clazz
+    }, data.value)), /*#__PURE__*/React.createElement("div", {
+      className: "stat-info-item--desc"
+    }, data.label));
+  });
+};
+var FindBugSummary = function FindBugSummary(_ref4) {
+  var statistic = _ref4.statistic,
+    link = _ref4.link;
+  return [{
+    value: statistic.Total.value,
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.TotalNumber',
+      defaultMessage: '总数'
+    }),
+    clazz: 'danger'
+  }, {
+    value: statistic.High.value,
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.High',
+      defaultMessage: '高优先级'
+    }),
+    clazz: 'danger'
+  }, {
+    value: statistic.Medium.value,
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.Medium',
+      defaultMessage: '中优先级'
+    }),
+    clazz: 'danger'
+  }].map(function (data) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "stat-info-item",
+      key: data.value + "-" + data.label + "-" + data.clazz
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "stat-info-item--value"
+    }, link ? /*#__PURE__*/React.createElement(Button, link, /*#__PURE__*/React.createElement("span", {
+      className: data.clazz
+    }, data.value)) : /*#__PURE__*/React.createElement("span", {
+      className: data.clazz
+    }, data.value)), /*#__PURE__*/React.createElement("div", {
+      className: "stat-info-item--desc"
+    }, data.label));
+  });
+};
+var MetricSummary = function MetricSummary(_ref5) {
+  var statistic = _ref5.statistic,
+    link = _ref5.link;
+  return [{
+    value: statistic.Violation.value,
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.TotalNumber',
+      defaultMessage: '总数'
+    }),
+    clazz: 'danger'
+  }, {
+    value: statistic.Error.value,
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.Error',
+      defaultMessage: '错误'
+    }),
+    clazz: 'danger'
+  }, {
+    value: statistic.Warning.value,
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.Warning',
+      defaultMessage: '警告'
+    }),
+    clazz: 'warning'
+  }, {
+    value: statistic.Information.value,
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.Cue',
+      defaultMessage: '提示'
+    }),
+    clazz: 'muted'
+  }].map(function (data) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "stat-info-item",
+      key: data.value + "-" + data.label + "-" + data.clazz
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "stat-info-item--value"
+    }, link ? /*#__PURE__*/React.createElement(Button, link, /*#__PURE__*/React.createElement("span", {
+      className: data.clazz
+    }, data.value)) : /*#__PURE__*/React.createElement("span", {
+      className: data.clazz
+    }, data.value)), /*#__PURE__*/React.createElement("div", {
+      className: "stat-info-item--desc"
+    }, data.label));
+  });
+};
+var calClass = function calClass(name) {
+  switch (name) {
+    case 'Error':
+      return 'danger';
+    case 'Warning':
+      return 'warning';
+    default:
+      return 'muted';
+  }
+};
+var getLabel = function getLabel(key) {
+  return {
+    passedrate: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.TestPassRate',
+      defaultMessage: '测试通过率'
+    }),
+    successrate: intl.get({
+      id: 'rdc-tb-cd-assets.flow-engine.fields.readline.Testsuccessrate',
+      defaultMessage: '执行成功率'
+    }),
+    total: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.TotalNumberOfQuestions',
+      defaultMessage: 'Total 问题数'
+    }),
+    blocker: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.BlockerIssues',
+      defaultMessage: 'Blocker 问题数'
+    }),
+    high: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.HighIssues',
+      defaultMessage: 'High 问题数'
+    }),
+    medium: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.MediumIssues',
+      defaultMessage: 'Medium 问题数'
+    }),
+    critical: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.CriticalIssues',
+      defaultMessage: 'Critical 问题数'
+    }),
+    major: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.MajorIssues',
+      defaultMessage: 'Major 问题数'
+    }),
+    violation: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.NumberOfViolations',
+      defaultMessage: 'Violation 问题数'
+    }),
+    information: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.NumberOfInformationQuestions',
+      defaultMessage: 'Information 问题数'
+    }),
+    warning: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.NumberOfWarningIssues',
+      defaultMessage: 'Warning 问题数'
+    }),
+    error: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.NumberOfErrors',
+      defaultMessage: 'Error 问题数'
+    }),
+    linecoveragerate: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.RowCoverage',
+      defaultMessage: '行覆盖率'
+    }),
+    branchcoveragerate: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.BranchCoverage',
+      defaultMessage: '分支覆盖率'
+    }),
+    methodcoveragerate: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.MethodCoverage',
+      defaultMessage: '方法覆盖率'
+    }),
+    classcoveragerate: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.ClassCoverage',
+      defaultMessage: '类覆盖率'
+    }),
+    instructioncoveragerate: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.InstructionCoverage',
+      defaultMessage: '指令覆盖率'
+    }),
+    success: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.success',
+      defaultMessage: '成功数'
+    }),
+    fail: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.fail',
+      defaultMessage: '失败数'
+    })
+  }[key.toLowerCase()] || key;
+};
+var CoverageSummary = function CoverageSummary(_ref6) {
+  var statistic = _ref6.statistic,
+    link = _ref6.link;
+  return ['LineCoverageRate', 'BranchCoverageRate', 'MethodCoverageRate', 'ClassCoverageRate', 'InstructionCoverageRate'].filter(function (k) {
+    return statistic[k];
+  }).map(function (k, i) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "stat-info-item coverage-summary-redline-" + i,
+      key: k
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "stat-info-item--value"
+    }, link ? /*#__PURE__*/React.createElement(Button, link, /*#__PURE__*/React.createElement("span", {
+      className: rateClass(statistic[k].value)
+    }, statistic[k].value, "%")) : /*#__PURE__*/React.createElement("span", {
+      className: rateClass(statistic[k].value)
+    }, statistic[k].value, "%")), /*#__PURE__*/React.createElement("div", {
+      className: "stat-info-item--desc"
+    }, getLabel(k)));
+  });
+};
+var MAX_SIZE_OF_FIELDS = 4;
+var CommonSummary = function CommonSummary(_ref7) {
+  var statistic = _ref7.statistic,
+    link = _ref7.link;
+  if (Object.keys(statistic).length === 0) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "text"
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.NoValidReportDataIs',
+      defaultMessage: '未产生有效报告数据'
+    }));
+  }
+  return Object.keys(statistic).filter(function (k) {
+    return k !== '_REPORT';
+  }).splice(0, MAX_SIZE_OF_FIELDS).map(function (k) {
+    return statistic[k];
+  }).map(function (stat) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "stat-info-item",
+      key: stat.key
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "stat-info-item--value"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "stat-info-item--value"
+    }, link ? /*#__PURE__*/React.createElement(Button, link, /*#__PURE__*/React.createElement("span", {
+      className: calClass(stat.style)
+    }, stat.value)) : /*#__PURE__*/React.createElement("span", {
+      className: calClass(stat.style)
+    }, stat.value))), /*#__PURE__*/React.createElement("div", {
+      className: "stat-info-item--desc"
+    }, stat.name));
+  });
+};
+var getNOp = function getNOp(op) {
+  return {
+    ge: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.Less',
+      defaultMessage: '小于'
+    }),
+    eq: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.Cannot',
+      defaultMessage: '不能于'
+    }),
+    le: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.Greater',
+      defaultMessage: '大于'
+    })
+  }[op.toLowerCase()] || op;
+};
+var RedlineSummary = function RedlineSummary(_ref8) {
+  var redlines = _ref8.redlines;
+  return redlines.map(function (stat) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "stat-info-item",
+      key: stat.key
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "stat-info-item--value"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "danger"
+    }, getLabel(stat.key), getNOp(stat.type), stat.threshold, stat.key.match(/rate/i) && '%')), /*#__PURE__*/React.createElement("div", {
+      className: "stat-info-item--desc"
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.TheRedLineFailed',
+      defaultMessage: '红线未通过'
+    })));
+  });
+};
+
+/**
+ * 按钮实现模板
+ */
+var StateInfoButton = function StateInfoButton(props) {
+  var data = props.data,
+    id = props.id,
+    name = props.name,
+    hasMore = props.hasMore;
+  var _JSON$parse = JSON.parse(data),
+    statistic = _JSON$parse.statInfoMap;
+  if (!statistic._REPORT && !statistic._COVERAGE_REPORT) {
+    return null;
+  }
+  var link = {
+    component: 'a',
+    href: replaceHost(statistic._REPORT.url),
+    target: '_blank',
+    text: true
+  };
+  var prefix = hasMore ? name + " - " : '';
+  var CommonButton = function CommonButton(_ref9) {
+    var text = _ref9.text;
+    return /*#__PURE__*/React.createElement(Button, _extends({
+      className: "card-operation-btn"
+    }, link, {
+      text: true,
+      key: id
+    }), /*#__PURE__*/React.createElement(BaiscIconFont, {
+      type: "file-2-line"
+    }), /*#__PURE__*/React.createElement(Title, {
+      trigger: prefix + text,
+      align: "t"
+    }, prefix + text));
+  };
+
+  // 单元测试和测试覆盖率
+  if (statistic.Total && statistic.PassedRate && statistic.LineCoverageRate) {
+    var coverageLink = {
+      component: 'a',
+      href: replaceHost(statistic._COVERAGE_REPORT.url),
+      target: '_blank'
+    };
+    var text = [intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.TestReport',
+      defaultMessage: '测试报告'
+    }), intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.CoverageReport',
+      defaultMessage: '覆盖率报告'
+    })];
+    return [/*#__PURE__*/React.createElement(CommonButton, _extends({
+      text: text[0]
+    }, coverageLink)), /*#__PURE__*/React.createElement(Button, _extends({}, coverageLink, {
+      text: true,
+      key: id
+    }), /*#__PURE__*/React.createElement(BaiscIconFont, {
+      type: "file-2-line"
+    }), /*#__PURE__*/React.createElement(Title, {
+      trigger: text[1],
+      align: "t"
+    }, text[1]))];
+  }
+
+  // 单元测试
+  if (statistic.Total && statistic.PassedRate) {
+    var _text = intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.TestReport',
+      defaultMessage: '测试报告'
+    });
+    return /*#__PURE__*/React.createElement(CommonButton, {
+      text: _text
+    });
+  }
+
+  // 代码扫描报告
+  if (statistic.Blocker && statistic.Critical) {
+    var _text2 = intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.ScanReport',
+      defaultMessage: '扫描报告'
+    });
+    return /*#__PURE__*/React.createElement(CommonButton, {
+      text: _text2
+    });
+  }
+
+  // 代码扫描报告
+  if (statistic.LineCoverageRate) {
+    var _text3 = intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.CoverageReport',
+      defaultMessage: '覆盖率报告'
+    });
+    return /*#__PURE__*/React.createElement(CommonButton, {
+      text: _text3
+    });
+  }
+  return /*#__PURE__*/React.createElement(CommonButton, {
+    text: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.Report',
+      defaultMessage: '报告'
+    })
+  });
+};
+var Summary = function Summary(props) {
+  var data = props.data,
+    id = props.id,
+    name = props.name,
+    hasMore = props.hasMore;
+  var _JSON$parse2 = JSON.parse(data),
+    statistic = _JSON$parse2.statInfoMap,
+    redlineResult = _JSON$parse2.redlineResult;
+  var redlines = redlineResult.filter(function (r) {
+    return !r.checkResult;
+  });
+  var btns = [];
+  var passed = redlines.length === 0;
+  var link = null;
+  if (statistic._REPORT) {
+    link = {
+      component: 'a',
+      href: replaceHost(statistic._REPORT.url),
+      target: '_blank',
+      text: true
+    };
+  }
+  // 单元测试
+  if (statistic.Total && statistic.PassedRate && statistic.LineCoverageRate) {
+    btns.push(/*#__PURE__*/React.createElement(UnitTestAndCoverageReportSummary, {
+      key: id,
+      statistic: statistic,
+      id: id,
+      link: link
+    }));
+  } else if (statistic.Total && statistic.PassedRate) {
+    btns.push(/*#__PURE__*/React.createElement(UnitTestReportSummary, {
+      key: id,
+      statistic: statistic,
+      id: id,
+      link: link
+    }));
+  } else if (statistic.Blocker && statistic.Critical) {
+    btns.push(/*#__PURE__*/React.createElement(CodeScanSummary, {
+      key: id,
+      statistic: statistic,
+      id: id,
+      link: link
+    }));
+  } else if (statistic.High && statistic.Medium) {
+    btns.push(/*#__PURE__*/React.createElement(FindBugSummary, {
+      key: id,
+      statistic: statistic,
+      id: id,
+      link: link
+    }));
+  } else if (statistic.LineCoverageRate) {
+    btns.push(/*#__PURE__*/React.createElement(CoverageSummary, {
+      key: id,
+      statistic: statistic,
+      id: id,
+      link: link
+    }));
+  } else if (statistic.Violation) {
+    btns.push(/*#__PURE__*/React.createElement(MetricSummary, {
+      key: id,
+      statistic: statistic,
+      id: id,
+      link: link
+    }));
+  } else {
+    btns.push(/*#__PURE__*/React.createElement(CommonSummary, {
+      key: id,
+      statistic: statistic,
+      id: id,
+      link: link
+    }));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "stat-info " + (hasMore ? 'has-more' : '')
+  }, hasMore && /*#__PURE__*/React.createElement("div", {
+    className: "stat-info-item name"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "stat-info-item--value"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "info"
+  }, name)), /*#__PURE__*/React.createElement("div", {
+    className: "stat-info-item--desc"
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.flow-job-btn.state-info-with-redline.Statistics',
+    defaultMessage: '统计数据'
+  }))), !passed && /*#__PURE__*/React.createElement(RedlineSummary, {
+    redlines: redlines
+  }), btns);
+};
+
+// 按钮样式：运行卡片底部按钮实现
+StateInfoButton.Button = StateInfoButton;
+// 视图样式：按钮详情实现
+// StateInfoButton.View = Summary;
+
+// 卡片样式： 运行卡片中显示缩略信息按钮实现, 如果改按钮不支持当前显示模式返回null
+StateInfoButton.Card = Summary;
+export default StateInfoButton;

package/es/components/common/teambition/flow-job-btn/state-info-with-redline/index.scss

@@ -0,0 +1,61 @@
+.stat-info {
+  display: flex;
+  min-width: 100%;
+  .stat-info-item {
+    flex: 1;
+    height: 44px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    // border-right: 1px solid var(--color-brand3-2, #e9edf0);
+    &:last-child {
+      border-right-color: transparent;
+    }
+    &::after {
+      content: '';
+      border-right: 1px solid var(--color-brand3-2, #e9edf0);
+      position: absolute;
+      right: 0;
+      top: 8px;
+      height: 28px;
+    }
+    &:last-child::after {
+      content: '';
+      border-right-width: 0;
+    }
+    &--value {
+      min-width: 67px;
+      text-align: center;
+      line-height: 24px;
+      color: var(--color-text1-4, #292929);
+      font-family: DIN;
+      font-weight: 500;
+      padding: 0 12px;
+      .next-btn-text {
+        font-size: 16px;
+      }
+      .success {
+        color: #15ad31;
+      }
+      .danger {
+        color: #e62412;
+      }
+      .warning {
+        color: #fa8c15;
+      }
+      .muted {
+        color: var(--color-text1-7, #8b8b8b);
+      }
+      .info {
+        font-weight: 400;
+      }
+    }
+    &--desc {
+      text-align: center;
+      line-height: 20px;
+      font-size: 12px;
+      padding: 0 12px;
+      color: var(--color-text1-7, #8b8b8b);
+    }
+  }
+}

package/es/components/common/teambition/flow-job-btn/state-info-with-redline-new/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import './index.scss';
+/**
+ * 按钮实现模板
+ */
+declare const StateInfoButton: {
+    (props: any): JSX.Element | JSX.Element[];
+    Button: any;
+    Card(args: any): {
+        statInfoComponent: JSX.Element;
+        redlinesComponent: JSX.Element;
+    };
+};
+export default StateInfoButton;