修改

src/TUIKit/TUIComponents/container/TUIChat/components/message-custom.vue

@@ -257,7 +257,7 @@ a {
   }
 
   .notice-message {
-    max-width: 376px;
+    width: 376px;
     cursor: pointer;
     .notice-title {
       display: flex;
@@ -265,7 +265,7 @@ a {
       padding-bottom: 6px;
       span {
         font-weight: 600;
-        font-size: 16px;
+        font-size: 14Px;
         color: #198CFE;
         line-height: 24px;
       }
@@ -278,7 +278,7 @@ a {
       }
     }
     .content {
-      font-size: 16px;
+      font-size: 14Px;
       color: #131415;
       line-height: 24px;
       .content-title {

src/TUIKit/TUIComponents/container/TUIChat/components/message-reference.vue

@@ -116,7 +116,6 @@ const MessageReference = defineComponent({
       data.allMessageID = props.allMessageID;
       data.type = props.type;
 
-      console.log(data, '-----------------')
     });
     watch(
       () => props.referenceForShow,

src/TUIKit/TUIComponents/container/TUIChat/manage-components/manage.vue

@@ -67,7 +67,7 @@
           <li @click.stop="setTab('notification')">
             <aside>
               <label>{{ $t(`TUIChat.manage.群公告`) }}</label>
-              <article>{{ conversation.groupProfile.notification }}</article>
+              <!-- <article>{{ conversation.groupProfile.notification }}</article> -->
             </aside>
             <i class="icon icon-right end"></i>
           </li>

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/replies/replies-item.vue

@@ -14,7 +14,19 @@
         <div class="content content-in">
           <MessageText v-if="message.messageType === constant.typeText || message.type === TIM.TYPES.MSG_TEXT || !isRoot" :data="handleTextMessageShowContext(isRoot ? message : { payload: { text: message?.messageAbstract } })" />
           <span v-if="message.messageType === constant.typeCustom || message.type === TIM.TYPES.MSG_CUSTOM">
-            {{ handleCustomMessageShowContext(message)?.custom }}
+            <div class="notice-message" @click="handleNotice" v-if="isCustom.businessID === constant.TC_GROUP_NOTICE">
+              <div class="notice-title">
+                <i class="iconNotice"></i>
+                <span>群公告</span>
+              </div>
+              <div class="content">
+                <div class="content-title">
+                {{isCustom.msgTitle}}
+                </div>
+                <div class="content-text">{{isCustom.msgContent}}</div>
+              </div>
+            </div>
+            <span v-else>{{ handleCustomMessageShowContext(message)?.custom }}</span>
           </span>
           <img v-if="message.messageType === constant.typeImage || message.type === TIM.TYPES.MSG_IMAGE" class="message-img" :src="message?.payload?.imageInfoArray[1].url" />
           <div v-if="message.messageType === constant.typeAudio || message.type === TIM.TYPES.MSG_AUDIO" class="message-audio" :style="`width: ${message?.payload?.second * 10 + 40}Px`">
@@ -45,9 +57,13 @@ import { defineComponent, reactive, toRefs, watchEffect } from "vue";
 import { Message } from "../../interface";
 import { handleTextMessageShowContext, handleCustomMessageShowContext, handleFileMessageShowContext } from "../../utils/utils";
 import { MessageText, MessageEmojiReact } from "../../components";
+import TUIMessage from "../../../../components/messageTUI/index";
 import { caculateTimeago } from "../../../utils";
+import { JSONToObject } from '../../utils/utils'
 import constant from "../../../constant";
 import TIM from "../../../../../TUICore/tim/index";
+import { eventGlobal } from "@/helpers";
+import { imGroupNoticeDetail } from "../../../../../api";
 const RepliesItem = defineComponent({
   props: {
     message: {
@@ -70,6 +86,7 @@ const RepliesItem = defineComponent({
   setup(props: any, ctx: any) {
     const data = reactive({
       message: {} as Message,
+      isCustom: {},
       isH5: false,
       url: "",
       isRoot: false,
@@ -78,14 +95,37 @@ const RepliesItem = defineComponent({
     });
     watchEffect(() => {
       data.message = props.message;
+       const {
+        payload
+      } = props.message;
+      console.log(payload, 'payload')
+      data.isCustom = payload?.data || ' ';
+      data.isCustom = JSONToObject(payload?.data);
       data.isH5 = props.isH5;
       data.isRoot = props.isRoot;
       if (data.message.type === TIM.TYPES.MSG_FACE) {
         data.url = `https://web.sdk.qcloud.com/im/assets/face-elem/${data.message?.payload?.data}@2x.png`;
       }
+
     });
+
+    const handleNotice = async () => {
+      // if(!data.isCustom?.msgId) return
+      // try {
+      //   await imGroupNoticeDetail(data.isCustom?.msgId)
+      //   eventGlobal.emit('handleNotice', data.isCustom?.msgId)
+      // } catch(e) {
+      //   //
+      //   TUIMessage({
+      //     message: e.message,
+      //     isH5: false,
+      //     type: "error",
+      //   });
+      // }
+    }
     return {
       ...toRefs(data),
+      handleNotice,
       handleTextMessageShowContext,
       handleCustomMessageShowContext,
       handleFileMessageShowContext,
@@ -99,6 +139,38 @@ export default RepliesItem;
 .replies-item {
   padding: 15px;
   width: auto;
+
+  .notice-message {
+    max-width: 376px;
+    cursor: pointer;
+    .notice-title {
+      display: flex;
+      align-items: center;
+      padding-bottom: 6px;
+      span {
+        font-weight: 600;
+        font-size: 14Px;
+        color: #198CFE;
+        line-height: 24px;
+      }
+            
+      .iconNotice {
+        width: 18px;
+        height: 18px;
+        display: inline-block;
+        margin-right: 6px;
+      }
+    }
+    .content {
+      font-size: 14Px;
+      color: #131415;
+      line-height: 24px;
+      .content-title {
+        font-weight: 600;
+        
+      }
+    }
+  }
   &-normal {
     padding: 12.8px 15px 0 17px;
     .message-bubble {

src/TUIKit/TUIComponents/container/TUIChat/utils/utils.ts

@@ -393,9 +393,20 @@ export function handleCustomMessageShowContext(item: any) {
       item.payload.data = JSON.stringify(payloadObj);
     }
   }
+  let callingMessage: any = {}
+  try {
+    callingMessage = JSONToObject(item?.payload?.data);
+  } catch (error) {
+    callingMessage = {};
+  }
+  let customContent = extractCallingInfoFromMessage(item) || `[${t("message.custom.自定义消息")}]`
+
+  if(callingMessage?.businessID === "TC_GROUP_NOTICE") {
+    customContent = '[群公告]'
+  }
   return {
     message: item,
-    custom: extractCallingInfoFromMessage(item) || `[${t("message.custom.自定义消息")}]`,
+    custom: customContent,
   };
 }