@canyonjs/report-component 0.0.10 → 1.0.16

package/dist/index.css

@@ -152,22 +152,73 @@
   border-bottom: 1px solid #e0e0e0;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   z-index: 1000;
-  transition: max-height 0.3s ease;
+  transition: max-height 0.3s ease, opacity 0.3s ease;
+  opacity: 0;
 }
 
-.canyonjs-report-html .canyon-changed-code-coverage-table-wrapper {
-  padding: 16px;
+.canyonjs-report-html .canyon-changed-code-coverage-content[style*="max-height: auto"] {
+  opacity: 1;
+}
+
+.canyonjs-report-html .canyon-changed-code-coverage-select-wrapper {
+  padding: 12px 16px;
   background: #ffffff;
   font-family:
     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  overflow: auto;
-  max-height: 300px;
+  display: flex;
+  justify-content: flex-start;
+}
+
+/* 下拉选项样式优化 */
+.canyonjs-report-html .canyon-changed-code-coverage-select-wrapper .ant-select-item {
+  padding: 6px 12px !important;
+  line-height: 20px !important;
+}
+
+.canyonjs-report-html .canyon-changed-code-coverage-select-wrapper .ant-select-item-option-active {
+  background-color: #f5f5f5;
+}
+
+.canyonjs-report-html .canyon-changed-code-coverage-select-wrapper .ant-select-item-option-content {
+  display: flex;
+  align-items: center;
 }
 
-.canyonjs-report-html .canyon-changed-code-coverage-table-title {
-  font-weight: bold;
-  font-size: 14px;
-  color: #007acc;
-  margin-bottom: 12px;
+/* 跳转高亮样式 - 整行高亮 */
+.canyonjs-report-html .canyon-jump-highlight-line {
+  background-color: rgba(255, 193, 7, 0.4) !important;
+  border-left: 4px solid #ff9800;
+  box-shadow: 0 0 8px rgba(255, 193, 7, 0.5);
+  animation: canyon-jump-pulse 0.6s ease-out;
+}
+
+/* 跳转高亮样式 - 行号区域高亮 */
+.canyonjs-report-html .canyon-jump-highlight-line-margin {
+  background-color: rgba(255, 193, 7, 0.3) !important;
+}
+
+/* 跳转高亮样式 - 范围高亮 */
+.canyonjs-report-html .canyon-jump-highlight-range {
+  background-color: rgba(255, 193, 7, 0.5) !important;
+  border: 2px solid #ff9800;
+  border-radius: 3px;
+  box-shadow: 0 0 6px rgba(255, 193, 7, 0.6);
+  animation: canyon-jump-pulse 0.6s ease-out;
+}
+
+/* 脉冲动画效果 - 让高亮更醒目 */
+@keyframes canyon-jump-pulse {
+  0% {
+    background-color: rgba(255, 193, 7, 0.7);
+    box-shadow: 0 0 12px rgba(255, 193, 7, 0.8);
+  }
+  50% {
+    background-color: rgba(255, 193, 7, 0.5);
+    box-shadow: 0 0 8px rgba(255, 193, 7, 0.6);
+  }
+  100% {
+    background-color: rgba(255, 193, 7, 0.4);
+    box-shadow: 0 0 8px rgba(255, 193, 7, 0.5);
+  }
 }
 

package/dist/index.js

@@ -1,4 +1,4 @@
-import { ConfigProvider, Divider, Input, Progress, Segmented, Space, Spin, Switch, Table, Tag, Typography, theme } from "antd";
+import { ConfigProvider, Divider, Input, Progress, Segmented, Select, Space, Spin, Switch, Table, Tag, Typography, theme } from "antd";
 import { Suspense, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { genSummaryTreeItem } from "canyon-data";
@@ -236,10 +236,36 @@ function coreFn(fileCoverage, fileDetail) {
 
 //#endregion
 //#region src/widgets/ChangedCodeCoverageTable.tsx
-const ChangedCodeCoverageTable = ({ coverage, addLines }) => {
-	console.log("coverage", coverage);
-	console.log("addLines", addLines);
+const formatLineRanges = (lines) => {
+	if (lines.length === 0) return "";
+	if (lines.length === 1) {
+		const first$1 = lines[0];
+		return first$1 !== void 0 ? first$1.toString() : "";
+	}
+	const sorted = [...lines].sort((a, b) => a - b);
+	const ranges = [];
+	const first = sorted[0];
+	if (first === void 0) return "";
+	let start = first;
+	let end = first;
+	for (let i = 1; i < sorted.length; i++) {
+		const current = sorted[i];
+		if (current === void 0) continue;
+		if (current === end + 1) end = current;
+		else {
+			if (start === end) ranges.push(start.toString());
+			else ranges.push(`${start}-${end}`);
+			start = current;
+			end = current;
+		}
+	}
+	if (start === end) ranges.push(start.toString());
+	else ranges.push(`${start}-${end}`);
+	return ranges.join(", ");
+};
+const ChangedCodeCoverageTable = ({ coverage, addLines, onJumpToRange }) => {
 	const [isOpen, setIsOpen] = useState(false);
+	const [selectedValue, setSelectedValue] = useState(null);
 	const relatedStatements = useMemo(() => {
 		if (addLines.length === 0 || !coverage.s || !coverage.statementMap) return [];
 		const addedLinesSet = new Set(addLines);
@@ -252,39 +278,102 @@ const ChangedCodeCoverageTable = ({ coverage, addLines }) => {
 			const relatedLines = [];
 			for (let line = startLine; line <= endLine; line++) if (addedLinesSet.has(line)) relatedLines.push(line);
 			if (relatedLines.length > 0) {
-				const count = coverage.s[stId] || 0;
+				const count = coverage.s?.[stId] || 0;
 				const covered = count > 0;
-				const locationDisplay = endLine > startLine ? `${startLine}:${startCol + 1} - ${endLine}:${endCol + 1}` : `${startLine}:${startCol + 1}`;
-				const relatedLinesDisplay = relatedLines.join(", ");
+				const locationDisplay = endLine > startLine ? `L${startLine} C${startCol + 1} - L${endLine} C${endCol + 1}` : `L${startLine} C${startCol + 1}`;
+				const relatedLinesDisplay = formatLineRanges(relatedLines);
 				statements.push({
 					key: stId,
 					Status: covered ? "✓ Covered" : "✗ Not Covered",
 					Location: locationDisplay,
 					"Changed Lines": relatedLinesDisplay,
-					"Hit Count": covered ? `${count}x` : "Not covered"
+					"Hit Count": covered ? `${count}x` : "0x",
+					startLine,
+					startCol: startCol + 1,
+					endLine,
+					endCol: endCol + 1,
+					relatedLines
 				});
 			}
 		});
 		statements.sort((a, b) => {
-			return parseInt(a.Location.split(":")[0] || "0") - parseInt(b.Location.split(":")[0] || "0");
+			const aMatch = a.Location.match(/L(\d+)/);
+			const bMatch = b.Location.match(/L(\d+)/);
+			return (aMatch ? parseInt(aMatch[1] || "0") : 0) - (bMatch ? parseInt(bMatch[1] || "0") : 0);
 		});
 		return statements;
 	}, [addLines, coverage]);
+	const filteredStatements = useMemo(() => {
+		return relatedStatements.filter((s) => s.Status.includes("✗"));
+	}, [relatedStatements]);
+	const allStatementsForSelect = useMemo(() => {
+		return relatedStatements;
+	}, [relatedStatements]);
+	const groupedOptions = useMemo(() => {
+		const covered = relatedStatements.filter((s) => s.Status.includes("✓"));
+		const notCovered = relatedStatements.filter((s) => s.Status.includes("✗"));
+		const groups = [];
+		if (notCovered.length > 0) groups.push({
+			label: /* @__PURE__ */ jsxs("span", {
+				style: {
+					fontWeight: 500,
+					color: "#f44336"
+				},
+				children: [
+					"✗ Not Covered (",
+					notCovered.length,
+					")"
+				]
+			}),
+			title: "Not Covered",
+			options: notCovered.map((stmt) => ({
+				value: stmt.key,
+				label: `${stmt.Location} Lines: ${stmt["Changed Lines"]} ${stmt["Hit Count"]}`
+			}))
+		});
+		if (covered.length > 0) groups.push({
+			label: /* @__PURE__ */ jsxs("span", {
+				style: {
+					fontWeight: 500,
+					color: "#4caf50"
+				},
+				children: [
+					"✓ Covered (",
+					covered.length,
+					")"
+				]
+			}),
+			title: "Covered",
+			options: covered.map((stmt) => ({
+				value: stmt.key,
+				label: `${stmt.Location} Lines: ${stmt["Changed Lines"]} ${stmt["Hit Count"]}`
+			}))
+		});
+		return groups;
+	}, [relatedStatements]);
 	const coverageStats = useMemo(() => {
 		if (relatedStatements.length === 0) return {
 			coveredCount: 0,
 			totalCount: 0,
-			coveragePercent: 0
+			coveragePercent: 0,
+			notCoveredCount: 0
 		};
 		const coveredCount = relatedStatements.filter((s) => s.Status.includes("✓")).length;
 		const totalCount = relatedStatements.length;
+		const notCoveredCount = filteredStatements.length;
 		return {
 			coveredCount,
 			totalCount,
-			coveragePercent: totalCount > 0 ? Math.round(coveredCount / totalCount * 100) : 0
+			coveragePercent: totalCount > 0 ? Math.round(coveredCount / totalCount * 100) : 0,
+			notCoveredCount
 		};
-	}, [relatedStatements]);
-	if (relatedStatements.length === 0) return null;
+	}, [relatedStatements, filteredStatements]);
+	if (filteredStatements.length === 0) return null;
+	const handleSelectChange = (value) => {
+		setSelectedValue(value);
+		const statement = allStatementsForSelect.find((s) => s.key === value);
+		if (statement && onJumpToRange) onJumpToRange(statement.startLine, statement.startCol, statement.endLine, statement.endCol);
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: "canyon-changed-code-coverage-table",
 		children: [/* @__PURE__ */ jsxs("button", {
@@ -303,7 +392,9 @@ const ChangedCodeCoverageTable = ({ coverage, addLines }) => {
 					coverageStats.coveredCount,
 					"/",
 					coverageStats.totalCount,
-					")"
+					") - ",
+					coverageStats.notCoveredCount,
+					" 未覆盖"
 				] }),
 				/* @__PURE__ */ jsx("span", {
 					className: "canyon-changed-code-coverage-arrow",
@@ -312,43 +403,136 @@ const ChangedCodeCoverageTable = ({ coverage, addLines }) => {
 			]
 		}), /* @__PURE__ */ jsx("div", {
 			className: "canyon-changed-code-coverage-content",
-			style: { maxHeight: isOpen ? "350px" : "0" },
+			style: {
+				maxHeight: isOpen ? "100px" : "0",
+				overflow: isOpen ? "visible" : "hidden",
+				opacity: isOpen ? 1 : 0
+			},
 			children: /* @__PURE__ */ jsx("div", {
-				className: "canyon-changed-code-coverage-table-wrapper",
-				children: /* @__PURE__ */ jsx(ConfigProvider, {
-					theme: { token: { borderRadius: 0 } },
-					children: /* @__PURE__ */ jsx(Table, {
-						dataSource: relatedStatements,
-						columns: [
-							{
-								title: "Status",
-								dataIndex: "Status",
-								key: "Status",
-								render: (text) => /* @__PURE__ */ jsx("span", {
-									style: { color: text.includes("✓") ? "#4caf50" : "#f44336" },
-									children: text
-								})
-							},
-							{
-								title: "Location",
-								dataIndex: "Location",
-								key: "Location"
+				className: "canyon-changed-code-coverage-select-wrapper",
+				children: /* @__PURE__ */ jsx(Select, {
+					value: selectedValue,
+					onChange: handleSelectChange,
+					placeholder: "Select code location (use arrow keys)",
+					style: {
+						width: "480px",
+						maxWidth: "100%"
+					},
+					size: "small",
+					showSearch: true,
+					optionFilterProp: "label",
+					tagRender: (props) => {
+						const { value } = props;
+						const stmt = allStatementsForSelect.find((s) => s.key === value);
+						if (!stmt) return /* @__PURE__ */ jsx("span", { children: value });
+						const isCovered = stmt.Status.includes("✓");
+						return /* @__PURE__ */ jsxs("span", {
+							style: {
+								display: "inline-flex",
+								alignItems: "center",
+								gap: "6px",
+								fontSize: "13px",
+								lineHeight: "20px"
 							},
-							{
-								title: "Changed Lines",
-								dataIndex: "Changed Lines",
-								key: "Changed Lines"
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									style: {
+										color: isCovered ? "#4caf50" : "#f44336",
+										fontWeight: "bold",
+										fontSize: "14px"
+									},
+									children: isCovered ? "✓" : "✗"
+								}),
+								/* @__PURE__ */ jsx("span", {
+									style: { fontFamily: "monospace" },
+									children: stmt.Location
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									style: {
+										color: "#666",
+										fontSize: "12px"
+									},
+									children: ["Lines: ", stmt["Changed Lines"]]
+								}),
+								/* @__PURE__ */ jsx("span", {
+									style: {
+										color: isCovered ? "#4caf50" : "#f44336",
+										fontSize: "12px"
+									},
+									children: stmt["Hit Count"]
+								})
+							]
+						});
+					},
+					filterOption: (input, option) => {
+						if (!option) return false;
+						if (option.options) return true;
+						return (option?.label?.toString() || "").toLowerCase().includes(input.toLowerCase());
+					},
+					optionRender: (option) => {
+						if (!option) return null;
+						if (option.options) return option.label;
+						const stmt = allStatementsForSelect.find((s) => s.key === option.value);
+						if (!stmt) return option.label;
+						const isCovered = stmt.Status.includes("✓");
+						return /* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: "6px",
+								padding: "2px 0",
+								fontSize: "13px",
+								lineHeight: "20px"
 							},
-							{
-								title: "Hit Count",
-								dataIndex: "Hit Count",
-								key: "Hit Count"
-							}
-						],
-						pagination: false,
-						size: "small",
-						bordered: true
-					})
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									style: {
+										color: isCovered ? "#4caf50" : "#f44336",
+										fontWeight: "bold",
+										width: "16px",
+										fontSize: "14px",
+										textAlign: "center",
+										flexShrink: 0
+									},
+									title: isCovered ? "Covered" : "Not Covered",
+									children: isCovered ? "✓" : "✗"
+								}),
+								/* @__PURE__ */ jsx("span", {
+									style: {
+										fontFamily: "monospace",
+										width: "180px",
+										flexShrink: 0,
+										overflow: "hidden",
+										textOverflow: "ellipsis",
+										whiteSpace: "nowrap"
+									},
+									children: stmt.Location
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									style: {
+										color: "#666",
+										fontSize: "12px",
+										width: "100px",
+										flexShrink: 0,
+										textAlign: "left"
+									},
+									children: ["Lines: ", stmt["Changed Lines"]]
+								}),
+								/* @__PURE__ */ jsx("span", {
+									style: {
+										color: isCovered ? "#4caf50" : "#f44336",
+										fontSize: "12px",
+										width: "80px",
+										flexShrink: 0,
+										textAlign: "right",
+										fontWeight: isCovered ? "500" : "normal"
+									},
+									children: stmt["Hit Count"]
+								})
+							]
+						});
+					},
+					options: groupedOptions
 				})
 			})
 		})]
@@ -414,9 +598,12 @@ function lineNumbers(lineNumber, linesState, _addLines) {
 //#region src/widgets/CoverageDetail.tsx
 const CoverageDetail = ({ source, coverage, diff }) => {
 	const addLines = diff.additions || [];
-	coverage = changeModeFilterIrrelevantData(coverage, diff);
+	coverage = addLines.length > 0 ? changeModeFilterIrrelevantData(coverage, diff) : coverage;
 	const { lines } = coreFn(coverage, source);
 	const ref = useRef(null);
+	const editorRef = useRef(null);
+	const highlightDecorationsRef = useRef(null);
+	const highlightTimeoutRef = useRef(null);
 	const hasChangedLines = addLines.length > 0 && coverage["s"] && coverage["statementMap"];
 	const linesState = (() => {
 		return lines.map((line, index) => {
@@ -453,6 +640,7 @@ const CoverageDetail = ({ source, coverage, diff }) => {
 			};
 			if (window.monaco?.editor && dom) {
 				const editor = window.monaco.editor.create(dom, options);
+				editorRef.current = editor;
 				const decorations = (() => {
 					const all = [];
 					const annotateStatementsList = annotateStatements(coverage);
@@ -495,9 +683,20 @@ const CoverageDetail = ({ source, coverage, diff }) => {
 					}
 					return arr;
 				})();
-				if (editor) editor?.createDecorationsCollection?.(decorations);
+				if (editor) {
+					editor?.createDecorationsCollection?.(decorations);
+					highlightDecorationsRef.current = editor.createDecorationsCollection([]);
+				}
 			}
 		}
+		return () => {
+			if (highlightTimeoutRef.current) clearTimeout(highlightTimeoutRef.current);
+			if (editorRef.current) {
+				editorRef.current.dispose();
+				editorRef.current = null;
+			}
+			highlightDecorationsRef.current = null;
+		};
 	}, [source, coverage]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "canyon-coverage-detail-container",
@@ -507,7 +706,31 @@ const CoverageDetail = ({ source, coverage, diff }) => {
 		},
 		children: [hasChangedLines ? /* @__PURE__ */ jsx(ChangedCodeCoverageTable_default, {
 			coverage,
-			addLines
+			addLines,
+			onJumpToRange: (startLine, startCol, endLine, endCol) => {
+				if (editorRef.current && window.monaco) {
+					const editor = editorRef.current;
+					if (highlightTimeoutRef.current) clearTimeout(highlightTimeoutRef.current);
+					if (highlightDecorationsRef.current) highlightDecorationsRef.current.clear();
+					const range = new window.monaco.Range(startLine, startCol, endLine, endCol);
+					if (highlightDecorationsRef.current) highlightDecorationsRef.current.set([{
+						range,
+						options: {
+							isWholeLine: false,
+							inlineClassName: "canyon-jump-highlight-range",
+							stickiness: window.monaco.editor.TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges
+						}
+					}]);
+					editor.setPosition({
+						lineNumber: startLine,
+						column: startCol
+					});
+					editor.revealRange(range, window.monaco.editor.ScrollType.Smooth);
+					highlightTimeoutRef.current = setTimeout(() => {
+						if (highlightDecorationsRef.current) highlightDecorationsRef.current.clear();
+					}, 3e3);
+				}
+			}
 		}) : null, /* @__PURE__ */ jsx("div", {
 			ref,
 			className: "canyon-coverage-detail-editor",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@canyonjs/report-component",
   "type": "module",
-  "version": "0.0.10",
+  "version": "1.0.16",
   "author": "Travis Zhang<https://github.com/travzhang>",
   "repository": {
     "type": "git",