refactor: 升级dayjs，移除 moment 使用 (#2907)

Author: leafage-collb

webfe/package_vue/package.json

@@ -42,7 +42,7 @@
     "connect-history-api-fallback": "^1.3.0",
     "cookie": "^0.3.1",
     "cross-env": "^7.0.3",
-    "dayjs": "^1.8.19",
+    "dayjs": "^1.11.13",
     "echarts": "^3.6.1",
     "enhanced-resolve": "^5.10.0",
     "eventsource-polyfill": "^0.9.6",
@@ -62,7 +62,6 @@
     "lodash": "^4.18.1",
     "markdown-it": "^13.0.2",
     "marked": "^4.0.10",
-    "moment": "^2.18.1",
     "monaco-editor": "0.38.0",
     "node-sass": "^6.0.1",
     "npm-run-all": "~4.1.5",

webfe/package_vue/src/common/datepicker_utils.js

@@ -0,0 +1,34 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making
+ * 蓝鲸智云 - PaaS 平台 (BlueKing - PaaS System) available.
+ * Copyright (C) Tencent. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ *     http://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+ * either express or implied. See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * We undertake not to change the open source license (MIT license) applicable
+ * to the current version of the project delivered to anyone in the future.
+ */
+
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import cookie from 'cookie';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+
+dayjs.extend(relativeTime);
+
+export function setDayjsLocale(language) {
+  const locale = language === 'en' ? 'en' : 'zh-cn';
+  dayjs.locale(locale);
+}
+
+setDayjsLocale(cookie.parse(document.cookie).blueking_language || 'zh-cn');
+
+export default dayjs;

webfe/package_vue/src/common/dayjs.js

@@ -17,32 +17,23 @@
  */
 
 import Vue from 'vue';
-import moment from 'moment';
-import cookie from 'cookie';
+import dayjs from '@/common/dayjs';
 
 // 时间格式过滤器
 Vue.filter('time-smart', function (value, type) {
-  let language = cookie.parse(document.cookie).blueking_language || 'zh-cn';
-
-  if (['zh-cn', 'zh-CN', 'None', 'none', ''].includes(language)) {
-    language = 'zh-cn';
-  }
-  // moment日期中文显示
-  moment.locale(language);
-
   let formatTime;
   const curYear = new Date().getFullYear();
   switch (type) {
     case 'fromNow':
       // 距离当前时间多久
-      formatTime = moment(value).startOf('minute').fromNow();
+      formatTime = dayjs(value).startOf('minute').fromNow();
       break;
     case 'smartShorten':
       // 当年日期显示：07-25 16:16
-      if (moment(value).format('YYYY') === curYear) {
-        formatTime = moment(value).format('MM-DD HH:mm');
+      if (dayjs(value).format('YYYY') === curYear) {
+        formatTime = dayjs(value).format('MM-DD HH:mm');
       } else {
-        formatTime = moment(value).format('YYYY-MM-DD HH:mm');
+        formatTime = dayjs(value).format('YYYY-MM-DD HH:mm');
       }
       break;
     default:

webfe/package_vue/src/components/filters/SmartTime.js

@@ -19,7 +19,6 @@
 /**
  * @file echarts 图表配置
  */
-// import moment from 'moment'
 import i18n from '@/language/i18n';
 export default {
   pv_uv: {

webfe/package_vue/src/json/analysis-chart-option.js

@@ -19,7 +19,6 @@
 /**
  * @file echarts 图表配置
  */
-// import moment from 'moment'
 import i18n from '@/language/i18n.js';
 export default {
   cpu: {

webfe/package_vue/src/json/instance-chart-option.js

@@ -19,7 +19,6 @@
 /**
  * @file echarts 图表配置
  */
-// import moment from 'moment'
 import i18n from '@/language/i18n';
 export default {
   stat: {

webfe/package_vue/src/json/plugin-overview-options.js

@@ -19,7 +19,6 @@
 /**
  * @file echarts 图表配置
  */
-// import moment from 'moment'
 import i18n from '@/language/i18n';
 
 export default {

webfe/package_vue/src/json/process-chart-option.js

@@ -33,7 +33,6 @@ import $ from 'jquery';
 import '@/common/jquery_tools';
 
 import { bkInfoBox, bkMessage, bkNotify } from 'bk-magic-vue';
-import moment from 'moment';
 import Clipboard from 'clipboard';
 import Directives from '@/directives';
 import '@/utils/dompurify';
@@ -135,7 +134,6 @@ Vue.prototype.GLOBAL = window.GLOBAL_CONFIG;
 
 Vue.prototype.smartTime = SmartTime;
 window.Clipboard = Clipboard;
-window.moment = moment;
 window.showDeployTip = function () {
   Vue.prototype.$paasMessage({
     theme: 'error',

webfe/package_vue/src/main.js

@@ -21,7 +21,7 @@
 */
 import http from '@/api';
 import bartOptions from '@/json/bar_chart_default';
-import moment from 'moment';
+import dayjs from '@/common/dayjs';
 
 // store
 const state = {
@@ -51,7 +51,7 @@ const mutations = {
     }];
     const timestamps = data.timestamps.map((item) => {
       // 时间处理
-      item = moment.unix(item).format('YYYY-MM-DD HH:mm:ss');
+      item = dayjs.unix(item).format('YYYY-MM-DD HH:mm:ss');
       return item.substring(5);
     });
     chartOptions.xAxis.data = timestamps;