【重要性能问题】解决点击online功能测试，重新加载首页问题 issues/I5XBZF

src\settings\registerThirdComp.ts
src\components\jeecg\comment\useComment.ts
src\components\jeecg\comment\MyComment.vue
src\components\jeecg\comment\DataLogList.vue
src\components\jeecg\comment\CommentList.vue

src/components/jeecg/comment/CommentList.vue

@@ -75,15 +75,15 @@
   /**
    * 评论列表
    */
-  import { defineComponent, ref, onMounted, watch, watchEffect } from 'vue';
+  import { defineComponent, ref, onMounted, watch, watchEffect ,inject } from 'vue';
   import { propTypes } from '/@/utils/propTypes';
-  import dayjs from 'dayjs';
-  import 'dayjs/locale/zh.js';
-  import relativeTime from 'dayjs/plugin/relativeTime';
-  import customParseFormat from 'dayjs/plugin/customParseFormat';
-  dayjs.locale('zh');
-  dayjs.extend(relativeTime);
-  dayjs.extend(customParseFormat);
+  // import dayjs from 'dayjs';
+  // import relativeTime from 'dayjs/plugin/relativeTime';
+  // import customParseFormat from 'dayjs/plugin/customParseFormat';
+  // dayjs.locale('zh');
+  // dayjs.extend(relativeTime);
+  // dayjs.extend(customParseFormat);
+  
   import { MessageOutlined } from '@ant-design/icons-vue';
   import { Comment, Tooltip } from 'ant-design-vue';
   import { useUserStore } from '/@/store/modules/user';
@@ -113,6 +113,8 @@
       const { createMessage } = useMessage();
       const dataList = ref([]);
       const { userInfo } = useUserStore();
+      const dayjs = inject('$dayjs')
+      
       /**
        * 获取当前用户名称
        */
@@ -245,7 +247,8 @@
         }
       });
 
