feat: update

canyon-project · Oct 7, 2024 · e962960 · e962960
1 parent efdf1e1
commit e962960
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 55 deletions.
diff --git a/packages/canyon-platform/src/components/CanyonReport/ShikiDetail.tsx b/packages/canyon-platform/src/components/CanyonReport/ShikiDetail.tsx
@@ -87,41 +87,43 @@ const ShikiDetail = ({ defaultValue, filecoverage, theme }) => {
     }
   });
 
-  createHighlighterCoreInstance().then(({ codeToHtml }) => {
-    try {
-      const res = codeToHtml(defaultValue, {
-        lang: "javascript",
-        theme: theme === "light" ? "light-plus" : "tokyo-night",
-        decorations: mergeIntervals(
-          [...statementDecorations, ...fnDecorations].filter((item) => {
-            // defaultValue
-            if (item[0] >= item[1]) {
-              return false;
-            } else if (item[1] > defaultValue.length) {
-              return false;
-            } else {
-              return item[0] < item[1];
-            }
+  useEffect(() => {
+    createHighlighterCoreInstance().then(({ codeToHtml }) => {
+      try {
+        const res = codeToHtml(defaultValue, {
+          lang: "javascript",
+          theme: theme === "light" ? "light-plus" : "tokyo-night",
+          decorations: mergeIntervals(
+            [...statementDecorations, ...fnDecorations].filter((item) => {
+              // defaultValue
+              if (item[0] >= item[1]) {
+                return false;
+              } else if (item[1] > defaultValue.length) {
+                return false;
+              } else {
+                return item[0] < item[1];
+              }
+            }),
+          ).map(([start, end]) => {
+            return {
+              start,
+              end,
+              properties: { class: "content-class-no-found" },
+            };
           }),
-        ).map(([start, end]) => {
-          return {
-            start,
-            end,
-            properties: { class: "content-class-no-found" },
-          };
-        }),
-      });
-      setContent(res);
-    } catch (err) {
-      console.log("覆盖率着色失败", err);
-      const r = codeToHtml(defaultValue, {
-        lang: "javascript",
-        theme: theme === "light" ? "light-plus" : "tokyo-night",
-      });
-
-      setContent(r);
-    }
-  });
+        });
+        setContent(res);
+      } catch (err) {
+        console.log("覆盖率着色失败", err);
+        const r = codeToHtml(defaultValue, {
+          lang: "javascript",
+          theme: theme === "light" ? "light-plus" : "tokyo-night",
+        });
+
+        setContent(r);
+      }
+    });
+  }, []);
 
   return (
     <div className={"px-[12px] overflow-x-auto w-full"}>

diff --git a/packages/canyon-report/src/components/Report/Report.tsx b/packages/canyon-report/src/components/Report/Report.tsx
@@ -15,8 +15,8 @@ const Report: FC<ReportProps> = ({
   onSelect,
   reportName,
 }) => {
-  const [keywords,setKeywords] = useState('');
-  const [range,setRange] = useState([0,100]);
+  const [filenameKeywords, setFilenameKeywords] = useState("");
+  const [range, setRange] = useState([0, 100]);
   const [showMode, setShowMode] = useState("tree");
   const [loading, setLoading] = useState(false);
 
@@ -49,13 +49,20 @@ const Report: FC<ReportProps> = ({
     newonSelect(value);
   }, []);
 
-  const { treeDataSource, rootDataSource } = useMemo(() => {
+  const { treeDataSource, rootDataSource, listDataSource } = useMemo(() => {
+    // 1.过滤
+
+    const listDataSource = dataSource.filter((item) =>
+      item.path.toLowerCase().includes(filenameKeywords.toLowerCase()),
+    );
     // @ts-ignore
-    const summary = dataSource.reduce((acc: never, cur: never) => {
+    const summary = listDataSource
       // @ts-ignore
-      acc[cur.path] = cur;
-      return acc;
-    }, {});
+      .reduce((acc: never, cur: never) => {
+        // @ts-ignore
+        acc[cur.path] = cur;
+        return acc;
+      }, {});
 
     // @ts-ignore
     const aaaa = genSummaryTreeItem(value, summary);
@@ -70,12 +77,14 @@ const Report: FC<ReportProps> = ({
         path: aaaa.path,
         ...aaaa.summary,
       },
+      listDataSource: listDataSource,
     };
-  }, [dataSource, value]);
+  }, [dataSource, value, filenameKeywords]);
 
   return (
     <div className={""}>
       <TopControl
+        filenameKeywords={filenameKeywords}
         showMode={showMode}
         onChangeShowMode={(val) => {
           setShowMode(val);
@@ -85,6 +94,9 @@ const Report: FC<ReportProps> = ({
             return item.path.startsWith(value);
           }).length
         }
+        onChangeKeywords={(val) => {
+          setFilenameKeywords(val);
+        }}
       />
       <SummaryHeader
         reportName={reportName}
@@ -104,8 +116,9 @@ const Report: FC<ReportProps> = ({
         />
       ) : (
         <SummaryListTable
+          filenameKeywords={filenameKeywords}
           value={value}
-          dataSource={dataSource}
+          dataSource={listDataSource}
           onSelect={newonSelect}
         />
       )}

diff --git a/packages/canyon-report/src/components/Report/components/FileCoverageDetail.tsx b/packages/canyon-report/src/components/Report/components/FileCoverageDetail.tsx
@@ -13,12 +13,29 @@ const FileCoverageDetail: FC<{ fileContent: string }> = ({ fileContent }) => {
       setHtmlContent(html);
     });
   }, [fileContent]);
+
+  const lines = fileContent.split("\n");
   return (
-    <div
-      dangerouslySetInnerHTML={{
-        __html: htmlContent,
-      }}
-    ></div>
+    <div className={"flex"}>
+      <div>
+        {lines.map((lin, index) => {
+          return (
+            <div
+              className={"h-[24px]"}
+              style={{ lineHeight: "24px", fontSize: "12px" }}
+            >
+              {index + 1}
+            </div>
+          );
+        })}
+      </div>
+
+      <div
+        dangerouslySetInnerHTML={{
+          __html: htmlContent,
+        }}
+      />
+    </div>
   );
 };
 

diff --git a/packages/canyon-report/src/components/Report/components/SummaryHeader.tsx b/packages/canyon-report/src/components/Report/components/SummaryHeader.tsx
@@ -8,7 +8,6 @@ const SummaryNav: FC<{
   value: string;
   onClick: (value: string) => void;
 }> = ({ value, onClick, reportName }) => {
-  console.log(value, "value");
   return (
     <div
       className={"flex gap-1"}

diff --git a/packages/canyon-report/src/components/Report/components/SummaryListTable.tsx b/packages/canyon-report/src/components/Report/components/SummaryListTable.tsx
@@ -9,7 +9,8 @@ const SummaryListTable: FC<{
   dataSource: (CoverageSummaryData & { path: string })[];
   onSelect: (path: string) => void;
   value: string;
-}> = ({ dataSource, onSelect, value }) => {
+  filenameKeywords: string;
+}> = ({ dataSource, onSelect, value, filenameKeywords }) => {
   return (
     <ConfigProvider
       theme={{
@@ -27,6 +28,7 @@ const SummaryListTable: FC<{
         dataSource={dataSource.filter((item) => {
           return item.path.startsWith(value);
         })}
+        rowKey={"path"}
         columns={[
           {
             title: t("Files"),
@@ -42,7 +44,7 @@ const SummaryListTable: FC<{
                 >
                   <Highlighter
                     highlightClassName="YourHighlightClass"
-                    searchWords={["keywords"]}
+                    searchWords={[filenameKeywords]}
                     autoEscape={true}
                     textToHighlight={text}
                   />

diff --git a/packages/canyon-report/src/components/Report/components/SummaryTreeTable.tsx b/packages/canyon-report/src/components/Report/components/SummaryTreeTable.tsx
@@ -24,6 +24,7 @@ const CanyonReportTreeTable: FC<{
         }}
       >
         <Table
+          rowKey={"path"}
           bordered={true}
           pagination={false}
           size={"small"}

diff --git a/packages/canyon-report/src/components/Report/components/TopControl.tsx b/packages/canyon-report/src/components/Report/components/TopControl.tsx
@@ -6,8 +6,16 @@ import PhTreeViewIcon from "../icons/PhTreeView";
 const TopControl: FC<{
   total: number;
   showMode: string;
-  onChangeShowMode: (v: string) => void;
-}> = ({ total, showMode, onChangeShowMode }) => {
+  filenameKeywords: string;
+  onChangeShowMode: (mode: string) => void;
+  onChangeKeywords: (word: string) => void;
+}> = ({
+  total,
+  showMode,
+  onChangeShowMode,
+  onChangeKeywords,
+  filenameKeywords,
+}) => {
   return (
     <div>
       <div className={"flex mb-2 justify-between items-center"}>
@@ -42,10 +50,13 @@ const TopControl: FC<{
 
         <div className={"flex items-center"}>
           <Input
-            value={""}
+            value={filenameKeywords}
             addonBefore={<SearchOutlined />}
             className={"w-[240px]"}
             size={"small"}
+            onChange={(val) => {
+              onChangeKeywords(val.target.value);
+            }}
           />
         </div>
       </div>

diff --git a/packages/canyon-report/src/index.css b/packages/canyon-report/src/index.css
@@ -5,7 +5,11 @@
 
 .shiki > code {
   font-size: 12px;
-  line-height: 20px;
+  line-height: 24px;
+}
+
+.line{
+  /*background-color: #0071c2;*/
 }
 
 a{