diff --git a/packages/canyon-report/babel.config.js b/packages/canyon-report/babel.config.js
index 810d48fb..6af7345a 100644
--- a/packages/canyon-report/babel.config.js
+++ b/packages/canyon-report/babel.config.js
@@ -4,5 +4,4 @@ module.exports = {
     "@babel/preset-react",
     "@babel/preset-typescript",
   ],
-  plugins: ["istanbul"],
 };
diff --git a/packages/canyon-report/package.json b/packages/canyon-report/package.json
index 56ffc5d6..ccf5fcb6 100755
--- a/packages/canyon-report/package.json
+++ b/packages/canyon-report/package.json
@@ -1,6 +1,6 @@
 {
   "name": "canyon-report",
-  "version": "0.0.8-beta-21",
+  "version": "0.0.8-beta-22",
   "description": "My webpack project",
   "main": "./lib/index.js",
   "bin": "./lib/cli.js",
@@ -21,6 +21,7 @@
     "@ant-design/icons": "^5.5.1",
     "antd": "^5.21.0",
     "axios": "^1.7.7",
+    "canyon-data": "0.1.1-alpha.8",
     "commander": "^12.1.0",
     "istanbul-lib-coverage": "^3.2.2",
     "react": "^18.3.1",
diff --git a/packages/canyon-report/src/App.tsx b/packages/canyon-report/src/App.tsx
index 40be4b51..e5874bda 100644
--- a/packages/canyon-report/src/App.tsx
+++ b/packages/canyon-report/src/App.tsx
@@ -44,7 +44,7 @@ function App() {
   };
 
   return (
-    <div className={"m-5 shadow p-5"}>
+    <div className={'p-2'}>
       <Report dataSource={dataSource} onSelect={onSelect} value={value} />
     </div>
   );
diff --git a/packages/canyon-report/src/components/Report/Report.tsx b/packages/canyon-report/src/components/Report/Report.tsx
index 598b12f2..668583a0 100644
--- a/packages/canyon-report/src/components/Report/Report.tsx
+++ b/packages/canyon-report/src/components/Report/Report.tsx
@@ -6,8 +6,13 @@ import TopControl from "./components/TopControl";
 import FileCoverageDetail from "./components/FileCoverageDetail";
 import { ReportProps } from "./types";
 import { FileCoverageData } from "istanbul-lib-coverage";
-
+import CanyonReportTreeTable from "./components/SummaryTreeTable";
+import { convertTreeDataSource } from "../helpers";
+import { genSummaryTreeItem } from "canyon-data";
 const Report: FC<ReportProps> = ({ dataSource, value, onSelect }) => {
+  // 1.展示模式//tree||list
+  const [showMode, setShowMode] = useState("tree");
+
   const isFile = useMemo(() => {
     return value.includes(".");
   }, [value]);
@@ -35,9 +40,30 @@ const Report: FC<ReportProps> = ({ dataSource, value, onSelect }) => {
     newonSelect(value);
   }, []);
 
+  const { treeDataSource } = useMemo(() => {
+    const summary = dataSource.reduce((acc: any, cur: any) => {
+      acc[cur.path] = cur;
+      return acc;
+    }, {});
+
+    const aaaa = genSummaryTreeItem(value, summary);
+    return {
+      treeDataSource: aaaa.children.map((item) => {
+        return {
+          path: item.path,
+          ...item.summary,
+        };
+      }),
+    };
+  }, [dataSource, value]);
+
   return (
     <div className={""}>
       <TopControl
+        showMode={showMode}
+        onChangeShowMode={(val) => {
+          setShowMode(val);
+        }}
         total={
           dataSource.filter((item) => {
             return item.path.startsWith(value);
@@ -48,6 +74,12 @@ const Report: FC<ReportProps> = ({ dataSource, value, onSelect }) => {
 
       {isFile ? (
         <FileCoverageDetail fileContent={fileContent} />
+      ) : showMode === "tree" ? (
+        <CanyonReportTreeTable
+          dataSource={treeDataSource}
+          loading={false}
+          onSelect={newonSelect}
+        />
       ) : (
         <SummaryListTable
           value={value}
diff --git a/packages/canyon-report/src/components/Report/components/SummaryHeader.tsx b/packages/canyon-report/src/components/Report/components/SummaryHeader.tsx
index f3f5f271..6a6f4ca2 100644
--- a/packages/canyon-report/src/components/Report/components/SummaryHeader.tsx
+++ b/packages/canyon-report/src/components/Report/components/SummaryHeader.tsx
@@ -1,30 +1,30 @@
-// @ts-nocheck
-import React from "react";
+import React, { FC } from "react";
 import { Tag, Typography } from "antd";
-import {getColor} from "../../helpers";
+import { getColor } from "../../helpers";
 const { Text } = Typography;
-const SummaryNav = ({ value, onClick }) => {
+const SummaryNav: FC<{
+  value: string;
+  onClick: (value: string) => void;
+}> = ({ value, onClick }) => {
   console.log(value, "value");
   return (
-    <div className={"flex"}>
-      {value.split("/").map((item, index) => {
+    <div
+      className={"flex gap-1"}
+      style={{ fontSize: "16px", fontWeight: "bold" }}
+    >
+      {("canyon/" + value).split("/").map((item, index) => {
         return (
-          <div>
-            <a
-              className={"text-blue-500 cursor-pointer"}
+          <div key={index} className={"flex gap-1"}>
+            <button
+              className={"text-blue-500 cursor-pointer hover:underline"}
               key={index}
               onClick={() => {
-                onClick(
-                  value
-                    .split("/")
-                    .slice(0, index + 1)
-                    .join("/"),
-                );
+                onClick(value.split("/").slice(0, index).join("/"));
               }}
             >
               {item}
-            </a>
-            <span>/</span>
+            </button>
+            {index === value.split("/").length ? null : <span>/</span>}
           </div>
         );
       })}
@@ -48,7 +48,7 @@ const SummaryMetric = () => {
       <div className={"flex gap-2 mb-3"}>
         {Object.entries(summaryTreeItem.summary).map(([key, value]) => {
           return (
-            <div className={"flex gap-1 items-center"}>
+            <div className={"flex gap-1 items-center"} key={key}>
               <span style={{ fontWeight: "600", fontSize: "14px" }}>
                 {value.pct}%
               </span>
diff --git a/packages/canyon-report/src/components/Report/components/SummaryListTable.tsx b/packages/canyon-report/src/components/Report/components/SummaryListTable.tsx
index 0ac9daca..94f8ca12 100644
--- a/packages/canyon-report/src/components/Report/components/SummaryListTable.tsx
+++ b/packages/canyon-report/src/components/Report/components/SummaryListTable.tsx
@@ -1,5 +1,4 @@
-// @ts-nocheck
-import { Table, Progress } from "antd";
+import { Table, Progress, ConfigProvider } from "antd";
 import React from "react";
 import Highlighter from "react-highlight-words";
 import { getColor } from "../../helpers";
@@ -8,7 +7,13 @@ import { getColor } from "../../helpers";
 const t = (msg) => msg;
 const SummaryListTable = ({ dataSource, onSelect, value }) => {
   return (
-    <div>
+    <ConfigProvider
+      theme={{
+        token: {
+          borderRadius: 0,
+        },
+      }}
+    >
       <Table
         bordered={true}
         pagination={{
@@ -83,7 +88,7 @@ const SummaryListTable = ({ dataSource, onSelect, value }) => {
           },
         ])}
       />
-    </div>
+    </ConfigProvider>
   );
 };
 
diff --git a/packages/canyon-report/src/components/Report/components/SummaryTreeTable.tsx b/packages/canyon-report/src/components/Report/components/SummaryTreeTable.tsx
new file mode 100644
index 00000000..dc27a377
--- /dev/null
+++ b/packages/canyon-report/src/components/Report/components/SummaryTreeTable.tsx
@@ -0,0 +1,100 @@
+import React from "react";
+import { FileOutlined, FolderFilled } from "@ant-design/icons";
+import { ConfigProvider, Progress, Space, Table } from "antd";
+import { getColor } from "../../helpers";
+
+function checkSuffix() {
+  return true;
+}
+
+const CanyonReportTreeTable = ({
+  dataSource,
+  loading,
+  onSelect,
+}) => {
+  const t = (res) => res;
+  return (
+    <div>
+      <ConfigProvider
+        theme={{
+          token: {
+            borderRadius: 0,
+          },
+        }}
+      >
+        <Table
+          loading={loading}
+          bordered={true}
+          pagination={false}
+          size={"small"}
+          dataSource={dataSource}
+          columns={[
+            {
+              title: t("Files"),
+              key: "path",
+              dataIndex: "path",
+              render(text, record) {
+                return (
+                  <a
+                    className={"flex gap-1"}
+                    onClick={() => {
+                      onSelect(text);
+                    }}
+                  >
+                    {text.includes(".") && checkSuffix(text) ? (
+                      <FileOutlined style={{ fontSize: "16px" }} />
+                    ) : (
+                      <FolderFilled style={{ fontSize: "16px" }} />
+                    )}
+                    {text.split("/").at(-1)}
+                  </a>
+                );
+              },
+            },
+
+            {
+              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;
+              },
+            },
+          ].concat([
+            {
+              title: t("Coverage") + " %",
+              width: "300px",
+              key: "c",
+              dataIndex: ["statements", "pct"],
+              sorter(a, b) {
+                return a.statements.pct - b.statements.pct;
+              },
+              render(text) {
+                return (
+                  <Progress
+                    percent={text}
+                    strokeLinecap="butt"
+                    size={"small"}
+                    strokeColor={getColor(text)}
+                    className={"pr-5"}
+                    status={"normal"}
+                  />
+                );
+              },
+            },
+          ])}
+        />
+      </ConfigProvider>
+    </div>
+  );
+};
+
+export default CanyonReportTreeTable;
diff --git a/packages/canyon-report/src/components/Report/components/TopControl.tsx b/packages/canyon-report/src/components/Report/components/TopControl.tsx
index f3ae7bb2..18101ac7 100644
--- a/packages/canyon-report/src/components/Report/components/TopControl.tsx
+++ b/packages/canyon-report/src/components/Report/components/TopControl.tsx
@@ -1,9 +1,8 @@
-// @ts-nocheck
 import React from "react";
-import Icon, { BarsOutlined, SearchOutlined } from "@ant-design/icons";
+import { BarsOutlined, SearchOutlined } from "@ant-design/icons";
 import { Divider, Space, Segmented, Input } from "antd";
 
-const TopControl = ({total}) => {
+const TopControl = ({ total, showMode, onChangeShowMode }) => {
   const t = (msg) => msg;
   return (
     <div>
@@ -11,11 +10,11 @@ const TopControl = ({total}) => {
         <div className={"flex gap-2 flex-col"}>
           <Space>
             <Segmented
-              // value={showMode}
-              // defaultValue={showMode}
-              // onChange={(v) => {
-              //   onChangeShowMode(v);
-              // }}
+              value={showMode}
+              defaultValue={showMode}
+              onChange={(v) => {
+                onChangeShowMode(v);
+              }}
               options={[
                 {
                   label: "Code tree",
@@ -32,10 +31,6 @@ const TopControl = ({total}) => {
 
             <span style={{ fontSize: "14px" }}>
               <span className={"mr-2"}>{total} total files</span>
-              {/*{t("projects.detail.total.files", {msg: numberFiles})}*/}
-              {/*覆盖率提升优先级列表*/}
-              {/*转换生产流量为测试用例*/}
-              {/*<PrepareProdFn/>*/}
             </span>
           </Space>
         </div>
@@ -44,10 +39,8 @@ const TopControl = ({total}) => {
           <Input
             value={""}
             addonBefore={<SearchOutlined />}
-            // placeholder={t("projects.detail.search.placeholder")}
             className={"w-[240px]"}
             size={"small"}
-            // onChange={onChangeOnlyChangeKeywords}
           />
         </div>
       </div>
diff --git a/packages/canyon-report/src/components/helpers/index.ts b/packages/canyon-report/src/components/helpers/index.ts
index 586e4a85..23aba49a 100644
--- a/packages/canyon-report/src/components/helpers/index.ts
+++ b/packages/canyon-report/src/components/helpers/index.ts
@@ -7,3 +7,7 @@ export const getColor = (pct: number) => {
     return "rgb(245,32,32)";
   }
 };
+
+export const convertTreeDataSource = (dataSource) => {
+  return dataSource;
+};