@canyonjs/report-component 0.0.1-beta.5 → 0.0.1-beta.7

package/dist/index.d.ts

@@ -1,13 +1,22 @@
 import { FC } from "react";
+import { FileCoverageData } from "istanbul-lib-coverage";
 
 //#region src/types.d.ts
-
+/**
+ * 文件数据响应接口
+ */
+interface FileDataResponse {
+  fileCoverage: FileCoverageData;
+  fileContent: string;
+  fileCodeChange: number[];
+}
 interface CanyonReportProps {
   /** 报告名称 */
   name: string;
   /** 当前选中的文件 */
   value: string;
   dataSource: any[];
+  onSelect: (val: string) => Promise<FileDataResponse>;
 }
 //#endregion
 //#region src/CanyonReport.d.ts

package/dist/index.js

@@ -1,53 +1,1202 @@
-import { useEffect, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { ConfigProvider, Divider, Input, Progress, Segmented, 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 Highlighter from "react-highlight-words";
+import { genSummaryTreeItem } from "canyon-data";
+import { FileOutlined, FolderFilled } from "@ant-design/icons";
 
-//#region src/core/index.ts
-function initCanyonReportCore(dom, options) {
-	console.log(dom, options, window.monaco, window.monaco.editor);
-	if (window.monaco && window.monaco.editor && dom) window.monaco.editor.create(dom, options);
-}
+//#region rolldown:runtime
+var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 
 //#endregion
-//#region src/widgets/CoverageDetail.tsx
-function CanyonReport$1() {
-	const ref = useRef(null);
-	useEffect(() => {
-		if (ref.current) initCanyonReportCore(ref.current, {
-			value: "const a = 1",
-			language: "javascript",
-			theme: "vs-dark"
+//#region ../../node_modules/.pnpm/istanbul-lib-coverage@3.2.2/node_modules/istanbul-lib-coverage/lib/percent.js
+var require_percent = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+	module.exports = function percent$2(covered, total) {
+		let tmp;
+		if (total > 0) {
+			tmp = 1e3 * 100 * covered / total;
+			return Math.floor(tmp / 10) / 100;
+		} else return 100;
+	};
+}));
+
+//#endregion
+//#region ../../node_modules/.pnpm/istanbul-lib-coverage@3.2.2/node_modules/istanbul-lib-coverage/lib/data-properties.js
+var require_data_properties = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+	module.exports = function dataProperties$2(klass, properties) {
+		properties.forEach((p) => {
+			Object.defineProperty(klass.prototype, p, {
+				enumerable: true,
+				get() {
+					return this.data[p];
+				}
+			});
 		});
-	}, []);
+	};
+}));
+
+//#endregion
+//#region ../../node_modules/.pnpm/istanbul-lib-coverage@3.2.2/node_modules/istanbul-lib-coverage/lib/coverage-summary.js
+var require_coverage_summary = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+	const percent$1 = require_percent();
+	const dataProperties$1 = require_data_properties();
+	function blankSummary() {
+		const empty = () => ({
+			total: 0,
+			covered: 0,
+			skipped: 0,
+			pct: "Unknown"
+		});
+		return {
+			lines: empty(),
+			statements: empty(),
+			functions: empty(),
+			branches: empty(),
+			branchesTrue: empty()
+		};
+	}
+	function assertValidSummary(obj) {
+		if (!(obj && obj.lines && obj.statements && obj.functions && obj.branches)) throw new Error("Invalid summary coverage object, missing keys, found:" + Object.keys(obj).join(","));
+	}
+	/**
+	* CoverageSummary provides a summary of code coverage . It exposes 4 properties,
+	* `lines`, `statements`, `branches`, and `functions`. Each of these properties
+	* is an object that has 4 keys `total`, `covered`, `skipped` and `pct`.
+	* `pct` is a percentage number (0-100).
+	*/
+	var CoverageSummary$3 = class CoverageSummary$3 {
+		/**
+		* @constructor
+		* @param {Object|CoverageSummary} [obj=undefined] an optional data object or
+		* another coverage summary to initialize this object with.
+		*/
+		constructor(obj) {
+			if (!obj) this.data = blankSummary();
+			else if (obj instanceof CoverageSummary$3) this.data = obj.data;
+			else this.data = obj;
+			assertValidSummary(this.data);
+		}
+		/**
+		* merges a second summary coverage object into this one
+		* @param {CoverageSummary} obj - another coverage summary object
+		*/
+		merge(obj) {
+			[
+				"lines",
+				"statements",
+				"branches",
+				"functions",
+				"branchesTrue"
+			].forEach((key) => {
+				if (obj[key]) {
+					this[key].total += obj[key].total;
+					this[key].covered += obj[key].covered;
+					this[key].skipped += obj[key].skipped;
+					this[key].pct = percent$1(this[key].covered, this[key].total);
+				}
+			});
+			return this;
+		}
+		/**
+		* returns a POJO that is JSON serializable. May be used to get the raw
+		* summary object.
+		*/
+		toJSON() {
+			return this.data;
+		}
+		/**
+		* return true if summary has no lines of code
+		*/
+		isEmpty() {
+			return this.lines.total === 0;
+		}
+	};
+	dataProperties$1(CoverageSummary$3, [
+		"lines",
+		"statements",
+		"functions",
+		"branches",
+		"branchesTrue"
+	]);
+	module.exports = { CoverageSummary: CoverageSummary$3 };
+}));
+
+//#endregion
+//#region ../../node_modules/.pnpm/istanbul-lib-coverage@3.2.2/node_modules/istanbul-lib-coverage/lib/file-coverage.js
+var require_file_coverage = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+	const percent = require_percent();
+	const dataProperties = require_data_properties();
+	const { CoverageSummary: CoverageSummary$2 } = require_coverage_summary();
+	function emptyCoverage(filePath, reportLogic) {
+		const cov = {
+			path: filePath,
+			statementMap: {},
+			fnMap: {},
+			branchMap: {},
+			s: {},
+			f: {},
+			b: {}
+		};
+		if (reportLogic) cov.bT = {};
+		return cov;
+	}
+	function assertValidObject(obj) {
+		if (!(obj && obj.path && obj.statementMap && obj.fnMap && obj.branchMap && obj.s && obj.f && obj.b)) throw new Error("Invalid file coverage object, missing keys, found:" + Object.keys(obj).join(","));
+	}
+	const keyFromLoc = ({ start, end }) => `${start.line}|${start.column}|${end.line}|${end.column}`;
+	const isObj = (o) => !!o && typeof o === "object";
+	const isLineCol = (o) => isObj(o) && typeof o.line === "number" && typeof o.column === "number";
+	const isLoc = (o) => isObj(o) && isLineCol(o.start) && isLineCol(o.end);
+	const getLoc = (o) => isLoc(o) ? o : isLoc(o.loc) ? o.loc : null;
+	const findNearestContainer = (item, map) => {
+		const itemLoc = getLoc(item);
+		if (!itemLoc) return null;
+		let nearestContainingItem = null;
+		let containerDistance = null;
+		let containerKey = null;
+		for (const [i, mapItem] of Object.entries(map)) {
+			const mapLoc = getLoc(mapItem);
+			if (!mapLoc) continue;
+			const distance = [
+				itemLoc.start.line - mapLoc.start.line,
+				itemLoc.start.column - mapLoc.start.column,
+				mapLoc.end.line - itemLoc.end.line,
+				mapLoc.end.column - itemLoc.end.column
+			];
+			if (distance[0] < 0 || distance[2] < 0 || distance[0] === 0 && distance[1] < 0 || distance[2] === 0 && distance[3] < 0) continue;
+			if (nearestContainingItem === null) {
+				containerDistance = distance;
+				nearestContainingItem = mapItem;
+				containerKey = i;
+				continue;
+			}
+			const closerBefore = distance[0] < containerDistance[0] || distance[0] === 0 && distance[1] < containerDistance[1];
+			const closerAfter = distance[2] < containerDistance[2] || distance[2] === 0 && distance[3] < containerDistance[3];
+			if (closerBefore || closerAfter) {
+				containerDistance = distance;
+				nearestContainingItem = mapItem;
+				containerKey = i;
+			}
+		}
+		return containerKey;
+	};
+	const addHits = (aHits, bHits) => {
+		if (typeof aHits === "number" && typeof bHits === "number") return aHits + bHits;
+		else if (Array.isArray(aHits) && Array.isArray(bHits)) return aHits.map((a, i) => (a || 0) + (bHits[i] || 0));
+		return null;
+	};
+	const addNearestContainerHits = (item, itemHits, map, mapHits) => {
+		const container = findNearestContainer(item, map);
+		if (container) return addHits(itemHits, mapHits[container]);
+		else return itemHits;
+	};
+	const mergeProp = (aHits, aMap, bHits, bMap, itemKey = keyFromLoc) => {
+		const aItems = {};
+		for (const [key, itemHits] of Object.entries(aHits)) {
+			const item = aMap[key];
+			aItems[itemKey(item)] = [itemHits, item];
+		}
+		const bItems = {};
+		for (const [key, itemHits] of Object.entries(bHits)) {
+			const item = bMap[key];
+			bItems[itemKey(item)] = [itemHits, item];
+		}
+		const mergedItems = {};
+		for (const [key, aValue] of Object.entries(aItems)) {
+			let aItemHits = aValue[0];
+			const aItem = aValue[1];
+			const bValue = bItems[key];
+			if (!bValue) aItemHits = addNearestContainerHits(aItem, aItemHits, bMap, bHits);
+			else aItemHits = addHits(aItemHits, bValue[0]);
+			mergedItems[key] = [aItemHits, aItem];
+		}
+		for (const [key, bValue] of Object.entries(bItems)) {
+			let bItemHits = bValue[0];
+			const bItem = bValue[1];
+			if (mergedItems[key]) continue;
+			bItemHits = addNearestContainerHits(bItem, bItemHits, aMap, aHits);
+			mergedItems[key] = [bItemHits, bItem];
+		}
+		const hits = {};
+		const map = {};
+		Object.values(mergedItems).forEach(([itemHits, item], i) => {
+			hits[i] = itemHits;
+			map[i] = item;
+		});
+		return [hits, map];
+	};
+	/**
+	* provides a read-only view of coverage for a single file.
+	* The deep structure of this object is documented elsewhere. It has the following
+	* properties:
+	*
+	* * `path` - the file path for which coverage is being tracked
+	* * `statementMap` - map of statement locations keyed by statement index
+	* * `fnMap` - map of function metadata keyed by function index
+	* * `branchMap` - map of branch metadata keyed by branch index
+	* * `s` - hit counts for statements
+	* * `f` - hit count for functions
+	* * `b` - hit count for branches
+	*/
+	var FileCoverage$2 = class FileCoverage$2 {
+		/**
+		* @constructor
+		* @param {Object|FileCoverage|String} pathOrObj is a string that initializes
+		* and empty coverage object with the specified file path or a data object that
+		* has all the required properties for a file coverage object.
+		*/
+		constructor(pathOrObj, reportLogic = false) {
+			if (!pathOrObj) throw new Error("Coverage must be initialized with a path or an object");
+			if (typeof pathOrObj === "string") this.data = emptyCoverage(pathOrObj, reportLogic);
+			else if (pathOrObj instanceof FileCoverage$2) this.data = pathOrObj.data;
+			else if (typeof pathOrObj === "object") this.data = pathOrObj;
+			else throw new Error("Invalid argument to coverage constructor");
+			assertValidObject(this.data);
+		}
+		/**
+		* returns computed line coverage from statement coverage.
+		* This is a map of hits keyed by line number in the source.
+		*/
+		getLineCoverage() {
+			const statementMap = this.data.statementMap;
+			const statements = this.data.s;
+			const lineMap = Object.create(null);
+			Object.entries(statements).forEach(([st, count]) => {
+				/* istanbul ignore if: is this even possible? */
+				if (!statementMap[st]) return;
+				const { line } = statementMap[st].start;
+				const prevVal = lineMap[line];
+				if (prevVal === void 0 || prevVal < count) lineMap[line] = count;
+			});
+			return lineMap;
+		}
+		/**
+		* returns an array of uncovered line numbers.
+		* @returns {Array} an array of line numbers for which no hits have been
+		*  collected.
+		*/
+		getUncoveredLines() {
+			const lc = this.getLineCoverage();
+			const ret = [];
+			Object.entries(lc).forEach(([l, hits]) => {
+				if (hits === 0) ret.push(l);
+			});
+			return ret;
+		}
+		/**
+		* returns a map of branch coverage by source line number.
+		* @returns {Object} an object keyed by line number. Each object
+		* has a `covered`, `total` and `coverage` (percentage) property.
+		*/
+		getBranchCoverageByLine() {
+			const branchMap = this.branchMap;
+			const branches = this.b;
+			const ret = {};
+			Object.entries(branchMap).forEach(([k, map]) => {
+				const line = map.line || map.loc.start.line;
+				const branchData = branches[k];
+				ret[line] = ret[line] || [];
+				ret[line].push(...branchData);
+			});
+			Object.entries(ret).forEach(([k, dataArray]) => {
+				const covered = dataArray.filter((item) => item > 0);
+				const coverage = covered.length / dataArray.length * 100;
+				ret[k] = {
+					covered: covered.length,
+					total: dataArray.length,
+					coverage
+				};
+			});
+			return ret;
+		}
+		/**
+		* return a JSON-serializable POJO for this file coverage object
+		*/
+		toJSON() {
+			return this.data;
+		}
+		/**
+		* merges a second coverage object into this one, updating hit counts
+		* @param {FileCoverage} other - the coverage object to be merged into this one.
+		*  Note that the other object should have the same structure as this one (same file).
+		*/
+		merge(other) {
+			if (other.all === true) return;
+			if (this.all === true) {
+				this.data = other.data;
+				return;
+			}
+			let [hits, map] = mergeProp(this.s, this.statementMap, other.s, other.statementMap);
+			this.data.s = hits;
+			this.data.statementMap = map;
+			const keyFromLocProp = (x) => keyFromLoc(x.loc);
+			const keyFromLocationsProp = (x) => keyFromLoc(x.locations[0]);
+			[hits, map] = mergeProp(this.f, this.fnMap, other.f, other.fnMap, keyFromLocProp);
+			this.data.f = hits;
+			this.data.fnMap = map;
+			[hits, map] = mergeProp(this.b, this.branchMap, other.b, other.branchMap, keyFromLocationsProp);
+			this.data.b = hits;
+			this.data.branchMap = map;
+			if (this.bT && other.bT) {
+				[hits, map] = mergeProp(this.bT, this.branchMap, other.bT, other.branchMap, keyFromLocationsProp);
+				this.data.bT = hits;
+			}
+		}
+		computeSimpleTotals(property) {
+			let stats = this[property];
+			if (typeof stats === "function") stats = stats.call(this);
+			const ret = {
+				total: Object.keys(stats).length,
+				covered: Object.values(stats).filter((v) => !!v).length,
+				skipped: 0
+			};
+			ret.pct = percent(ret.covered, ret.total);
+			return ret;
+		}
+		computeBranchTotals(property) {
+			const stats = this[property];
+			const ret = {
+				total: 0,
+				covered: 0,
+				skipped: 0
+			};
+			Object.values(stats).forEach((branches) => {
+				ret.covered += branches.filter((hits) => hits > 0).length;
+				ret.total += branches.length;
+			});
+			ret.pct = percent(ret.covered, ret.total);
+			return ret;
+		}
+		/**
+		* resets hit counts for all statements, functions and branches
+		* in this coverage object resulting in zero coverage.
+		*/
+		resetHits() {
+			const statements = this.s;
+			const functions = this.f;
+			const branches = this.b;
+			const branchesTrue = this.bT;
+			Object.keys(statements).forEach((s) => {
+				statements[s] = 0;
+			});
+			Object.keys(functions).forEach((f) => {
+				functions[f] = 0;
+			});
+			Object.keys(branches).forEach((b) => {
+				branches[b].fill(0);
+			});
+			if (branchesTrue) Object.keys(branchesTrue).forEach((bT) => {
+				branchesTrue[bT].fill(0);
+			});
+		}
+		/**
+		* returns a CoverageSummary for this file coverage object
+		* @returns {CoverageSummary}
+		*/
+		toSummary() {
+			const ret = {};
+			ret.lines = this.computeSimpleTotals("getLineCoverage");
+			ret.functions = this.computeSimpleTotals("f", "fnMap");
+			ret.statements = this.computeSimpleTotals("s", "statementMap");
+			ret.branches = this.computeBranchTotals("b");
+			if (this.bT) ret.branchesTrue = this.computeBranchTotals("bT");
+			return new CoverageSummary$2(ret);
+		}
+	};
+	dataProperties(FileCoverage$2, [
+		"path",
+		"statementMap",
+		"fnMap",
+		"branchMap",
+		"s",
+		"f",
+		"b",
+		"bT",
+		"all"
+	]);
+	module.exports = {
+		FileCoverage: FileCoverage$2,
+		findNearestContainer,
+		addHits,
+		addNearestContainerHits
+	};
+}));
+
+//#endregion
+//#region ../../node_modules/.pnpm/istanbul-lib-coverage@3.2.2/node_modules/istanbul-lib-coverage/lib/coverage-map.js
+var require_coverage_map = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+	const { FileCoverage: FileCoverage$1 } = require_file_coverage();
+	const { CoverageSummary: CoverageSummary$1 } = require_coverage_summary();
+	function maybeConstruct(obj, klass) {
+		if (obj instanceof klass) return obj;
+		return new klass(obj);
+	}
+	function loadMap(source) {
+		const data = Object.create(null);
+		if (!source) return data;
+		Object.entries(source).forEach(([k, cov]) => {
+			data[k] = maybeConstruct(cov, FileCoverage$1);
+		});
+		return data;
+	}
+	/** CoverageMap is a map of `FileCoverage` objects keyed by file paths. */
+	var CoverageMap$1 = class CoverageMap$1 {
+		/**
+		* @constructor
+		* @param {Object} [obj=undefined] obj A coverage map from which to initialize this
+		* map's contents. This can be the raw global coverage object.
+		*/
+		constructor(obj) {
+			if (obj instanceof CoverageMap$1) this.data = obj.data;
+			else this.data = loadMap(obj);
+		}
+		/**
+		* merges a second coverage map into this one
+		* @param {CoverageMap} obj - a CoverageMap or its raw data. Coverage is merged
+		*  correctly for the same files and additional file coverage keys are created
+		*  as needed.
+		*/
+		merge(obj) {
+			const other = maybeConstruct(obj, CoverageMap$1);
+			Object.values(other.data).forEach((fc) => {
+				this.addFileCoverage(fc);
+			});
+		}
+		/**
+		* filter the coveragemap based on the callback provided
+		* @param {Function (filename)} callback - Returns true if the path
+		*  should be included in the coveragemap. False if it should be
+		*  removed.
+		*/
+		filter(callback) {
+			Object.keys(this.data).forEach((k) => {
+				if (!callback(k)) delete this.data[k];
+			});
+		}
+		/**
+		* returns a JSON-serializable POJO for this coverage map
+		* @returns {Object}
+		*/
+		toJSON() {
+			return this.data;
+		}
+		/**
+		* returns an array for file paths for which this map has coverage
+		* @returns {Array{string}} - array of files
+		*/
+		files() {
+			return Object.keys(this.data);
+		}
+		/**
+		* returns the file coverage for the specified file.
+		* @param {String} file
+		* @returns {FileCoverage}
+		*/
+		fileCoverageFor(file) {
+			const fc = this.data[file];
+			if (!fc) throw new Error(`No file coverage available for: ${file}`);
+			return fc;
+		}
+		/**
+		* adds a file coverage object to this map. If the path for the object,
+		* already exists in the map, it is merged with the existing coverage
+		* otherwise a new key is added to the map.
+		* @param {FileCoverage} fc the file coverage to add
+		*/
+		addFileCoverage(fc) {
+			const cov = new FileCoverage$1(fc);
+			const { path } = cov;
+			if (this.data[path]) this.data[path].merge(cov);
+			else this.data[path] = cov;
+		}
+		/**
+		* returns the coverage summary for all the file coverage objects in this map.
+		* @returns {CoverageSummary}
+		*/
+		getCoverageSummary() {
+			const ret = new CoverageSummary$1();
+			Object.values(this.data).forEach((fc) => {
+				ret.merge(fc.toSummary());
+			});
+			return ret;
+		}
+	};
+	module.exports = { CoverageMap: CoverageMap$1 };
+}));
+
+//#endregion
+//#region ../../node_modules/.pnpm/istanbul-lib-coverage@3.2.2/node_modules/istanbul-lib-coverage/index.js
+var require_istanbul_lib_coverage = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+	/**
+	* istanbul-lib-coverage exports an API that allows you to create and manipulate
+	* file coverage, coverage maps (a set of file coverage objects) and summary
+	* coverage objects. File coverage for the same file can be merged as can
+	* entire coverage maps.
+	*
+	* @module Exports
+	*/
+	const { FileCoverage } = require_file_coverage();
+	const { CoverageMap } = require_coverage_map();
+	const { CoverageSummary } = require_coverage_summary();
+	module.exports = {
+		createCoverageSummary(obj) {
+			if (obj && obj instanceof CoverageSummary) return obj;
+			return new CoverageSummary(obj);
+		},
+		createCoverageMap(obj) {
+			if (obj && obj instanceof CoverageMap) return obj;
+			return new CoverageMap(obj);
+		},
+		createFileCoverage(obj) {
+			if (obj && obj instanceof FileCoverage) return obj;
+			return new FileCoverage(obj);
+		}
+	};
+	/** classes exported for reuse */
+	module.exports.classes = { FileCoverage };
+}));
+
+//#endregion
+//#region src/helpers/color.ts
+var import_istanbul_lib_coverage = require_istanbul_lib_coverage();
+const getColor = (pct) => {
+	if (pct >= 80) return "rgb(33,181,119)";
+	if (pct >= 50) return "rgb(244,176,27)";
+	return "rgb(245,32,32)";
+};
+
+//#endregion
+//#region src/widgets/SummaryHeader.tsx
+const { Text } = Typography;
+const { useToken } = theme;
+const SummaryNav = ({ value, onClick, reportName }) => {
+	const { token } = useToken();
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "flex",
+			gap: "6px",
+			marginBottom: "6px",
+			fontSize: "16px",
+			fontWeight: "bold"
+		},
+		children: `${reportName}/${value}`.split("/").map((item, index) => {
+			return /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					gap: "6px"
+				},
+				children: [/* @__PURE__ */ jsx("a", {
+					style: {
+						color: token.colorPrimary,
+						cursor: "pointer",
+						textDecoration: "none"
+					},
+					onClick: () => {
+						onClick(value.split("/").slice(0, index).join("/"));
+					},
+					children: item
+				}, index), index === value.split("/").length || !value ? null : /* @__PURE__ */ jsx("span", { children: "/" })]
+			}, index);
+		})
+	});
+};
+const SummaryMetric = ({ data, onlyChange }) => {
+	const t$1 = (v) => v;
+	const summaryTreeItem = { summary: data };
 	return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", {
-		ref,
 		style: {
-			height: "300px",
-			border: "1px solid #000"
-		}
+			display: "flex",
+			gap: "6px",
+			marginBottom: "6px",
+			maxWidth: "1000px",
+			flexWrap: "wrap"
+		},
+		children: Object.entries(summaryTreeItem.summary).sort(([key1], [key2]) => {
+			const order = [
+				"statements",
+				"branches",
+				"functions",
+				"lines",
+				"changestatements"
+			];
+			return order.indexOf(key1) - order.indexOf(key2);
+		}).filter(([key]) => (onlyChange ? ["statements", "changestatements"] : [
+			"statements",
+			"branches",
+			"functions",
+			"lines",
+			"changestatements"
+		]).includes(key)).map(([key, value]) => {
+			return /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					gap: "3px",
+					alignItems: "center"
+				},
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						style: {
+							fontWeight: "600",
+							fontSize: "14px"
+						},
+						children: [value.pct, "%"]
+					}),
+					/* @__PURE__ */ jsxs(Text, {
+						style: { fontSize: "14px" },
+						type: "secondary",
+						children: [t$1(`${key}`), ":"]
+					}),
+					/* @__PURE__ */ jsxs(Tag, {
+						bordered: false,
+						children: [
+							value.covered,
+							"/",
+							value.total
+						]
+					})
+				]
+			}, key);
+		})
 	}) });
