ui: 优化资源加载

packages/ui-default/pages/problem_detail.page.jsx

@@ -1,12 +1,9 @@
 import yaml from 'js-yaml';
 import { getScoreColor } from '@hydrooj/utils/lib/status';
-import * as echarts from 'echarts';
 import { NamedPage } from 'vj/misc/Page';
-import { ActionDialog } from 'vj/components/dialog';
 import { downloadProblemSet } from 'vj/components/zipDownloader';
 import loadReactRedux from 'vj/utils/loadReactRedux';
 import delay from 'vj/utils/delay';
-import base64 from 'vj/utils/base64';
 
 class ProblemPageExtender {
   constructor() {
@@ -208,6 +205,53 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
     } catch (e) { }
   }
 
+  async function initChart() {
+    if (!Object.keys(UiContext.pdoc.stats || {}).length) {
+      $('#submission-status-placeholder').parent().hide();
+      return;
+    }
+    const echarts = await import('echarts');
+    const $status = document.getElementById('submission-status-placeholder');
+    const statusChart = echarts.init($status);
+    statusChart.setOption({
+      tooltip: { trigger: 'item' },
+      series: [
+        {
+          name: 'Submissions',
+          type: 'pie',
+          radius: '70%',
+          label: { show: false },
+          labelLine: { show: false },
+          data: [
+            { value: UiContext.pdoc.stats.TLE, name: 'TLE' },
+            { value: UiContext.pdoc.stats.AC, name: 'AC' },
+            { value: UiContext.pdoc.stats.MLE, name: 'MLE' },
+            { value: UiContext.pdoc.stats.WA, name: 'WA' },
+            { value: UiContext.pdoc.stats.RE, name: 'RE' },
+            { value: UiContext.pdoc.stats.CE, name: 'CE' },
+            { value: UiContext.pdoc.stats.SE, name: 'SE' },
+            { value: UiContext.pdoc.stats.IGN, name: 'IGN' },
+          ],
+        },
+      ],
+    });
+    const $score = document.getElementById('submission-score-placeholder');
+    const x = Array.from({ length: 101 }, (v, i) => i).filter((i) => UiContext.pdoc.stats[`s${i}`]);
+    const scoreChart = echarts.init($score);
+    scoreChart.setOption({
+      tooltip: { trigger: 'item' },
+      xAxis: { data: x },
+      yAxis: {},
+      series: [{
+        data: x.map((i) => ({
+          value: UiContext.pdoc.stats[`s${i}`],
+          itemStyle: { color: getScoreColor(i) },
+        })),
+        type: 'bar',
+      }],
+    });
+  }
+
   $(document).on('click', '[name="problem-sidebar__open-scratchpad"]', (ev) => {
     enterScratchpadMode();
     ev.preventDefault();
@@ -222,50 +266,7 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
   });
   $('[name="problem-sidebar__download').on('click', handleClickDownloadProblem);
   if (UiContext.pdoc.config?.type === 'subjective') loadSubjective();
-
-  if (pagename === 'contest_detail_problem') return;
-  if (!Object.keys(UiContext.pdoc.stats || {}).length) {
-    $('#submission-status-placeholder').parent().hide();
-    return;
-  }
-  const $status = document.getElementById('submission-status-placeholder');
-  const statusChart = echarts.init($status);
-  statusChart.setOption({
-    tooltip: { trigger: 'item' },
-    series: [
-      {
-        name: 'Submissions',
-        type: 'pie',
-        radius: [10, 70],
-        roseType: 'radius',
-        data: [
-          { value: UiContext.pdoc.stats.TLE, name: 'TLE' },
-          { value: UiContext.pdoc.stats.AC, name: 'AC' },
-          { value: UiContext.pdoc.stats.MLE, name: 'MLE' },
-          { value: UiContext.pdoc.stats.WA, name: 'WA' },
-          { value: UiContext.pdoc.stats.RE, name: 'RE' },
-          { value: UiContext.pdoc.stats.CE, name: 'CE' },
-          { value: UiContext.pdoc.stats.SE, name: 'SE' },
-          { value: UiContext.pdoc.stats.IGN, name: 'IGN' },
-        ],
-      },
-    ],
-  });
-  const $score = document.getElementById('submission-score-placeholder');
-  const x = Array.from({ length: 101 }, (v, i) => i).filter((i) => UiContext.pdoc.stats[`s${i}`]);
-  const scoreChart = echarts.init($score);
-  scoreChart.setOption({
-    tooltip: { trigger: 'item' },
-    xAxis: { data: x },
-    yAxis: {},
-    series: [{
-      data: x.map((i) => ({
-        value: UiContext.pdoc.stats[`s${i}`],
-        itemStyle: { color: getScoreColor(i) },
-      })),
-      type: 'bar',
-    }],
-  });
+  if (pagename !== 'contest_detail_problem') initChart();
 });
 
 export default page;

packages/ui-default/pages/problem_main.page.js

