react-terminal-viewer-cicd 3.0.0-beta.27 → 3.0.0-beta.29

package/dist/esm/Addon/WorkerLog/LogWorker.js

@@ -1,7 +1,7 @@
 function LogWorker() {
   var workerPath = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '/worker';
   var worker = null;
-  var version = "3.0.0-beta.27" || '0.0.0';
+  var version = "3.0.0-beta.29" || '0.0.0';
   var path = workerPath.includes('http') ? "".concat(workerPath, "/log.worker.js") : "".concat(window.location.origin).concat(workerPath, "/log.worker.js");
   var blob = new Blob(["importScripts(\"".concat(path, "?v=").concat(version, "\")")], {
     type: 'application/javascript'

package/dist/esm/TerminalViewer/index.d.ts

@@ -199,5 +199,5 @@ export interface TerminalViewerProps {
      */
     disableStickyHeader?: boolean;
 }
-declare const TerminalViewer: React.ForwardRefExoticComponent<Omit<TerminalViewerProps, "ref"> & React.RefAttributes<TerminalRef<Terminal | VirtualDomTerminal> | undefined>>;
+declare const TerminalViewer: React.ForwardRefExoticComponent<Omit<TerminalViewerProps, "ref"> & React.RefAttributes<TerminalRef<VirtualDomTerminal | Terminal> | undefined>>;
 export default TerminalViewer;

package/dist/esm/TerminalViewerBody/index.d.ts

@@ -83,5 +83,5 @@ export interface TerminalViewerBodyProps {
      */
     onLoading?: (loading: boolean) => void;
 }
-declare const TerminalViewerBody: React.ForwardRefExoticComponent<TerminalViewerBodyProps & React.RefAttributes<TerminalRef<Terminal | import("../types").VirtualDomTerminal> | undefined>>;
+declare const TerminalViewerBody: React.ForwardRefExoticComponent<TerminalViewerBodyProps & React.RefAttributes<TerminalRef<import("../types").VirtualDomTerminal | Terminal> | undefined>>;
 export default TerminalViewerBody;

package/dist/esm/TerminalViewerHeader/index.d.ts

@@ -98,5 +98,5 @@ export interface TerminalViewerHeaderProps<T extends Terminal | VirtualDomTermin
      */
     collapseAction?: (terminal: T, allCollapsed: boolean) => React.ReactNode;
 }
-declare const TerminalViewerHeader: <T extends Terminal | VirtualDomTerminal = Terminal | VirtualDomTerminal>({ placeholder, defaultValue, clearable, refreshable, loading, activeTitleIndex, titles, searchResult, inputAddonBefore, inputAddonAfter, icons, onTitleChange, onSearchPrev, onSearchNext, onSearchChange, onSearchClear, onRefresh, terminalRef, allCollapsed, collapseAction, }: TerminalViewerHeaderProps<T>) => React.JSX.Element;
+declare const TerminalViewerHeader: <T extends VirtualDomTerminal | Terminal = VirtualDomTerminal | Terminal>({ placeholder, defaultValue, clearable, refreshable, loading, activeTitleIndex, titles, searchResult, inputAddonBefore, inputAddonAfter, icons, onTitleChange, onSearchPrev, onSearchNext, onSearchChange, onSearchClear, onRefresh, terminalRef, allCollapsed, collapseAction, }: TerminalViewerHeaderProps<T>) => React.JSX.Element;
 export default TerminalViewerHeader;

package/dist/esm/TerminalViewerVirtualDom/ChevronRight.js

@@ -20,16 +20,19 @@ var ChevronRight = function ChevronRight(_ref) {
     width: size,
     height: size,
     viewBox: "0 0 16 16",
+    overflow: "visible",
     style: _objectSpread({
       transform: "rotate(".concat(collapsed ? 0 : 90, "deg)"),
       transition: 'transform 0.3s',
       display: 'inline-block'
     }, style)
-  }, /*#__PURE__*/React.createElement("g", {
-    fill: "none"
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M6.4603 12.4595L5.54106 11.5402L9.08144 7.99985L5.54106 4.45947L6.4603 3.54023L10.9199 7.99985L6.4603 12.4595Z",
-    fill: "currentColor"
-  })));
+    d: "M 5.5 2.5 L 10.5 8 L 5.5 13.5",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.25,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
 };
 export default ChevronRight;

package/dist/esm/TerminalViewerVirtualDom/index.d.ts

