ui: 优化资源加载

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;