feat: update

canyon-project · Sep 25, 2024 · ec7be0d · ec7be0d
1 parent 14c4449
commit ec7be0d
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 10 deletions.
diff --git a/packages/canyon-report/src/App.tsx b/packages/canyon-report/src/App.tsx
@@ -36,7 +36,6 @@ const dynamicLoadingSource = (val) => {
 };
 
 function App() {
-  // 当前激活的路径，默认值是哈希值
   const [value, setValue] = useState(window.location.hash.slice(1));
   const onSelect = (val) => {
     setValue(val);
@@ -45,8 +44,7 @@ function App() {
   };
 
   return (
-    <div>
-      当前激活的路径：{value}
+    <div className={"m-5 shadow p-5"}>
       <Report dataSource={dataSource} onSelect={onSelect} value={value} />
     </div>
   );

diff --git a/packages/canyon-report/src/components/Report/components/FileCoverageDetail.tsx b/packages/canyon-report/src/components/Report/components/FileCoverageDetail.tsx
@@ -9,7 +9,7 @@ const FileCoverageDetail = ({ fileContent }) => {
   useEffect(() => {
     codeToHtml(fileContent || "", {
       lang: "javascript",
-      theme: "vitesse-dark",
+      theme: "light-plus",
     }).then((r) => {
       console.log(r);
       setHtmlContent(r);

diff --git a/packages/canyon-report/src/components/Report/components/SummaryHeader.tsx b/packages/canyon-report/src/components/Report/components/SummaryHeader.tsx
@@ -1,5 +1,7 @@
 // @ts-nocheck
 import React from "react";
+import { Tag,Typography } from "antd";
+const { Text } = Typography;
 const SummaryNav = ({ value, onClick }) => {
   console.log(value, "value");
   return (
@@ -30,7 +32,37 @@ const SummaryNav = ({ value, onClick }) => {
 };
 
 const SummaryMetric = () => {
-  return <div>SummaryMetric</div>;
+  const t = (key) => key;
+  const summaryTreeItem = {
+    summary: {
+      files: { total: 1, covered: 1, pct: 100 },
+      functions: { total: 1, covered: 1, pct: 100 },
+      lines: { total: 1, covered: 1, pct: 100 },
+      branches: { total: 1, covered: 1, pct: 100 },
+    },
+  };
+
+  return (
+    <div>
+      <div className={"flex gap-2 mb-3"}>
+        {Object.entries(summaryTreeItem.summary).map(([key, value]) => {
+          return (
+            <div className={"flex gap-1 items-center"}>
+              <span style={{ fontWeight: "600", fontSize: "14px" }}>
+                {value.pct}%
+              </span>
+              <Text style={{ fontSize: "14px" }} type={"secondary"}>
+                {t("projects." + key)}:
+              </Text>
+              <Tag bordered={false}>
+                {value.covered}/{value.total}
+              </Tag>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
 };
 
 const SummaryBar = () => {};

diff --git a/packages/canyon-report/src/components/Report/components/TopControl.tsx b/packages/canyon-report/src/components/Report/components/TopControl.tsx
@@ -18,21 +18,20 @@ const TopControl = () => {
               // }}
               options={[
                 {
-                  label: t("projects.detail.code.tree"),
+                  label: "Code tree",
                   value: "tree",
                   // icon: <Icon component={PhTreeView}/>,
                 },
                 {
-                  label: t("projects.detail.file.list"),
+                  label: "File list",
                   value: "list",
                   icon: <BarsOutlined />,
                 },
               ]}
             />
 
             <span style={{ fontSize: "14px" }}>
-              899
-              {/*<span className={'mr-2'}>{numberFiles}</span>*/}
+              <span className={"mr-2"}>899 total files</span>
               {/*{t("projects.detail.total.files", {msg: numberFiles})}*/}
               {/*覆盖率提升优先级列表*/}
               {/*转换生产流量为测试用例*/}
@@ -43,7 +42,7 @@ const TopControl = () => {
 
         <div className={"flex items-center"}>
           <Input
-            value={"keywords"}
+            value={""}
             addonBefore={<SearchOutlined />}
             // placeholder={t("projects.detail.search.placeholder")}
             className={"w-[240px]"}
@@ -52,6 +51,7 @@ const TopControl = () => {
           />
         </div>
       </div>
+      <Divider style={{ margin: "0", marginBottom: "10px" }} />
     </div>
   );
 };