+};
+const SummaryBar = ({ pct }) => {
+	return /* @__PURE__ */ jsx("div", { style: {
+		height: "8px",
+		width: "100%",
+		marginBottom: "6px",
+		backgroundColor: getColor(pct)
+	} });
+};
+const SummaryHeader = ({ value, onSelect, data, reportName, onlyChange }) => {
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsx(SummaryNav, {
+			reportName,
+			value,
+			onClick: onSelect
+		}),
+		/* @__PURE__ */ jsx(SummaryMetric, {
+			data,
+			onlyChange
+		}),
+		/* @__PURE__ */ jsx(SummaryBar, { pct: data.statements.pct })
+	] });
+};
+var SummaryHeader_default = SummaryHeader;
+
+//#endregion
+//#region src/widgets/SummaryList.tsx
+const t = (msg) => msg;
+const SummaryList = ({ dataSource, onSelect, filenameKeywords, style, onlyChange }) => {
+	return /* @__PURE__ */ jsx("div", {
+		style,
+		children: /* @__PURE__ */ jsx(ConfigProvider, {
+			theme: { token: { borderRadius: 0 } },
+			children: /* @__PURE__ */ jsx(Table, {
+				bordered: true,
+				pagination: { defaultPageSize: 15 },
+				size: "small",
+				dataSource,
+				rowKey: "path",
+				columns: [
+					{
+						title: t("Files"),
+						key: "path",
+						dataIndex: "path",
+						render(text) {
+							return /* @__PURE__ */ jsx("a", {
+								style: {
+									width: "420px",
+									display: "block",
+									overflowWrap: "break-word"
+								},
+								onClick: () => {
+									onSelect(text);
+								},
+								children: /* @__PURE__ */ jsx(Highlighter, {
+									highlightClassName: "YourHighlightClass",
+									searchWords: [filenameKeywords],
+									autoEscape: true,
+									textToHighlight: text
+								})
+							});
+						}
+					},
+					{
+						title: t("Total"),
+						key: "total",
+						dataIndex: ["statements", "total"],
+						sorter(a, b) {
+							return a.statements.total - b.statements.total;
+						}
+					},
+					{
+						title: t("Covered"),
+						key: "covered",
+						dataIndex: ["statements", "covered"],
+						sorter(a, b) {
+							return a.statements.covered - b.statements.covered;
+						}
+					},
+					{
+						title: t("Change Statements"),
+						key: "changestatements",
+						dataIndex: ["changestatements"],
+						width: "220px",
+						render(_) {
+							_ = _ || {
+								pct: 100,
+								total: 0,
+								covered: 0
+							};
+							return /* @__PURE__ */ jsxs("div", {
+								style: {
+									display: "flex",
+									alignItems: "center"
+								},
+								children: [/* @__PURE__ */ jsx(Progress, {
+									percent: _.pct,
+									strokeLinecap: "butt",
+									size: "small",
+									strokeColor: getColor(_.pct),
+									style: {
+										width: "100px",
+										paddingRight: "5px",
+										fontSize: "10px"
+									},
+									status: "normal"
+								}), /* @__PURE__ */ jsxs("span", {
+									style: { fontSize: "10px" },
+									children: [
+										"(",
+										`${_.covered}/${_.total}`,
+										")"
+									]
+								})]
+							});
+						}
+					},
+					{
+						title: `${t("Coverage")} %`,
+						width: "240px",
+						key: "c",
+						sorter: (a, b) => {
+							return a.statements.pct - b.statements.pct;
+						},
+						dataIndex: ["statements", "pct"],
+						render(text) {
+							return /* @__PURE__ */ jsx(Progress, {
+								percent: text,
+								strokeLinecap: "butt",
+								size: "small",
+								strokeColor: getColor(text),
+								style: { paddingRight: "5px" },
+								status: "normal"
+							});
+						}
+					}
+				].filter((c) => c.key !== "changestatements" || c.key === "changestatements" && onlyChange)
+			})
+		})
+	});
+};
+var SummaryList_default = SummaryList;
+
+//#endregion
+//#region src/widgets/TopControl.tsx
+const TopControl = ({ total, showMode, onChangeShowMode, onChangeKeywords, filenameKeywords, onChangeOnlyChange, onlyChange }) => {
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			marginBottom: "6px",
+			justifyContent: "space-between",
+			alignItems: "center"
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			style: {
+				display: "flex",
+				gap: "6px",
+				flexDirection: "column"
+			},
+			children: /* @__PURE__ */ jsxs(Space, { children: [/* @__PURE__ */ jsx(Segmented, {
+				size: "small",
+				value: showMode,
+				defaultValue: showMode,
+				onChange: (v) => {
+					onChangeShowMode(v);
+				},
+				options: [{
+					label: "Code Tree",
+					value: "tree"
+				}, {
+					label: "File List",
+					value: "list"
+				}]
+			}), /* @__PURE__ */ jsx("span", {
+				style: { fontSize: "14px" },
+				children: /* @__PURE__ */ jsxs("span", {
+					style: { marginBottom: "6px" },
+					children: [
+						total,
+						" ",
+						"Total Files"
+					]
+				})
+			})] })
+		}), /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center"
+			},
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: "6px"
+					},
+					children: [/* @__PURE__ */ jsxs(Typography.Text, {
+						type: "secondary",
+						style: { fontSize: "12px" },
+						children: [
+							"Only Changed",
+							":",
+							" "
+						]
+					}), /* @__PURE__ */ jsx(Switch, {
+						checked: onlyChange,
+						size: "small",
+						onChange: onChangeOnlyChange
+					})]
+				}),
+				/* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+				/* @__PURE__ */ jsx(Input, {
+					placeholder: "Enter the file path to search",
+					value: filenameKeywords,
+					style: { width: "240px" },
+					size: "small",
+					onChange: (val) => {
+						onChangeKeywords(val.target.value);
+					}
+				})
+			]
+		})]
+	}), /* @__PURE__ */ jsx(Divider, { style: {
+		margin: "0",
+		marginBottom: "6px"
+	} })] });
+};
+var TopControl_default = TopControl;
+
+//#endregion
+//#region src/helpers/generateCoreDataForEachComponent.ts
+function checkSummaryOnlyChange(item, onlyChange) {
+	if (onlyChange === false) return true;
+	if (onlyChange && item.change) return true;
+	return false;
 }
