feat: update diff editor

zhangtao25 · zhangtao25 · commit d11c5fa295a0 · 2025-03-06T17:10:54.000+08:00
diff --git a/packages/canyon-backend/src/app.module.ts b/packages/canyon-backend/src/app.module.ts
@@ -18,6 +18,7 @@ import { TypeOrmModule } from "@nestjs/typeorm";
 import { CollectModule } from "./apps/collect/collect.module";
 import { CoveragediskEntity } from "./apps/collect/entity/coveragedisk.entity";
 import { ApolloServerPluginLandingPageLocalDefault } from '@apollo/server/plugin/landingPage/default';
+import {CodeModule} from "./code/code.module";
 
 
 @Module({
@@ -37,6 +38,7 @@ import { ApolloServerPluginLandingPageLocalDefault } from '@apollo/server/plugin
     CoverageModule,
     CodechangeModule,
     SourcecodeModule,
+    CodeModule,
     ServeStaticModule.forRoot({
       rootPath: join(__dirname, "../../canyon-platform", "dist"),
       exclude: ["/graphql"], // 这样就不会触发 path-to-regexp 解析错误
diff --git a/packages/canyon-backend/src/code/code.controller.ts b/packages/canyon-backend/src/code/code.controller.ts
@@ -0,0 +1,44 @@
+import { Controller, Get, Query } from "@nestjs/common";
+import { CodeService } from "./code.service";
+import {Codechange2Service} from "./codechange2.service";
+
+interface CodeResponse {
+  oldContent: string;
+  content: string;
+  additions:number[];
+  compareTarget: string;
+}
+
+@Controller("")
+export class CodeController {
+  constructor(
+    private readonly sourcecodeService: CodeService,
+    private readonly codechange2Service: Codechange2Service
+  ) {}
+  @Get("api/code")
+  async code(@Query() query): Promise<CodeResponse> {
+    const { projectID, sha, filepath } = query;
+
+
+    const codechange = await this.codechange2Service.getCodechange(sha, filepath);
+    const sourcecode = await this.sourcecodeService.getsourcecode(projectID, sha, filepath);
+
+
+    if (codechange.compareTarget ===sha){
+      return {
+        compareTarget: codechange.compareTarget,
+        oldContent: '',
+        content: sourcecode.content,
+        additions: codechange.additions,
+      }
+    } else {
+      const oldSourcecode = await this.sourcecodeService.getsourcecode(projectID, codechange.compareTarget, filepath);
+      return {
+        compareTarget: codechange.compareTarget,
+        oldContent: oldSourcecode.content,
+        content: sourcecode.content,
+        additions: codechange.additions,
+      }
+    }
+  }
+}
diff --git a/packages/canyon-backend/src/code/code.module.ts b/packages/canyon-backend/src/code/code.module.ts
@@ -0,0 +1,11 @@
+import { Module } from "@nestjs/common";
+import { PrismaService } from "../prisma/prisma.service";
+import { CodeService } from "./code.service";
+import {Codechange2Service} from "./codechange2.service";
+import {CodeController} from "./code.controller";
+
+@Module({
+  controllers: [CodeController],
+  providers: [CodeService, PrismaService,Codechange2Service],
+})
+export class CodeModule {}
diff --git a/packages/canyon-backend/src/code/code.service.ts b/packages/canyon-backend/src/code/code.service.ts
@@ -0,0 +1,25 @@
+import { Injectable } from "@nestjs/common";
+import { PrismaService } from "../prisma/prisma.service";
+import { getFileInfo } from "../adapter/gitlab.adapter";
+
+@Injectable()
+export class CodeService {
+  constructor(private readonly prisma: PrismaService) {}
+  async getsourcecode(projectID, sha, filepath): Promise<any> {
+    const gitProvider = await this.prisma.gitProvider.findFirst({
+      where: {
+        id: projectID.split("-")[0],
+      },
+    });
+    // console.log(gitProvider,'gitProvider')
+    return getFileInfo(
+      {
+        projectID: projectID.split("-")[1],
+        filepath: encodeURIComponent(filepath),
+        commitSha: sha,
+      },
+      gitProvider?.privateToken,
+      gitProvider?.url,
+    );
+  }
+}
diff --git a/packages/canyon-backend/src/code/codechange2.service.ts b/packages/canyon-backend/src/code/codechange2.service.ts
@@ -0,0 +1,46 @@
+import { Injectable } from "@nestjs/common";
+import { PrismaService } from "../prisma/prisma.service";
+
+@Injectable()
+export class Codechange2Service {
+  constructor(private readonly prisma: PrismaService) {}
+
+  async getCodechange(sha, filepath) {
+    const { compareTarget } = await this.prisma.coverage
+      .findFirst({
+        where: {
+          sha: sha,
+          covType: "all",
+          projectID: {
+            not: {
+              contains: "-ut",
+            },
+          },
+        },
+      })
+      .then((res) => res || { compareTarget: sha });
+    return this.prisma.codechange
+      .findFirst({
+        where: {
+          compareTarget,
+          sha: sha,
+          path: filepath,
+        },
+      })
+      .then((r) => {
+        if (r) {
+          return r;
+        } else {
+          return {
+            id: "",
+            projectID: "",
+            compareTarget: compareTarget,
+            sha: sha,
+            path: filepath,
+            additions: [],
+            deletions: [],
+          };
+        }
+      });
+  }
+}
diff --git a/packages/canyon-platform/src/pages/index/projects/[id]/commits/[sha]/[...filepath].tsx b/packages/canyon-platform/src/pages/index/projects/[id]/commits/[sha]/[...filepath].tsx
@@ -91,6 +91,7 @@ const Sha = () => {
                 fileContent: res.fileContent,
                 fileCoverage: res.fileCoverage,
                 fileCodeChange: res.fileCodeChange,
+                fileCodeChangeContent: res.fileCodeChangeContent,
               };
             });
           }}
