feat(remote_judger): make details more beautiful

remote_judger/src/providers/codeforces.ts

@@ -420,13 +420,22 @@ export default class CodeforcesProvider implements IBasicProvider {
         const details =
           '<div>' +
           '<div class="border-bottom p-3">' +
-          `<p><b>Contest:</b> ${stripHtml(body.contestName).result}</p>` +
+          '<table class="table w-auto mb-0 caption-top">' +
-          `<p><b>Problem:</b> ${stripHtml(body.problemName).result}</p>` +
+          '<caption class="fw-bold text-body mb-1 pt-0">远端信息</caption>' +
-          `<p><b>Remote submission:</b> <a href="https://codeforces.com${body.href}" target="_blank">${id}</a></p>` +
+          '<tbody class="border-top">' +
-          `<p><b>Remote account:</b> <a href="https://codeforces.com/profile/${remote_handle}" target="_blank">${remote_handle}</a></p>` +
+          Object.entries({
-          `<p class="mb-0"><b>Verdict:</b> ${
+            比赛: stripHtml(body.contestName).result,
-            stripHtml(body.verdict).result
+            题目: stripHtml(body.problemName).result,
-          }</p>` +
+            提交记录: `<a href="https://codeforces.com${body.href}" target="_blank">${id}</a>`,
+            账号: `<a href="https://codeforces.com/profile/${remote_handle}" target="_blank">${remote_handle}</a>`,
+            状态: stripHtml(body.verdict).result,
+          })
+            .map(
+              o => `<tr><td class="fw-bold">${o[0]}</td><td>${o[1]}</td></tr>`
+            )
+            .join('') +
+          '</tbody>' +
+          '</table>' +
           '</div>' +
           `<tests>${tests.join('\n')}</tests>` +
           '</div>';

remote_judger/src/providers/loj.ts

@@ -7,6 +7,7 @@ import { IBasicProvider, RemoteAccount, USER_AGENT } from '../interface';
 import Logger from '../utils/logger';
 import { normalize, VERDICT } from '../verdict';
 import htmlspecialchars from '../utils/htmlspecialchars';
+import { stripHtml } from 'string-strip-html';
 
 proxy(superagent);
 const logger = new Logger('remote/loj');
@@ -461,13 +462,26 @@ export default class LibreojProvider implements IBasicProvider {
 
         details +=
           '<div class="border-bottom p-3">' +
-          `<p><b>Problem:</b> #${body.meta.problem.displayId}. ${body.meta.problemTitle}</p>` +
+          '<table class="table w-auto mb-0 caption-top">' +
-          `<p><b>Remote submission:</b> <a href="https://loj.ac/s/${id}" target="_blank">${id}</a></p>` +
+          '<caption class="fw-bold text-body mb-1 pt-0">远端信息</caption>' +
-          `<p><b>Remote submit time:</b> ${new Date(
+          '<tbody class="border-top">' +
-            body.meta.submitTime
+          Object.entries({
-          ).toLocaleString('zh-CN')}</p>` +
+            题目: `<a href="https://loj.ac/p/${
-          `<p><b>Remote account:</b> <a href="https://loj.ac/user/${body.meta.submitter.id}" target="_blank">${body.meta.submitter.username}</a></p>` +
+              body.meta.problem.displayId
-          `<p class="mb-0"><b>Verdict:</b> ${status}</p>` +
+            }" target="_blank">#${
+              body.meta.problem.displayId
+            }. ${htmlspecialchars(body.meta.problemTitle)}</a>`,
+            提交记录: `<a href="https://loj.ac/s/${id}" target="_blank">${id}</a>`,
+            提交时间: new Date(body.meta.submitTime).toLocaleString('zh-CN'),
+            账号: `<a href="https://loj.ac/user/${body.meta.submitter.id}" target="_blank">${body.meta.submitter.username}</a>`,
+            状态: status,
+          })
+            .map(
+              o => `<tr><td class="fw-bold">${o[0]}</td><td>${o[1]}</td></tr>`
+            )
+            .join('') +
+          '</tbody>' +
+          '</table>' +
           '</div>';
 
         if (result_show_source) {

remote_judger/src/providers/luogu.ts

@@ -296,13 +296,26 @@ export default class LuoguProvider implements IBasicProvider {
 
         details +=
           '<div class="border-bottom p-3">' +
-          `<p><b>Problem:</b> ${data.problem.pid} ${data.problem.title}</p>` +
+          '<table class="table w-auto mb-0 caption-top">' +
-          `<p><b>Remote submission:</b> <a href="https://www.luogu.com.cn/record/${id}" target="_blank">R${id}</a></p>` +
+          '<caption class="fw-bold text-body mb-1 pt-0">远端信息</caption>' +
-          `<p><b>Remote submit time:</b> ${new Date(
+          '<tbody class="border-top">' +
-            data.submitTime * 1000
+          Object.entries({
-          ).toLocaleString('zh-CN')}</p>` +
+            题目: `<a href="https://www.luogu.com.cn/problem/${
-          `<p><b>Remote account:</b> <a href="https://www.luogu.com.cn/user/${data.user.uid}" target="_blank">${data.user.name}</a></p>` +
+              data.problem.pid
-          `<p class="mb-0"><b>Verdict:</b> ${status}</p>` +
+            }" target="_blank">${data.problem.pid} ${htmlspecialchars(
+              data.problem.title
+            )}</a>`,
+            提交记录: `<a href="https://www.luogu.com.cn/record/${id}" target="_blank">R${id}</a>`,
+            提交时间: new Date(data.submitTime * 1000).toLocaleString('zh-CN'),
+            账号: `<a href="https://www.luogu.com.cn/user/${data.user.uid}" target="_blank">${data.user.name}</a>`,
+            状态: status,
+          })
+            .map(
+              o => `<tr><td class="fw-bold">${o[0]}</td><td>${o[1]}</td></tr>`
+            )
+            .join('') +
+          '</tbody>' +
+          '</table>' +
           '</div>';
 
         if (data.detail.judgeResult.subtasks.length === 1) {