-var CoverageDetail_default = CanyonReport$1;
+function checkSummaryKeywords(item, keywords) {
+	return item.path.toLowerCase().includes(keywords.toLowerCase());
+}
+function checkStartValue(item, startValue) {
+	return item.path.toLowerCase().includes(startValue.toLowerCase());
+}
+const generateCoreDataForEachComponent = ({ dataSource, filenameKeywords, value, onlyChange }) => {
+	const listDataSource = Object.values(dataSource).filter((item) => checkStartValue(item, value) && checkSummaryOnlyChange(item, onlyChange) && checkSummaryKeywords(item, filenameKeywords));
+	const aaaa = genSummaryTreeItem(value, listDataSource.reduce((acc, cur) => {
+		acc[cur.path] = cur;
+		return acc;
+	}, {}));
+	return {
+		treeDataSource: aaaa.children.map((item) => {
+			return {
+				path: item.path,
+				...item.summary
+			};
+		}),
+		rootDataSource: {
+			path: aaaa.path,
+			...aaaa.summary
+		},
+		listDataSource
+	};
+};
 
 //#endregion
-//#region src/helpers/add.ts
-function add(a, b) {
-	return a + b;
+//#region src/widgets/SummaryTree.tsx
+function checkSuffix(str) {
+	console.log(str);
+	return true;
 }
+const SummaryTree = ({ dataSource, onSelect, style, onlyChange }) => {
+	const t$1 = (res) => res;
+	return /* @__PURE__ */ jsx("div", {
+		style,
+		children: /* @__PURE__ */ jsx(ConfigProvider, {
+			theme: { token: { borderRadius: 0 } },
+			children: /* @__PURE__ */ jsx(Table, {
+				rowKey: "path",
+				bordered: true,
+				pagination: false,
+				size: "small",
+				dataSource,
+				columns: [
+					{
+						title: t$1("Files"),
+						key: "path",
+						dataIndex: "path",
+						render(text) {
+							return /* @__PURE__ */ jsxs("a", {
+								style: {
+									display: "flex",
+									gap: "6px"
+								},
+								onClick: () => {
+									onSelect(text);
+								},
+								children: [/\.(js|jsx|ts|tsx|vue)$/.test(text) && checkSuffix(text) ? /* @__PURE__ */ jsx(FileOutlined, { style: { fontSize: "16px" } }) : /* @__PURE__ */ jsx(FolderFilled, { style: { fontSize: "16px" } }), text.split("/").at(-1)]
+							});
+						}
+					},
+					{
+						title: t$1("Total"),
+						key: "total",
+						dataIndex: ["statements", "total"],
+						sorter(a, b) {
+							return a.statements.total - b.statements.total;
+						}
+					},
+					{
+						title: t$1("Covered"),
+						key: "covered",
+						dataIndex: ["statements", "covered"],
+						sorter(a, b) {
+							return a.statements.covered - b.statements.covered;
+						}
+					},
+					{
+						title: t$1("Change Statements"),
+						key: "changestatements",
+						dataIndex: ["changestatements"],
+						width: "220px",
+						render(_) {
+							_ = _ || {
+								pct: 100,
+								total: 0,
+								covered: 0
+							};
+							return /* @__PURE__ */ jsxs("div", {
+								style: {
+									display: "flex",
+									alignItems: "center"
+								},
+								children: [/* @__PURE__ */ jsx(Progress, {
+									percent: _.pct,
+									strokeLinecap: "butt",
+									size: "small",
+									strokeColor: getColor(_.pct),
+									style: {
+										width: "100px",
+										paddingRight: "5px",
+										fontSize: "10px"
+									},
+									status: "normal"
+								}), /* @__PURE__ */ jsxs("span", {
+									style: { fontSize: "10px" },
+									children: [
+										"(",
+										`${_.covered}/${_.total}`,
+										")"
+									]
+								})]
+							});
+						}
+					},
+					{
+						title: `${t$1("Coverage")} %`,
+						width: "240px",
+						key: "c",
+						dataIndex: ["statements", "pct"],
+						sorter(a, b) {
+							return a.statements.pct - b.statements.pct;
+						},
+						render(text) {
+							return /* @__PURE__ */ jsx(Progress, {
+								percent: text,
+								strokeLinecap: "butt",
+								size: "small",
+								strokeColor: getColor(text),
+								style: { paddingRight: "5px" },
+								status: "normal"
+							});
+						}
+					}
+				].filter((c) => c.key !== "changestatements" || c.key === "changestatements" && onlyChange)
+			})
+		})
+	});
+};
+var SummaryTree_default = SummaryTree;
+
+//#endregion
+//#region src/components/RIf.tsx
+const RIf = ({ condition, children }) => {
+	return /* @__PURE__ */ jsx(Fragment, { children: condition ? /* @__PURE__ */ jsx(Fragment, { children }) : null });
+};
+var RIf_default = RIf;
+
+//#endregion
+//#region src/widgets/CoverageDetail.tsx
+function CanyonReport$1({ fileContent, fileCoverage, fileCodeChange }) {
+	const ref = useRef(null);
+	useEffect(() => {
+		if (ref.current) {
+			const dom = ref.current;
+			const options = {
+				value: fileContent,
+				language: "javascript"
+			};
+			if (window.monaco?.editor && dom) window.monaco.editor.create(dom, options);
+		}
+	}, []);
+	return /* @__PURE__ */ jsxs("div", { children: [JSON.stringify(fileCodeChange || []), /* @__PURE__ */ jsx("div", {
+		ref,
+		style: { height: "calc(100vh - 150px)" }
+	})] });
+}
+var CoverageDetail_default = CanyonReport$1;
 
 //#endregion
 //#region src/CanyonReport.tsx
-const CanyonReport = ({ value, name, dataSource }) => {
-	console.log(add(1, 2));
-	return /* @__PURE__ */ jsxs("div", { children: [
-		/* @__PURE__ */ jsx("h1", { children: name }),
-		/* @__PURE__ */ jsxs("p", { children: ["Selected file: ", value] }),
-		/* @__PURE__ */ jsxs("p", { children: [
-			"一共",
-			dataSource.length,
-			"文件"
-		] }),
-		/* @__PURE__ */ jsx(CoverageDetail_default, {})
-	] });
+const CanyonReport = ({ value, name, dataSource, onSelect }) => {
+	const [_isLoading, _setIsLoading] = useState(false);
+	const [filenameKeywords, setFilenameKeywords] = useState("");
+	const [showMode, setShowMode] = useState("tree");
+	const [fileCoverage, setFileCoverage] = useState({
+		path: "",
+		statementMap: {},
+		fnMap: {},
+		branchMap: {},
+		s: {},
+		f: {},
+		b: {}
+	});
+	const [fileContent, setFileContent] = useState("");
+	const [fileCodeChange, setFileCodeChange] = useState([]);
+	const [onlyChange, setOnlyChange] = useState(Boolean(false));
+	const rootClassName = useMemo(() => `report-scope-${Math.random().toString(36).slice(2, 9)}`, []);
+	function onChangeOnlyChange(v) {
+		setOnlyChange(v);
+	}
+	async function newOnSelect(val) {
+		const res = await onSelect(val);
+		setFileContent(res.fileContent || "");
+		setFileCoverage(res.fileCoverage || {});
+		setFileCodeChange(res.fileCodeChange || "");
+		return res;
+	}
+	useEffect(() => {
+		newOnSelect(value);
+	}, []);
+	const isFile = useMemo(() => {
+		return /\.(js|jsx|ts|tsx|vue)$/.test(value);
+	}, [value]);
+	const mode = useMemo(() => {
+		if (isFile) return "file";
+		return showMode;
+	}, [showMode, value]);
+	const isFileDataReady = useMemo(() => {
+		const hasCoverage = fileCoverage && Object.keys(fileCoverage).length > 0;
+		const hasContent = fileContent.length > 0;
+		return hasCoverage && hasContent;
+	}, [fileCoverage, fileContent]);
+	const { treeDataSource, rootDataSource, listDataSource } = useMemo(() => {
+		console.log(dataSource, "dataSource", "filenameKeywords", filenameKeywords, value);
+		return generateCoreDataForEachComponent({
+			dataSource,
+			filenameKeywords,
+			value,
+			onlyChange
+		});
+	}, [
+		dataSource,
+		value,
+		filenameKeywords,
+		onlyChange
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: rootClassName,
+		children: /* @__PURE__ */ jsxs(ConfigProvider, {
+			theme: { token: {
+				colorPrimary: "#0071c2",
+				borderRadius: 2
+			} },
+			children: [
+				/* @__PURE__ */ jsx("style", { children: `
+          .${rootClassName} .canyon-coverage-detail-spin-wrapper { height: 100%; }
+          .${rootClassName} .canyon-coverage-detail-spin-wrapper > .ant-spin-container { height: 100%; }
+         ` }),
+				/* @__PURE__ */ jsx(TopControl_default, {
+					onlyChange,
+					filenameKeywords,
+					showMode,
+					onChangeShowMode: (val) => {
+						setShowMode(val);
+					},
+					onChangeOnlyChange,
+					total: listDataSource.length,
+					onChangeKeywords: (val) => {
+						setFilenameKeywords(val);
+					}
+				}),
+				/* @__PURE__ */ jsx(SummaryHeader_default, {
+					reportName: name,
+					data: rootDataSource,
+					value,
+					onSelect: newOnSelect,
+					onlyChange
+				}),
+				/* @__PURE__ */ jsx(RIf_default, {
+					condition: mode === "file",
+					children: /* @__PURE__ */ jsx("div", {
+						style: {
+							flex: 1,
+							minHeight: 0,
+							overflow: "auto",
+							height: "100%"
+						},
+						children: /* @__PURE__ */ jsx(Spin, {
+							spinning: !isFileDataReady,
+							wrapperClassName: "canyon-coverage-detail-spin-wrapper",
+							children: /* @__PURE__ */ jsx(RIf_default, {
+								condition: isFileDataReady,
+								children: /* @__PURE__ */ jsx(CoverageDetail_default, {
+									fileContent,
+									fileCoverage,
+									fileCodeChange
+								})
+							})
+						})
+					})
+				}),
+				/* @__PURE__ */ jsxs(Suspense, {
+					fallback: /* @__PURE__ */ jsx("div", {
+						className: "p-8 text-center",
+						children: "Loading..."
+					}),
+					children: [mode === "tree" && /* @__PURE__ */ jsx(SummaryTree_default, {
+						dataSource: treeDataSource,
+						onSelect: newOnSelect,
+						onlyChange
+					}), mode === "list" && /* @__PURE__ */ jsx(SummaryList_default, {
+						dataSource: listDataSource,
+						onSelect: newOnSelect,
+						filenameKeywords,
+						onlyChange
+					})]
+				})
+			]
+		})
+	});
 };
 var CanyonReport_default = CanyonReport;
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@canyonjs/report-component",
   "type": "module",
-  "version": "0.0.1-beta.5",
+  "version": "0.0.1-beta.7",
   "description": "A starter for creating a React component library.",
   "author": "Author Name <author.name@mail.com>",
   "license": "MIT",
@@ -32,6 +32,7 @@
   },
   "devDependencies": {
     "@tsconfig/strictest": "^2.0.8",
+    "@types/istanbul-lib-coverage": "^2.0.6",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
@@ -42,7 +43,12 @@
     "vite": "^7.2.6"
   },
   "dependencies": {
-    "antd": "^6.1.0"
+    "@ant-design/icons": "^6.1.0",
+    "@monaco-editor/react": "^4.7.0",
+    "antd": "^6.1.0",
+    "canyon-data": "2.0.0-beta.36",
+    "monaco-editor": "^0.55.1",
+    "react-highlight-words": "^0.21.0"
   },
   "scripts": {
     "build": "tsdown",