@@ -84,5 +84,5 @@ export interface TerminalViewerVirtualDomProps {
  * 最后一个分组折叠时，在折叠之前，添加底部空间
  * 最后一个分组展开时，在展开之前，删除底部空间
  */
-declare const ReactVirtuoso: React.ForwardRefExoticComponent<TerminalViewerVirtualDomProps & React.RefAttributes<TerminalRef<import("src").Terminal | VirtualDomTerminal> | undefined>>;
+declare const ReactVirtuoso: React.ForwardRefExoticComponent<TerminalViewerVirtualDomProps & React.RefAttributes<TerminalRef<VirtualDomTerminal | import("src").Terminal> | undefined>>;
 export default ReactVirtuoso;

package/dist/esm/TerminalViewerVirtualDom/index.js

@@ -28,17 +28,35 @@ var getRowClassNames = function getRowClassNames(type) {
   }
   return 'terminal-viewer-virtuoso-list-row';
 };
-
+var LoadingDots = function LoadingDots() {
+  return /*#__PURE__*/React.createElement("span", {
+    className: "terminal-viewer-loading-dots",
+    "aria-hidden": true
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "terminal-viewer-loading-dot"
+  }, "."), /*#__PURE__*/React.createElement("span", {
+    className: "terminal-viewer-loading-dot"
+  }, "."), /*#__PURE__*/React.createElement("span", {
+    className: "terminal-viewer-loading-dot"
+  }, "."));
+};
 // 在组件中添加自定义的 Footer 组件
 var VirtuosoComponents = {
   Footer: function Footer() {
     return /*#__PURE__*/React.createElement("div", {
       style: {
-        height: '50vh',
-        minHeight: '600px'
+        height: '25vh',
+        minHeight: '300px'
       }
     });
   },
+  FooterWithLoading: function FooterWithLoading() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "terminal-viewer-virtuoso-list-footer"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "terminal-viewer-virtuoso-list-footer-loading"
+    }, /*#__PURE__*/React.createElement(LoadingDots, null)));
+  },
   EmptyFooter: function EmptyFooter() {
     return /*#__PURE__*/React.createElement("div", {
       style: {
@@ -232,12 +250,16 @@ var ReactVirtuoso = /*#__PURE__*/forwardRef(function (_ref, ref) {
       });
     }, 0);
   }, [parserRef, stageStatsRef, toggleStage]);
