ci: fix visual-diff report charset issue in html (#46380)

.github/workflows/visual-regression-diff-finish.yml

@@ -42,7 +42,9 @@ jobs:
             const total = Object.keys(jobs).length;
             if(total === 0) core.setFailed('no jobs found');
 
-            // the name here must be the same as `jobs.xxx.{name}` in preview-build.yml
+            // the name here must be the same as `jobs.xxx.{name}`
+            console.log('visual-diff report job status: %s', jobs['visual-diff report']);
+
             // set output
             core.setOutput('build-success', jobs['visual-diff report'] === 'success');
             core.setOutput('build-failure', jobs['visual-diff report'] === 'failure');
@@ -98,7 +100,7 @@ jobs:
           echo "✅ Install `ali-oss` Finished"
 
           echo "🤖 Uploading"
-          node scripts/visual-regression-upload.js ./visualRegressionReport --ref=pr-${{ steps.pr.outputs.id }}
+          node scripts/visual-regression/upload.js ./visualRegressionReport --ref=pr-${{ steps.pr.outputs.id }}
           echo "✅ Uploaded"
 
           delimiter="$(openssl rand -hex 8)"

.github/workflows/visual-regression-persist-finish.yml

@@ -42,7 +42,9 @@ jobs:
             const total = Object.keys(jobs).length;
             if(total === 0) core.setFailed('no jobs found');
 
-            // the name here must be the same as `jobs.xxx.{name}` in preview-build.yml
+            // the name here must be the same as `jobs.xxx.{name}`
+            console.log('visual-diff report job status: %s', jobs['test image']);
+
             // set output
             core.setOutput('build-success', jobs['test image'] === 'success');
             core.setOutput('build-failure', jobs['test image'] === 'failure');
@@ -93,7 +95,7 @@ jobs:
           echo "✅ Install `ali-oss` Finished"
 
           echo "🤖 Uploading"
-          node scripts/visual-regression-upload.js ./imageSnapshots.tar.gz --ref=${{ github.sha }}
-          node scripts/visual-regression-upload.js ./visual-regression-ref.txt --ref=${{ github.ref_name }}
+          node scripts/visual-regression/upload.js ./imageSnapshots.tar.gz --ref=${{ github.sha }}
+          node scripts/visual-regression/upload.js ./visual-regression-ref.txt --ref=${{ github.ref_name }}
 
           echo "✅ Uploaded"

package.json

@@ -99,7 +99,7 @@
     "token-meta": "tsx scripts/generate-token-meta.ts",
     "tsc": "tsc --noEmit",
     "version": "tsx scripts/generate-version.ts",
-    "visual-regression": "tsx scripts/visual-regression.ts",
+    "visual-regression": "tsx scripts/visual-regression/build.ts",
     "npm-install": "npm install"
   },
   "lint-staged": {

scripts/visual-regression/build.ts

@@ -108,7 +108,15 @@ interface IBadCase {
   filename: string;
 }
 
-function generateReport(badCases: IBadCase[], targetBranch: string, targetRef: string) {
+function md2Html(md: string) {
+  return remark().use(remarkGfm).use(remarkHtml).processSync(md).toString();
+}
+
+function generateReport(
+  badCases: IBadCase[],
+  targetBranch: string,
+  targetRef: string,
+): [string, string] {
   // parse args from -- --pr-id=123
   const argv = minimist(process.argv.slice(2));
   const prId = argv['pr-id'];
@@ -121,11 +129,13 @@ function generateReport(badCases: IBadCase[], targetBranch: string, targetRef: s
   `.trim();
 
   if (badCases.length === 0) {
-    return [
+    const mdStr = [
       commonHeader,
       '------------------------',
       'Congrats! No visual-regression diff found',
     ].join('\n');
+
+    return [mdStr, md2Html(mdStr)];
   }
 
   const htmlReportLink = `${publicPath}/visualRegressionReport/report.html`;
@@ -182,19 +192,13 @@ ${commonHeader}
     }
   }
 
-  const reportHtmlStr = remark()
-    .use(remarkGfm)
-    .use(remarkHtml)
-    .processSync(fullVersionMd)
-    .toString();
-
   // convert fullVersionMd to html
-  return [reportMdStr, reportHtmlStr];
+  return [reportMdStr, md2Html(fullVersionMd)];
 }
 
 async function boot() {
   console.log(chalk.green('Preparing image snapshots from latest `master` branch\n'));
-  const baseImgSourceDir = path.resolve(__dirname, '../imageSnapshots-master');
+  const baseImgSourceDir = path.resolve(__dirname, '../../imageSnapshots-master');
   await fse.ensureDir(baseImgSourceDir);
 
   const targetBranch = 'master';
@@ -203,9 +207,9 @@ async function boot() {
 
   await downloadBaseSnapshots(targetRef, baseImgSourceDir);
 
-  const currentImgSourceDir = path.resolve(__dirname, '../imageSnapshots');
+  const currentImgSourceDir = path.resolve(__dirname, '../../imageSnapshots');
 
-  const reportDir = path.resolve(__dirname, '../visualRegressionReport');
+  const reportDir = path.resolve(__dirname, '../../visualRegressionReport');
   // save diff images(x3) to reportDir
   const diffImgReportDir = path.resolve(reportDir, './images/diff');
   const baseImgReportDir = path.resolve(reportDir, './images/base');
@@ -282,7 +286,13 @@ async function boot() {
   await fse.writeFile(path.join(reportDir, './report.jsonl'), jsonl);
   const [reportMdStr, reportHtmlStr] = generateReport(badCases, targetBranch, targetRef);
   await fse.writeFile(path.join(reportDir, './report.md'), reportMdStr);
-  await fse.writeFile(path.join(reportDir, './report.html'), reportHtmlStr);
+  const htmlTemplate = await fse.readFile(path.join(__dirname, './report-template.html'), 'utf8');
+
+  await fse.writeFile(
+    path.join(reportDir, './report.html'),
+    htmlTemplate.replace('{{reportContent}}', reportHtmlStr),
+    'utf-8',
+  );
 
   await tar.c(
     {

scripts/visual-regression/report-template.html

@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link href="https://unpkg.com/antd@latest/dist/reset.css" rel="stylesheet" />
+    <style>
+      body {
+        padding-top: 16px;
+        padding-bottom: 16px;
+      }
+      /* Table Styles */
+      table {
+        width: 100%;
+        border-collapse: collapse;
+      }
+
+      th,
+      td {
+        padding: 8px;
+        text-align: left;
+        border-bottom: 1px solid #ddd;
+      }
+
+      th {
+        background-color: #f2f2f2;
+      }
+
+      tr:nth-child(even) {
+        background-color: #f9f9f9;
+      }
+
+      /* Hover Effect */
+      tr:hover {
+        background-color: #e5e5e5;
+      }
+
+      /* Responsive Table */
+      @media screen and (max-width: 600px) and (min-width: 1px) {
+        table {
+          border: 0;
+        }
+
+        th,
+        td {
+          display: block;
+          padding: 6px;
+          border: none;
+        }
+
+        th {
+          text-align: left;
+          background-color: transparent;
+        }
+
+        tr:nth-child(even) {
+          background-color: transparent;
+        }
+
+        tr:nth-child(odd) {
+          background-color: transparent;
+        }
+
+        tr:hover {
+          background-color: transparent;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    {{reportContent}}
+  </body>
+</html>