diff --git a/packages/canyon-platform/src/pages/index/projects/[id]/commits/helper/index.ts b/packages/canyon-platform/src/pages/index/projects/[id]/commits/helper/index.ts
@@ -15,7 +15,7 @@ export function handleSelectFile({
   reportID,
 }: HandleSelectFile) {
   const fileContentRequest = axios
-    .get(`/api/sourcecode`, {
+    .get(`/api/code`, {
       params: {
         projectID: projectID,
         sha: sha,
@@ -52,6 +52,7 @@ export function handleSelectFile({
       fileContent: getDecode(fileContent.content),
       fileCoverage: fileCoverage,
       fileCodeChange: fileCodeChange.additions || [],
+      fileCodeChangeContent: getDecode(fileContent.oldContent),
     };
   });
 }
diff --git a/packages/canyon-report/src/components/report.tsx b/packages/canyon-report/src/components/report.tsx
@@ -15,6 +15,7 @@ const onSelectDefault = () => {
     fileContent: "",
     fileCoverage: emptyFileCoverageData,
     fileCodeChange: [],
+    fileCodeChangeContent: "",
   });
 };
 
@@ -38,6 +39,7 @@ const Report: FC<ReportProps> = ({
     b: {},
   });
   const [fileContent, setFileContent] = useState<string>("");
+  const [fileCodeChangeContent, setFileCodeChangeContent] = useState<string>("");
   const [fileCodeChange, setFileCodeChange] = useState<number[]>([]);
   const [onlyChange, setOnlyChange] = useState(Boolean(defaultOnlyShowChanged));
 
@@ -46,6 +48,7 @@ const Report: FC<ReportProps> = ({
     setFileContent(res.fileContent);
     setFileCoverage(res.fileCoverage);
     setFileCodeChange(res.fileCodeChange);
+    setFileCodeChangeContent(res.fileCodeChangeContent);
     return res;
   }
 
@@ -143,6 +146,7 @@ const Report: FC<ReportProps> = ({
         Object.keys(fileCoverage).length > 0 &&
         Object.keys(fileContent).length > 0 && (
           <FileCoverageDetail
+            fileCodeChangeContent={fileCodeChangeContent}
             fileContent={fileContent}
             fileCodeChange={fileCodeChange}
             fileCoverage={fileCoverage}
diff --git a/packages/canyon-report/src/components/types.ts b/packages/canyon-report/src/components/types.ts
@@ -8,6 +8,7 @@ export interface ReportProps {
     fileCoverage: FileCoverageData;
     fileContent: string;
     fileCodeChange: number[];
+    fileCodeChangeContent: string;
   }>;
   defaultOnlyShowChanged: boolean;
 }
diff --git a/packages/canyon-report/src/components/widgets/FileCoverageDetail.tsx b/packages/canyon-report/src/components/widgets/FileCoverageDetail.tsx
@@ -1,5 +1,5 @@
 import { FC, useEffect, useMemo, useRef, useState } from "react";
-import { Editor } from "@monaco-editor/react";
+import { DiffEditor, Editor } from "@monaco-editor/react";
 
 // import * as monaco from "monaco-editor";
 import {
@@ -14,20 +14,21 @@ const { useToken } = theme;
 const FileCoverageDetail: FC<{
   fileContent: string;
   fileCodeChange: number[];
+  fileCodeChangeContent: string;
   fileCoverage: any;
-}> = ({ fileContent, fileCoverage, fileCodeChange }) => {
+}> = ({ fileContent, fileCoverage, fileCodeChange, fileCodeChangeContent }) => {
   const { token } = useToken();
   const { lines } = coreFn(fileCoverage, fileContent);
 
   const linesState = useMemo(() => {
     return lines.map((line, index) => {
       return {
         lineNumber: index + 1,
-        change: fileCodeChange.includes(index + 1),
+        change: false,
         hit: line.executionNumber,
       };
     });
-  }, [lines, fileCodeChange]);
+  }, [lines]);
 
   const lineNumbersMinChars = useMemo(() => {
     const maxHit = Math.max(...linesState.map((line) => line.hit));
@@ -62,7 +63,20 @@ const FileCoverageDetail: FC<{
   }
   useEffect(() => {
     if (editor) {
-      editor?.deltaDecorations?.(
+      let needDeltaDecorationsEditor = null;
+
+      if (fileCodeChangeContent) {
+        const originalEditor = editor.getOriginalEditor();
+        originalEditor.updateOptions({
+          lineNumbers: false,
+        });
+        const modifiedEditor = editor.getModifiedEditor();
+        needDeltaDecorationsEditor = modifiedEditor;
+      } else {
+        needDeltaDecorationsEditor = editor;
+      }
+
+      needDeltaDecorationsEditor?.deltaDecorations?.(
         [], // oldDecorations 每次清空上次标记的
         decorations.map(
           ({ inlineClassName, startLine, startCol, endLine, endCol }) => ({
@@ -91,36 +105,70 @@ const FileCoverageDetail: FC<{
         // border: "1px solid " + token.colorBorder,
       }}
     >
-      <Editor
-        value={fileContent}
-        theme={token.colorBgBase === "#000" ? "nightOwl" : "vs"}
-        height={"calc(100vh - 200px)"}
-        // height={`${18 * (lineCount + 1)}px`}
-        language={"javascript"}
-        onMount={handleEditorDidMount}
-        options={{
-          lineHeight: 18,
-          lineNumbers: (lineNumber) => {
-            return lineNumbers(
-              lineNumber,
-              linesState,
-              token.colorBgBase === "#000",
-            );
-          },
-          lineNumbersMinChars: lineNumbersMinChars,
-          readOnly: true,
-          folding: false,
-          minimap: { enabled: false },
-          scrollBeyondLastLine: false,
-          showUnused: false,
-          fontSize: 12,
-          fontFamily: "IBMPlexMono",
-          scrollbar: {
-            // handleMouseWheel: false,
-          },
-          contextmenu: false,
-        }}
-      />
+      {fileCodeChangeContent ? (
+        <DiffEditor
+          original={fileCodeChangeContent}
+          modified={fileContent}
+          // theme={"vs-dark"}
+          height={"calc(100vh - 200px)"}
+          // height={`${18 * (lineCount + 1)}px`}
+          language={"javascript"}
+          onMount={handleEditorDidMount}
+          options={{
+            lineHeight: 18,
+            lineNumbers: (lineNumber) => {
+              return lineNumbers(
+                lineNumber,
+                linesState,
+                token.colorBgBase === "#000",
+              );
+            },
+            lineNumbersMinChars: lineNumbersMinChars,
+            readOnly: true,
+            folding: false,
+            minimap: { enabled: false },
+            scrollBeyondLastLine: false,
+            showUnused: false,
+            fontSize: 12,
+            fontFamily: "IBMPlexMono",
+            scrollbar: {
+              // handleMouseWheel: false,
+            },
+            contextmenu: false,
+          }}
+        />
+      ) : (
+        <Editor
+          value={fileContent}
+          theme={token.colorBgBase === "#000" ? "nightOwl" : "vs"}
+          height={"calc(100vh - 200px)"}
+          // height={`${18 * (lineCount + 1)}px`}
+          language={"javascript"}
+          onMount={handleEditorDidMount}
+          options={{
+            lineHeight: 18,
+            lineNumbers: (lineNumber) => {
+              return lineNumbers(
+                lineNumber,
+                linesState,
+                token.colorBgBase === "#000",
+              );
+            },
+            lineNumbersMinChars: lineNumbersMinChars,
+            readOnly: true,
+            folding: false,
+            minimap: { enabled: false },
+            scrollBeyondLastLine: false,
+            showUnused: false,
+            fontSize: 12,
+            fontFamily: "IBMPlexMono",
+            scrollbar: {
+              // handleMouseWheel: false,
+            },
+            contextmenu: false,
+          }}
+        />
+      )}
     </div>
   );
 };

Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,7 @@ export interface ReportProps {`
`8`	`8`	`fileCoverage: FileCoverageData;`
`9`	`9`	`fileContent: string;`
`10`	`10`	`fileCodeChange: number[];`
	`11`	`+ fileCodeChangeContent: string;`
`11`	`12`	`}>;`
`12`	`13`	`defaultOnlyShowChanged: boolean;`
`13`	`14`	`}`