+  var isLastStageRunningRef = useRef(true);
   var groupContent = useCallback(function (groupIndex) {
-    var _parserRef$current2, _extraOptionsRef$curr3, _extraOptionsRef$curr4, _extraOptionsRef$curr5;
+    var _parserRef$current2, _parserRef$current3, _extraOptionsRef$curr3, _extraOptionsRef$curr4, _extraOptionsRef$curr5;
     var stage = (_parserRef$current2 = parserRef.current) === null || _parserRef$current2 === void 0 ? void 0 : _parserRef$current2.stages[groupIndex];
     var collapsed = stageStatsRef.current[groupIndex].collapse;
     var status = (stage === null || stage === void 0 ? void 0 : stage.endStatus) || (stage === null || stage === void 0 ? void 0 : stage.status) || '';
-
+    // 记录最后一个阶段是否为 running 状态
+    if (groupIndex === Number((_parserRef$current3 = parserRef.current) === null || _parserRef$current3 === void 0 ? void 0 : _parserRef$current3.stages.length) - 1) {
+      isLastStageRunningRef.current = status === 'running';
+    }
     // 返回一个高度为 0.1px 的隐藏元素，没有高度会报错
     if (!(stage !== null && stage !== void 0 && stage.name)) {
       return /*#__PURE__*/React.createElement("div", {
@@ -417,6 +439,19 @@ var ReactVirtuoso = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onAddonReady(undefined, searcherRef.current);
     }
   }, [searcherRef, onAddonReady]);
+  var footerComponent = VirtuosoComponents.EmptyFooter;
+  // if (isAllCollapsed) {
+  //   footerComponent = VirtuosoComponents.EmptyFooter;
+  // }
+  // if (!isAllCollapsed && lastCollapseRef.current) {
+  //   footerComponent = VirtuosoComponents.Footer;
+  // }
+  // if (!isAllCollapsed && !lastCollapseRef.current && isLastStageRunningRef.current) {
+  //   footerComponent = VirtuosoComponents.FooterWithLoading;
+  // }
+  if (isLastStageRunningRef.current) {
+    footerComponent = VirtuosoComponents.FooterWithLoading;
+  }
   return /*#__PURE__*/React.createElement("div", {
     className: ['terminal-viewer-body', className].filter(Boolean).join(' '),
     ref: domRef
@@ -438,7 +473,7 @@ var ReactVirtuoso = /*#__PURE__*/forwardRef(function (_ref, ref) {
       // 当最后一个分组折叠时，添加底部空间，避免没有滚动距离，导致抖动
       // 展开时，不要底部空间，避免滚动问题
       // 当全部折叠时，渲染 EmptyFooter
-      Footer: !isAllCollapsed && lastCollapseRef.current ? VirtuosoComponents.Footer : VirtuosoComponents.EmptyFooter
+      Footer: footerComponent
     },
     followOutput: !hasUserCollapseRef.current && autoScroll && !isScrollTopRef.current && searcherResult.count <= 0 && typeof scrollToRow === 'undefined' ? 'auto' : false
   }), (logs === null || logs === void 0 ? void 0 : logs.length) === 0 && (empty || /*#__PURE__*/React.createElement("div", {

package/dist/esm/TerminalViewerVirtualDom/index.less

@@ -27,9 +27,88 @@
   }
 }
 
+// LoadingDots：从 1 个「.」到 3 个「.」依次出现，循环时回到 1 个
+@keyframes terminal-viewer-loading-dot-2 {
+  0%,
+  28% {
+    opacity: 0.2;
+  }
+  33%,
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes terminal-viewer-loading-dot-3 {
+  0%,
+  61% {
+    opacity: 0.2;
+  }
+  66%,
+  100% {
+    opacity: 1;
+  }
+}
+
+.terminal-viewer-loading-dots {
+  display: inline-flex;
+  align-items: baseline;
+  height: 1em;
+  color: #fff;
+  font-weight: 600;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+.terminal-viewer-loading-dot {
+  display: inline-block;
+  width: 0.8em;
+  text-align: center;
+  transform-origin: center bottom;
+  scale: 1.5;
+}
+
+.terminal-viewer-loading-dot:nth-child(1) {
+  opacity: 1;
+}
+
+.terminal-viewer-loading-dot:nth-child(2) {
+  opacity: 0;
+  animation: terminal-viewer-loading-dot-2 1.4s ease-in-out infinite;
+}
+
+.terminal-viewer-loading-dot:nth-child(3) {
+  opacity: 0;
+  animation: terminal-viewer-loading-dot-3 1.4s ease-in-out infinite;
+}
+
+.terminal-viewer-virtuoso-list-footer {
+  display: flex;
+  flex-direction: column;
+}
+
+.terminal-viewer-virtuoso-list-footer-loading {
+  padding-left: 0;
+  background: #262626;
+  transform: translateY(-22px);
+}
+
+@keyframes terminal-viewer-loading-blink {
+  0% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}
+
 .terminal-viewer-line-number,
 .terminal-viewer-text-placeholder {
-  margin-right: 16px;
+  margin-right: 8px;
+  padding-right: 8px;
   color: #959da5bf;
   font-size: 12px;
   font-family: Roboto Mono, Andale Mono, Consolas, Courier New, monospace;

package/dist/esm/mock/index.js

@@ -98,22 +98,12 @@ var STEPS = [{
   id: 'build',
   name: '构建项目',
   startAt: 0,
-  endAt: 199
+  endAt: 49
 }, {
   id: 'test',
   name: '运行测试',
-  startAt: 200,
-  endAt: 499
-}, {
-  id: 'deploy',
-  name: '部署应用',
-  startAt: 500,
-  endAt: 799
-}, {
-  id: 'verify',
-  name: '验证部署',
-  startAt: 800,
-  endAt: 999
+  startAt: 50,
+  endAt: 99
 }];
 
 // 获取当前行应该属于哪个步骤
@@ -143,6 +133,12 @@ function generateStepStart(step) {
   return "START_".concat(step.id, "_running_").concat(timestamp, "_").concat(step.name, "\r\n");
 }
 
+// 生成 running 状态日志（每次追加 2 行）
+function generateRunningLogs(step, lineNum) {
+  var timeLabel = new Date().toLocaleString();
+  return "[".concat(step.name, "] [").concat(timeLabel, "] [running] \u9636\u6BB5\u6267\u884C\u4E2D...\r\n") + "[".concat(step.name, "] [").concat(timeLabel, "] [running] \u5F53\u524D\u5904\u7406\u884C ").concat(lineNum, "\r\n");
+}
+
 // 生成步骤结束标记
 function generateStepEnd(step) {
   var success = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
@@ -152,7 +148,7 @@ function generateStepEnd(step) {
 }
 export function remoteFetchStreamStep() {
   var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  var loopStep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
+  var loopStep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
   var start = Number(key);
   return new Promise(function (resolve) {
     setTimeout(function () {
@@ -163,6 +159,7 @@ export function remoteFetchStreamStep() {
             var _step = getCurrentStep(i);
             if (_step) {
               result += generateStepStart(_step);
+              result += generateRunningLogs(_step, i);
               return 0; // continue
             }
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-terminal-viewer-cicd",
-  "version": "3.0.0-beta.27",
+  "version": "3.0.0-beta.29",
   "author": "https://gitee.com/gitee-frontend",
   "license": "MIT",
   "keywords": [