-      const { getHtml } = useEmojiHtml();
+      const storageEmojiIndex = inject('$globalEmojiIndex')
+      const { getHtml } = useEmojiHtml(storageEmojiIndex);
       const bottomCommentRef = ref()
       function handleClickItem(){
         bottomCommentRef.value.changeActive()

src/components/jeecg/comment/DataLogList.vue

@@ -28,16 +28,15 @@
 <script>
   import { PlusOutlined, EditOutlined } from '@ant-design/icons-vue';
   import { getModalHeight, getLogList } from './useComment'
-  import {ref, watchEffect} from 'vue'
+  import {inject, ref, watchEffect} from 'vue'
   import { propTypes } from '/@/utils/propTypes';
   import { Tooltip } from 'ant-design-vue';
-  import dayjs from 'dayjs';
-  import 'dayjs/locale/zh.js';
-  import relativeTime from 'dayjs/plugin/relativeTime';
-  import customParseFormat from 'dayjs/plugin/customParseFormat';
-  dayjs.locale('zh');
-  dayjs.extend(relativeTime);
-  dayjs.extend(customParseFormat);
+  // import dayjs from 'dayjs';
+  // import relativeTime from 'dayjs/plugin/relativeTime';
+  // import customParseFormat from 'dayjs/plugin/customParseFormat';
+  // dayjs.locale('zh');
+  // dayjs.extend(relativeTime);
+  // dayjs.extend(customParseFormat);
   
   export default {
     name: "DataLogList",
@@ -52,6 +51,7 @@
       datetime:  propTypes.number.def(1),
     },
     setup(props){
+      const dayjs = inject('$dayjs')
       const winHeight = getModalHeight();
       const height = ref(300);
       height.value = winHeight - 46 - 57 -53 - 30;

src/components/jeecg/comment/MyComment.vue

@@ -45,14 +45,13 @@
 </template>
 
 <script lang="ts">
-  import { ref, watch, computed } from 'vue';
+  import {ref, watch, computed, inject} from 'vue';
   import { propTypes } from '/@/utils/propTypes';
   import { UserAddOutlined, PaperClipOutlined, SmileOutlined } from '@ant-design/icons-vue';
   import { Tooltip } from 'ant-design-vue';
   import UserSelectModal from '/@/components/Form/src/jeecg/components/modal/UserSelectModal.vue';
   import { useModal } from '/@/components/Modal';
   import UploadChunk from './UploadChunk.vue';
-  import { Picker } from 'emoji-mart-vue-fast/src';
   import 'emoji-mart-vue-fast/css/emoji-mart.css';
   import { useEmojiHtml } from './useComment';
 
@@ -79,7 +78,6 @@
       PaperClipOutlined,
       UploadChunk,
       SmileOutlined,
-      Picker,
     },
     props: {
       inner: propTypes.bool.def(false),
@@ -222,7 +220,8 @@
         visibleEmoji.value = !visibleEmoji.value;
       }
       
-      const { emojiIndex, getHtml } = useEmojiHtml();
+      const emojiIndex = inject('$globalEmojiIndex')
+      const { getHtml } = useEmojiHtml(emojiIndex);
 
       const commentHtml = computed(() => {
         let temp = myComment.value;

src/components/jeecg/comment/useComment.ts

@@ -13,8 +13,6 @@ import txt from '/@/assets/svg/fileType/txt.svg';
 import word from '/@/assets/svg/fileType/word.svg';
 import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
 import { createImgPreview } from '/@/components/Preview';
-import {EmojiIndex} from "emoji-mart-vue-fast/src";
-import data from "emoji-mart-vue-fast/data/apple.json";
 
 enum Api {
   list = '/sys/comment/listByForm',
@@ -365,15 +363,8 @@ export function useFileList() {
 /**
  * 用于emoji渲染
  */
-export function useEmojiHtml(){
+export function useEmojiHtml(globalEmojiIndex){
   const COLONS_REGEX = new RegExp('([^:]+)?(:[a-zA-Z0-9-_+]+:(:skin-tone-[2-6]:)?)','g');
-  let emojisToShowFilter = function() {
-    return true;
-  }
-  let emojiIndex = new EmojiIndex(data, {
-    emojisToShowFilter,
-    exclude:['recent','people','nature','foods','activity','places','objects','symbols','flags']
-  });
 
   function getHtml(text) {
     if(!text){
@@ -384,7 +375,7 @@ export function useEmojiHtml(){
       if (endsWith(before, 'alt="') || endsWith(before, 'data-text="')) {
         return match
       }
-      let emoji = emojiIndex.findEmoji(p2)
+      let emoji = globalEmojiIndex.findEmoji(p2)
       if (!emoji) {
         return match
       }
@@ -403,7 +394,7 @@ export function useEmojiHtml(){
   }
   
   return {
-    emojiIndex,
+    globalEmojiIndex,
     getHtml
   }
 }

src/settings/registerThirdComp.ts

@@ -2,9 +2,36 @@ import type { App } from 'vue';
 import { registerJVxeTable } from '/@/components/jeecg/JVxeTable';
 import { registerJVxeCustom } from '/@/components/JVxeCustom';
 
+import { Picker } from 'emoji-mart-vue-fast/src';
+import { EmojiIndex } from "emoji-mart-vue-fast/src";
+import data from "emoji-mart-vue-fast/data/apple.json";
+
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
 export async function registerThirdComp(app: App) {
   // 注册 JVxeTable 组件
   registerJVxeTable(app);
   // 注册 JVxeTable 自定义组件
   await registerJVxeCustom();
+  //---------------------------------------------------------------------
+  // 注册全局聊天表情包
+  app.component('Picker', Picker);
+  let myEmojiIndex = new EmojiIndex(data, {
+    function() {
+      return true;
+    },
+    exclude:['recent','people','nature','foods','activity','places','objects','symbols','flags']
+  });
+  app.config.globalProperties.$globalEmojiIndex = myEmojiIndex
+  app.provide('$globalEmojiIndex', myEmojiIndex)
+  //---------------------------------------------------------------------
+  // 注册全局dayjs
+  dayjs.locale('zh');
+  dayjs.extend(relativeTime);
+  dayjs.extend(customParseFormat);
+  app.config.globalProperties.$dayjs = dayjs
+  app.provide('$dayjs', dayjs)
+  //---------------------------------------------------------------------
 }