@@ -16,11 +16,8 @@ const dirtyCategories = [];
 const selections = [];
 
 function setDomSelected($dom, selected) {
-  if (selected) {
-    $dom.addClass('selected');
-  } else {
-    $dom.removeClass('selected');
-  }
+  if (selected) $dom.addClass('selected');
+  else $dom.removeClass('selected');
 }
 
 async function updateSelection(sendRequest = true) {
@@ -113,9 +110,7 @@ function buildCategoryFilter() {
     }
   });
   $(document).on('click', '.widget--category-filter__category-tag', (ev) => {
-    if (ev.shiftKey || ev.metaKey || ev.ctrlKey) {
-      return;
-    }
+    if (ev.shiftKey || ev.metaKey || ev.ctrlKey) return;
     const category = $(ev.currentTarget).text();
     const treeItem = categories[category];
     // the effect should be cancelSelect if it is shown as selected when clicking
@@ -135,9 +130,7 @@ function buildCategoryFilter() {
     ev.preventDefault();
   });
   $(document).on('click', '.widget--category-filter__subcategory-tag', (ev) => {
-    if (ev.shiftKey || ev.metaKey || ev.ctrlKey) {
-      return;
-    }
+    if (ev.shiftKey || ev.metaKey || ev.ctrlKey) return;
     const subcategory = $(ev.currentTarget).text();
     const category = $(ev.currentTarget).attr('data-category');
     const treeItem = categories[category].children[subcategory];
@@ -151,12 +144,8 @@ function buildCategoryFilter() {
 function parseCategorySelection() {
   UiContext.currentCategory.split(' ').forEach((cline) => {
     const [category, subcategory] = cline.split(',');
-    if (!categories[category]) {
-      return;
-    }
-    if (subcategory && !categories[category].children[subcategory]) {
-      return;
-    }
+    if (!categories[category]) return;
+    if (subcategory && !categories[category].children[subcategory]) return;
     if (!subcategory) {
       categories[category].select = true;
       dirtyCategories.push({ type: 'category', category });

packages/ui-default/pages/user_detail.page.js

@@ -1,27 +1,16 @@
 import Clipboard from 'clipboard';
-import * as echarts from 'echarts';
-import moment from 'moment-timezone';
+import * as timeago from 'timeago.js';
 import { NamedPage } from 'vj/misc/Page';
 import substitute from 'vj/utils/substitute';
 import Notification from 'vj/components/notification';
 import i18n from 'vj/utils/i18n';
 import base64 from 'vj/utils/base64';
 
-const page = new NamedPage('user_detail', async () => {
-  $('[name="profile_contact_copy"]').get().forEach((el) => {
-    const data = $(el).attr('data-content');
-    const decoded = base64.decode(data);
-    const clip = new Clipboard(el, { text: () => decoded });
-    clip.on('success', () => {
-      Notification.success(substitute(i18n('"{data}" copied to clipboard!'), { data: decoded }), 2000);
-    });
-    clip.on('error', () => {
-      Notification.error(substitute(i18n('Copy "{data}" failed :('), { data: decoded }));
-    });
-  });
+async function initChart() {
   const history = UiContext.udoc?.ratingHistory || [];
   while (history.length > 30) history.shift();
   while (history.length < 30) history.unshift(1500);
+  const echarts = await import('echarts');
   const $dom = document.getElementById('rating-placeholder');
   const chart = echarts.init($dom, undefined);
   chart.setOption({
@@ -35,7 +24,7 @@ const page = new NamedPage('user_detail', async () => {
       right: '1%',
       bottom: '10%',
     },
-    xAxis: { data: history.map((x, i) => moment().add(-30 + i, 'days').fromNow()) },
+    xAxis: { data: history.map((x, i) => timeago.format(new Date().getTime() + (-30 + i) * 1000 * 3600 * 24, i18n('timeago_locale'))) },
     yAxis: { type: 'value', scale: true },
     toolbox: {
       right: 10,
@@ -47,31 +36,29 @@ const page = new NamedPage('user_detail', async () => {
     visualMap: {
       show: false,
       pieces: [{
-        lte: 1000,
+        lte: 2000,
         color: '#AC3B2A',
       }, {
-        gt: 1000,
-        lte: 1200,
+        gt: 2000,
+        lte: 4000,
         color: '#AA069F',
       }, {
-        gt: 1200,
-        lte: 1400,
+        gt: 4000,
+        lte: 7000,
         color: '#FD0100',
       }, {
-        gt: 1400,
-        lte: 1600,
+        gt: 7000,
+        lte: 12000,
         color: '#FC7D02',
       }, {
-        gt: 1600,
-        lte: 1900,
+        gt: 12000,
+        lte: 18000,
         color: '#FBDB0F',
       }, {
-        gt: 1900,
+        gt: 18000,
         color: '#93CE07',
       }],
-      outOfRange: {
-        color: '#999',
-      },
+      outOfRange: { color: '#999' },
     },
     series: {
       name: 'Rating',
@@ -79,6 +66,21 @@ const page = new NamedPage('user_detail', async () => {
       data: history.map((i) => Math.floor(i)),
     },
   });
+}
+
+const page = new NamedPage('user_detail', () => {
+  $('[name="profile_contact_copy"]').get().forEach((el) => {
+    const data = $(el).attr('data-content');
+    const decoded = base64.decode(data);
+    const clip = new Clipboard(el, { text: () => decoded });
+    clip.on('success', () => {
+      Notification.success(substitute(i18n('"{data}" copied to clipboard!'), { data: decoded }), 2000);
+    });
+    clip.on('error', () => {
+      Notification.error(substitute(i18n('Copy "{data}" failed :('), { data: decoded }));
+    });
+  });
+  initChart();
 });
 
 export default page;