From cecca6df9ca682d64d1520f9696f67ece76b3ea0 Mon Sep 17 00:00:00 2001
From: wangyifeng <812766448@qq.com>
Date: Mon, 19 May 2025 19:56:28 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=BE=A4=E5=85=AC?=
 =?UTF-8?q?=E5=91=8A=E7=A9=BA=E9=A1=B5=E9=9D=A2=E5=92=8C=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=EF=BC=8C=E5=B9=B6=E5=A4=84=E7=90=86=E5=AF=B9?=
 =?UTF-8?q?=E5=BA=94=E7=9A=84=E7=8A=B6=E6=80=81=E5=88=87=E6=8D=A2=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/customModal.vue    |  33 ++++--
 src/components/group/GroupPanel.vue      |  33 ++++--
 src/views/message/inner/IndexContent.vue | 130 ++++++++++++++++++++++-
 3 files changed, 174 insertions(+), 22 deletions(-)

diff --git a/src/components/common/customModal.vue b/src/components/common/customModal.vue
index 6717348..6915374 100644
--- a/src/components/common/customModal.vue
+++ b/src/components/common/customModal.vue
@@ -10,28 +10,32 @@
             {{ title }}
           </template>
           <div class="custom-close-btn" v-if="customCloseBtn">
-            <img src="@/assets/image/icon/close-btn-grey.png" alt="" @click="handleCloseModal"/>
+            <img src="@/assets/image/icon/close-btn-grey.png" alt="" @click="handleCloseModal" />
           </div>
         </div>
       </div>
     </template>
     <slot name="content"></slot>
-    <template #footer v-if="actionBtns.cancelBtn || actionBtns.confirmBtn">
-      <div class="custom-modal-btns">
+    <template #footer v-if="actionBtns?.cancelBtn || actionBtns?.confirmBtn">
+      <div
+        class="custom-modal-btns"
+        :style="props?.customModalBtnsStyle ? props.customModalBtnsStyle : ''"
+      >
         <customBtn
           color="#C7C7C9"
           style="width: 161px; height: 34px;"
           @click="handleCancel"
-          v-if="actionBtns.cancelBtn"
-          >取消</customBtn
+          v-if="actionBtns?.cancelBtn"
+          >{{ actionBtns?.cancelBtn?.text || '取消' }}</customBtn
         >
         <customBtn
           color="#46299D"
           style="width: 161px; height: 34px;"
           @click="handleConfirm"
-          :loading="state.confirmBtnLoading"
-          v-if="actionBtns.confirmBtn"
-          >确定</customBtn
+          :disabled="actionBtns?.confirmBtn?.disabled"
+          :loading="state.confirmBtnLoading && actionBtns?.confirmBtn?.doLoading"
+          v-if="actionBtns?.confirmBtn"
+          >{{ actionBtns?.confirmBtn?.text || '确定' }}</customBtn
         >
       </div>
     </template>
@@ -63,6 +67,11 @@ const props = defineProps({
     // 是否显示自定义关闭按钮
     type: Boolean,
     default: false
+  },
+  customModalBtnsStyle: {
+    // 自定义按钮样式
+    type: String,
+    default: ''
   }
 })
 
@@ -74,12 +83,16 @@ const show = computed({
 })
 
 const handleCancel = () => {
-  show.value = false
+  if (props.actionBtns?.cancelBtn?.hideModal) {
+    show.value = false
+  }
   emit('cancel')
 }
 
 const handleConfirm = () => {
-  state.confirmBtnLoading = true
+  if (props.actionBtns?.confirmBtn?.doLoading) {
+    state.confirmBtnLoading = true
+  }
   emit('confirm', closeLoading)
 }
 
diff --git a/src/components/group/GroupPanel.vue b/src/components/group/GroupPanel.vue
index 2a84f25..5db3975 100644
--- a/src/components/group/GroupPanel.vue
+++ b/src/components/group/GroupPanel.vue
@@ -19,7 +19,12 @@ import UserCardModal from '@/components/user/UserCardModal.vue'
 const userStore = useUserStore()
 const { showUserInfoModal } = useInject()
 
-const emit = defineEmits(['close', 'to-talk', 'handleSearchRecordByConditionModalShow'])
+const emit = defineEmits([
+  'close',
+  'to-talk',
+  'handleSearchRecordByConditionModalShow',
+  'handleGroupNoticeModalShow'
+])
 const props = defineProps({
   gid: {
     type: Number,
@@ -59,8 +64,12 @@ const state = reactive({
   chatSettingOperateHint: '', // 提示信息
   chatSettingOperateSubHint: '', // 次要提示信息
   actionBtns: {
-    confirmBtn: true,
-    cancelBtn: true
+    confirmBtn: {
+      doLoading: true
+    },
+    cancelBtn: {
+      hideModal: true
+    }
   }, // 操作按钮
   showAllMember: false, // 是否显示全部成员
   openGroupMemberSearch: false, //是否开启群成员搜索
@@ -192,9 +201,11 @@ const showChatSettingOperateModal = (type: string) => {
   switch (type) {
     case 'clear':
       state.chatSettingOperateHint = '确定清空聊天记录'
+      state.chatSettingOperateSubHint = ''
       break
     case 'dismiss':
       state.chatSettingOperateHint = '确定解散本群'
+      state.chatSettingOperateSubHint = ''
       break
     case 'quit':
       state.chatSettingOperateHint = '确定退出群聊'
@@ -209,6 +220,7 @@ const showChatSettingOperateModal = (type: string) => {
   }
 }
 
+//点击显示查找聊天记录模态框
 const showSearchRecordByConditionModal = () => {
   emit('handleSearchRecordByConditionModalShow', true)
 }
@@ -243,6 +255,11 @@ const showMemberInfo = (memberItem: any) => {
   state.userInfo = memberItem
   state.isShowUserCardModal = true
 }
+
+//点击显示群公告模态框
+const showGroupNoticeModal = () => {
+  emit('handleGroupNoticeModalShow', true)
+}
 </script>
 <template>
   <section class="el-container is-vertical section">
@@ -402,7 +419,7 @@ const showMemberInfo = (memberItem: any) => {
         </div> -->
 
         <div class="b-box b-box-bottomBorder" style="padding: 0 0 12px;">
-          <div class="block">
+          <div class="block" @click="showGroupNoticeModal" style="cursor: pointer;">
             <div class="title">群公告</div>
             <!-- <div class="text"> -->
             <!-- <n-button type="primary" text> 更多 </n-button> -->
@@ -414,12 +431,8 @@ const showMemberInfo = (memberItem: any) => {
       </div>
 
       <div class="info-box">
-        <div
-          class="b-box b-box-bottomBorder"
-          @click="showSearchRecordByConditionModal"
-          style="cursor: pointer;"
-        >
-          <div class="block">
+        <div class="b-box b-box-bottomBorder">
+          <div class="block" @click="showSearchRecordByConditionModal" style="cursor: pointer;">
             <div class="title">查找聊天记录</div>
             <img class="icon-right" src="@/assets/image/icon/arrow-right-grey.png" alt="" />
           </div>
diff --git a/src/views/message/inner/IndexContent.vue b/src/views/message/inner/IndexContent.vue
index 064ca68..5423665 100644
--- a/src/views/message/inner/IndexContent.vue
+++ b/src/views/message/inner/IndexContent.vue
@@ -42,7 +42,24 @@ const state = reactive({
   }, //按条件搜索记录弹窗样式
   searchRecordByConditionText: '', //按条件搜索记录文本
   conditionTag: '', //当前条件标签
-  conditionType: '' //当前条件类型
+  conditionType: '', //当前条件类型
+  isShowGroupNoticeModal: false, //是否显示群公告模态框
+  customGroupNoticeModalStyle: {
+    width: '997px',
+    height: '740px'
+  }, //群公告模态框样式
+  groupNoticeModalActionBtns: {
+    confirmBtn: {
+      text: '编辑',
+      doLoading: false,
+      disabled: false
+    },
+    cancelBtn: false
+  }, //群公告模态框操作按钮
+  groupNoticeModalActionBtnsStyle: 'padding: 20px 0;', //群公告模态框操作按钮样式
+  groupNoticeInEdit: '', //编辑中的公告
+  groupNoticeEditMode: 3, //群公告编辑模式：2=编辑；3=查看
+  groupNoticeModalConfirmBtnEvent: 'edit' //群公告模态框确认按钮事件
 })
 
 const events = {
@@ -82,6 +99,48 @@ const changeConditionTag = (tag) => {
     state.conditionTag = ''
   }
 }
+
+// 群公告模态框确定按钮事件
+const handleGroupNoticeModalConfirm = () => {
+  if (state.groupNoticeModalConfirmBtnEvent === 'edit') {
+    //点击切换群公告编辑模式为编辑
+    state.groupNoticeEditMode = 2
+    state.groupNoticeModalActionBtns = {
+      confirmBtn: {
+        text: '完成',
+        doLoading: true,
+        disabled: true
+      },
+      cancelBtn: true
+    }
+  }
+}
+
+// 群公告模态框取消按钮事件
+const handleGroupNoticeModalCancel = () => {
+  if (state.groupNoticeModalConfirmBtnEvent === 'edit') {
+    //点击切换群公告编辑模式为查看
+    state.groupNoticeEditMode = 3
+    state.groupNoticeModalActionBtns = {
+      confirmBtn: {
+        text: '编辑',
+        doLoading: false,
+        disabled: false
+      },
+      cancelBtn: false
+    }
+  }
+}
+
+// 群公告模态框输入事件
+const handleGroupNoticeModalInput = (value) => {
+  console.log(value)
+  if (value.trim()) {
+    state.groupNoticeModalActionBtns.confirmBtn.disabled = false
+  } else {
+    state.groupNoticeModalActionBtns.confirmBtn.disabled = true
+  }
+}
 </script>
 
 <template>
@@ -164,12 +223,15 @@ const changeConditionTag = (tag) => {
       @close="state.isShowGroupAside = false"
       :talkType="talkParams.type"
       @handleSearchRecordByConditionModalShow="state.isShowSearchRecordByConditionModal = true"
+      @handleGroupNoticeModalShow="state.isShowGroupNoticeModal = true"
     />
   </n-drawer>
 
   <customModal
     v-model:show="state.isShowSearchRecordByConditionModal"
-    :title="`${talkParams.type === 1 ? '与' : ''}&quot;${talkParams.username}&quot;的聊天记录`"
+    :title="`${talkParams.type === 1 ? '与' : ''}&nbsp;&quot;${
+      talkParams.username
+    }&quot;&nbsp;的聊天记录`"
     :style="state.customSearchRecordByConditionModalStyle"
     :customCloseBtn="true"
     :closable="false"
@@ -239,6 +301,41 @@ const changeConditionTag = (tag) => {
       </div>
     </template>
   </customModal>
+
+  <customModal
+    v-model:show="state.isShowGroupNoticeModal"
+    :title="`&quot;${talkParams.username}&quot;&nbsp;的群公告`"
+    :style="state.customGroupNoticeModalStyle"
+    :customCloseBtn="true"
+    :closable="false"
+    :actionBtns="state.groupNoticeModalActionBtns"
+    :customModalBtnsStyle="state.groupNoticeModalActionBtnsStyle"
+    @confirm="handleGroupNoticeModalConfirm"
+    @cancel="handleGroupNoticeModalCancel"
+  >
+    <template #content>
+      <div class="group-notice-modal-content">
+        <div class="group-notice-text-area" v-if="state.groupNoticeEditMode === 2">
+          <n-input
+            v-model:value="state.groupNoticeInEdit"
+            type="textarea"
+            :autosize="{
+              minRows: 22,
+              maxRows: 22
+            }"
+            placeholder="请输入"
+            :maxlength="500"
+            :show-count="true"
+            @input="handleGroupNoticeModalInput"
+          />
+        </div>
+        <div class="group-notice-empty" v-if="state.groupNoticeEditMode === 3">
+          <img src="@/assets/image/chatList/search-empty.png" alt="" />
+          <span>暂无公告</span>
+        </div>
+      </div>
+    </template>
+  </customModal>
 </template>
 
 <style lang="less" scoped>
@@ -312,4 +409,33 @@ const changeConditionTag = (tag) => {
     }
   }
 }
+.group-notice-modal-content {
+  .group-notice-text-area {
+    :deep(.n-input-wrapper) {
+      padding: 20px 23px 15px;
+    }
+    :deep(.n-input-word-count) {
+      right: 23px;
+      bottom: 15px;
+    }
+  }
+  .group-notice-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 552px;
+    box-sizing: border-box;
+    img {
+      width: 160px;
+      height: 104px;
+    }
+    span {
+      font-size: 14px;
+      color: #999;
+      font-weight: 400;
+      margin: 14px 0 0;
+    }
+  }
+}
 </style>

From 24395628389bcba57f759613a04f646c9fdbe16e Mon Sep 17 00:00:00 2001
From: wangyifeng <812766448@qq.com>
Date: Tue, 20 May 2025 15:05:57 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=BE=A4=E8=81=8A?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E4=B8=AD=E7=BE=A4=E5=85=AC=E5=91=8A=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=E7=9A=84=E6=8E=A5=E5=85=A5=E5=92=8C=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                          |   1 +
 src/api/group.js                         |   5 +
 src/components/common/customModal.vue    |  11 +-
 src/components/group/GroupPanel.vue      |  47 ++-
 src/utils/auth.js                        |   2 +-
 src/views/message/inner/IndexContent.vue | 358 ++++++++++++++++++++++-
 6 files changed, 403 insertions(+), 21 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 85c3e24..fd12a2c 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -65,6 +65,7 @@ declare module 'vue' {
     NPopover: typeof import('naive-ui')['NPopover']
     NRadio: typeof import('naive-ui')['NRadio']
     NSpin: typeof import('naive-ui')['NSpin']
+    NTag: typeof import('naive-ui')['NTag']
     NVirtualList: typeof import('naive-ui')['NVirtualList']
     RevokeMessage: typeof import('./src/components/talk/message/RevokeMessage.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/src/api/group.js b/src/api/group.js
index 473dcfd..4ec0302 100644
--- a/src/api/group.js
+++ b/src/api/group.js
@@ -77,6 +77,11 @@ export const ServeEditGroupNotice = (data) => {
   return post('/api/v1/group/notice/edit', data)
 }
 
+//  删除群公告
+export const ServeDeleteGroupNotice = (data) => {
+  return post('/api/v1/group/notice/delete', data)
+}
+
 export const ServeGetGroupApplyList = (data) => {
   return get('/api/v1/group/apply/list', data)
 }
diff --git a/src/components/common/customModal.vue b/src/components/common/customModal.vue
index 6915374..bfee602 100644
--- a/src/components/common/customModal.vue
+++ b/src/components/common/customModal.vue
@@ -72,6 +72,11 @@ const props = defineProps({
     // 自定义按钮样式
     type: String,
     default: ''
+  },
+  customCloseEvent: {
+    // 是否自定义关闭事件
+    type: Boolean,
+    default: false
   }
 })
 
@@ -105,7 +110,11 @@ const state = reactive({
 })
 
 const handleCloseModal = () => {
-  show.value = false
+  if (props.customCloseEvent) {
+    emit('closeModal')
+  } else {
+    show.value = false
+  }
 }
 </script>
 
diff --git a/src/components/group/GroupPanel.vue b/src/components/group/GroupPanel.vue
index 5db3975..d6a7227 100644
--- a/src/components/group/GroupPanel.vue
+++ b/src/components/group/GroupPanel.vue
@@ -9,7 +9,8 @@ import {
   ServeGroupDetail,
   ServeGetGroupMembers,
   ServeSecedeGroup,
-  ServeUpdateGroupCard
+  ServeUpdateGroupCard,
+  ServeGetGroupNotices
 } from '@/api/group'
 import { useInject } from '@/hooks'
 import customModal from '@/components/common/customModal.vue'
@@ -34,12 +35,18 @@ const props = defineProps({
     // 1: 单聊， 2: 群聊
     type: Number,
     default: 0
+  },
+  groupNoticeContentChange: {
+    // 群公告内容变化
+    type: String,
+    default: ''
   }
 })
 
 watch(props, () => {
   loadDetail()
   loadMembers()
+  getGroupNotices()
 })
 
 const editCardPopover = ref(false)
@@ -74,7 +81,14 @@ const state = reactive({
   showAllMember: false, // 是否显示全部成员
   openGroupMemberSearch: false, //是否开启群成员搜索
   isShowUserCardModal: false, //是否显示成员信息模态框
-  userInfo: {} //当前打开的成员信息卡信息
+  userInfo: {}, //当前打开的成员信息卡信息
+  groupNoticeInfo: {
+    id: 0,
+    avatar: '',
+    updater_name: '',
+    updated_at: '',
+    content: ''
+  } //群公告信息
 })
 
 const members = ref<any[]>([])
@@ -258,8 +272,33 @@ const showMemberInfo = (memberItem: any) => {
 
 //点击显示群公告模态框
 const showGroupNoticeModal = () => {
-  emit('handleGroupNoticeModalShow', true)
+  emit('handleGroupNoticeModalShow', isAdmin.value || isLeader.value)
 }
+
+//获取群公告列表
+const getGroupNotices = () => {
+  ServeGetGroupNotices({
+    group_id: props.gid
+  }).then((res) => {
+    console.log(res)
+    if (res.code == 200) {
+      if (res?.data?.items[0]?.id) {
+        state.groupNoticeInfo = res.data.items[0]
+      } else {
+        state.groupNoticeInfo = {
+          id: 0,
+          avatar: '',
+          updater_name: '',
+          updated_at: '',
+          content: ''
+        }
+      }
+    } else {
+      window['$message'].warning(res.msg)
+    }
+  })
+}
+getGroupNotices()
 </script>
 <template>
   <section class="el-container is-vertical section">
@@ -426,7 +465,7 @@ const showGroupNoticeModal = () => {
             <img class="icon-right" src="@/assets/image/icon/arrow-right-grey.png" alt="" />
             <!-- </div> -->
           </div>
-          <div class="describe">管理员未设置</div>
+          <div class="describe">{{ state.groupNoticeInfo?.content || '管理员未设置' }}</div>
         </div>
       </div>
 
diff --git a/src/utils/auth.js b/src/utils/auth.js
index 6369112..f9864ce 100644
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@@ -18,7 +18,7 @@ export function isLoggedIn() {
  */
 export function getAccessToken() {
   // return storage.get(AccessToken) || ''
-  return JSON.parse(localStorage.getItem('token'))||'79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941caaef1334d640773710f8cd96473bacfb190cba595a5d6a9c87d70f0999a3ebb41147213b31b4bdccffca66a56acf3baab5af0154f0dce360079f37709f78e13711036899344bddb0fb4cf0f2890287cb62c3fcbe33368caa5e213624577be8b8420ab75b1f50775ee16142a4321c5d56995f37354a66a969da98d95ba6e65d142ed097e04b411c1ebad2f62866d0ec7e1838420530a9941dbbcd00490199f8b8962d32ca9acda2e80272e2558c2a366762349b830b666ec5fa17a2d4304de907fc1e15f4bef1a68f350975080df1c9577b69543e38d63124a06b7b2218b126be05c2669b3dcdb9c8a30daf38c781bfb6a'
+  return JSON.parse(localStorage.getItem('token'))||'79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941caaef1334d640773710f8cd96473bacfb190cba595a5d6a9c87d70f0999a3ebb41147213b31b4bdccffca66a56acf3baab5af0154f0dce360079f37709f78e13711036899344bddb0fb4cf0f2890287cb62c3fcbe33368caa5e213624577be8b8420ab75b1f50775ee16142a4321c5d56995f37354a66a969da98d95ba6e65d142ed097e04b411c1ebad2f62866d0ec7e1838420530a9941dbbcd00490199f8b89a542742bebcc3862e86adbcf9b360820a497764e7432d66963e70eb29f9eab5268ee8efa98eed3c981eea690d977b38b76b3a9a6b51bb685000752d9d26f98a91f4df6970ad165c5299f9eb77d0c40ed'
 }
 
 /**
diff --git a/src/views/message/inner/IndexContent.vue b/src/views/message/inner/IndexContent.vue
index 5423665..89b59c6 100644
--- a/src/views/message/inner/IndexContent.vue
+++ b/src/views/message/inner/IndexContent.vue
@@ -10,6 +10,8 @@ import GroupNotice from '@/components/group/GroupNotice.vue'
 import UploadsModal from '@/components/base/UploadsModal.vue'
 import customModal from '@/components/common/customModal.vue'
 import historyRecord from '@/components/search/searchByCondition.vue'
+import { ServeEditGroupNotice, ServeGetGroupNotices, ServeDeleteGroupNotice } from '@/api/group'
+import avatarModule from '@/components/avatar-module/index.vue'
 
 const userStore = useUserStore()
 const dialogueStore = useDialogueStore()
@@ -59,7 +61,24 @@ const state = reactive({
   groupNoticeModalActionBtnsStyle: 'padding: 20px 0;', //群公告模态框操作按钮样式
   groupNoticeInEdit: '', //编辑中的公告
   groupNoticeEditMode: 3, //群公告编辑模式：2=编辑；3=查看
-  groupNoticeModalConfirmBtnEvent: 'edit' //群公告模态框确认按钮事件
+  groupNoticeModalConfirmBtnEvent: 'edit', //群公告模态框确认按钮事件：edit=编辑；fillIn=输入
+  isShowNoticeHintModal: false, //是否显示群公告提示模态框
+  customNoticeHintModalStyle: {
+    width: '724px',
+    height: '314px'
+  }, //群公告提示模态框样式
+  noticeHintModalActionBtns: {}, //群公告提示模态框操作按钮
+  noticeHintModalContent: '', //群公告提示模态框内容
+  noticeHintMode: 'publish', //群公告提示模式：publish=发布；cancel=取消
+  groupNoticeInfo: {
+    id: 0,
+    avatar: '',
+    updater_name: '',
+    updated_at: '',
+    content: ''
+  }, //群公告信息
+  isAdmin: false, //当前登录用户是否是该群管理员
+  groupNoticeContentChange: '' //群公告内容变化
 })
 
 const events = {
@@ -100,6 +119,22 @@ const changeConditionTag = (tag) => {
   }
 }
 
+//取消群公告编辑并返回查看
+const cancelEditGroupNotice = () => {
+  //切换群公告编辑模式为查看
+  state.groupNoticeEditMode = 3
+  state.groupNoticeModalActionBtns = {
+    confirmBtn: {
+      text: '编辑',
+      doLoading: false,
+      disabled: false
+    },
+    cancelBtn: false
+  }
+  //切换确定按钮事件为编辑
+  state.groupNoticeModalConfirmBtnEvent = 'edit'
+}
+
 // 群公告模态框确定按钮事件
 const handleGroupNoticeModalConfirm = () => {
   if (state.groupNoticeModalConfirmBtnEvent === 'edit') {
@@ -108,39 +143,230 @@ const handleGroupNoticeModalConfirm = () => {
     state.groupNoticeModalActionBtns = {
       confirmBtn: {
         text: '完成',
-        doLoading: true,
+        doLoading: false,
         disabled: true
       },
       cancelBtn: true
     }
+    //切换确定按钮事件为输入
+    state.groupNoticeModalConfirmBtnEvent = 'fillIn'
+    if (state.groupNoticeInfo?.id) {
+      state.groupNoticeInEdit = state.groupNoticeInfo.content
+      state.groupNoticeModalActionBtns.confirmBtn.disabled = false
+    }
+  } else if (state.groupNoticeModalConfirmBtnEvent === 'fillIn') {
+    //点击显示发布提示
+    state.isShowNoticeHintModal = true
+    if (state?.groupNoticeInfo?.id && !state.groupNoticeInEdit) {
+      //如果是在编辑中，但是没有输入内容，此时点击完成即为删除群公告
+      state.noticeHintModalContent = '确定清空群公告吗？'
+      state.noticeHintModalActionBtns = {
+        confirmBtn: {
+          text: '清空',
+          doLoading: true
+        },
+        cancelBtn: true
+      }
+      //切换公告提示模式为清空
+      state.noticeHintMode = 'clear'
+    } else {
+      state.noticeHintModalContent = '发布该公告会通知全部群成员'
+      state.noticeHintModalActionBtns = {
+        confirmBtn: {
+          text: '发布',
+          doLoading: true
+        },
+        cancelBtn: true
+      }
+      //切换公告提示模式为发布
+      state.noticeHintMode = 'publish'
+    }
   }
 }
 
 // 群公告模态框取消按钮事件
 const handleGroupNoticeModalCancel = () => {
-  if (state.groupNoticeModalConfirmBtnEvent === 'edit') {
-    //点击切换群公告编辑模式为查看
-    state.groupNoticeEditMode = 3
-    state.groupNoticeModalActionBtns = {
-      confirmBtn: {
-        text: '编辑',
-        doLoading: false,
-        disabled: false
-      },
-      cancelBtn: false
+  if (state.groupNoticeModalConfirmBtnEvent === 'fillIn') {
+    if (state.groupNoticeInEdit || (state.groupNoticeInfo?.id && !state.groupNoticeInEdit)) {
+      //如果有正在编辑中的公告或者编辑已发布的公告内容为空，显示确认取消编辑弹窗
+      state.isShowNoticeHintModal = true
+      state.noticeHintModalContent = '退出本次编辑'
+      state.noticeHintModalActionBtns = {
+        confirmBtn: {
+          text: '继续编辑',
+          doLoading: false
+        },
+        cancelBtn: {
+          text: '退出'
+        }
+      }
+      //切换公告提示模式为取消
+      state.noticeHintMode = 'cancel'
+    } else {
+      //没有正在编辑中的公告，退出编辑
+      cancelEditGroupNotice()
     }
   }
 }
 
+// 群公告模态框关闭事件
+const handleGroupNoticeModalClose = () => {
+  //关闭应与取消事件一致
+  handleGroupNoticeModalCancel()
+}
+
+// 群公告提示模态框确认按钮事件
+const handleNoticeHintModalConfirm = (closeLoading) => {
+  console.log('handleNoticeHintModalConfirm')
+  if (state.noticeHintMode === 'cancel') {
+    //不退出，回到编辑
+    state.isShowNoticeHintModal = false
+  } else if (state.noticeHintMode === 'publish') {
+    //发布
+    doPublishGroupNotice(closeLoading)
+  } else if (state.noticeHintMode === 'clear') {
+    //清空
+    doClearGroupNotice(closeLoading)
+  }
+}
+
+// 群公告提示模态框取消按钮事件
+const handleNoticeHintModalCancel = () => {
+  console.log('handleNoticeHintModalCancel')
+  if (state.noticeHintMode === 'publish') {
+    //取消发布，回到编辑
+    state.isShowNoticeHintModal = false
+  } else if (state.noticeHintMode === 'cancel') {
+    //清除正在编辑中的公告并退出编辑
+    state.groupNoticeInEdit = ''
+    state.isShowNoticeHintModal = false
+    cancelEditGroupNotice()
+  } else if (state.noticeHintMode === 'clear') {
+    //不清空，继续编辑
+    state.isShowNoticeHintModal = false
+  }
+}
+
 // 群公告模态框输入事件
 const handleGroupNoticeModalInput = (value) => {
   console.log(value)
   if (value.trim()) {
     state.groupNoticeModalActionBtns.confirmBtn.disabled = false
   } else {
-    state.groupNoticeModalActionBtns.confirmBtn.disabled = true
+    if (!state.groupNoticeInfo?.id) {
+      state.groupNoticeModalActionBtns.confirmBtn.disabled = true
+    } else {
+      state.groupNoticeModalActionBtns.confirmBtn.disabled = false
+    }
   }
 }
+
+// 发布群公告
+const doPublishGroupNotice = (closeLoading) => {
+  let params = {
+    notice_id: state?.groupNoticeInfo?.id || 0,
+    group_id: talkParams.receiver_id,
+    title: '',
+    content: state.groupNoticeInEdit,
+    is_top: 0,
+    is_confirm: 0
+  }
+  console.log(params)
+  const resp = ServeEditGroupNotice(params)
+  resp
+    .then((res) => {
+      closeLoading()
+      if (res.code == 200) {
+        // 发布成功，关闭群公告模态框
+        state.isShowGroupNoticeModal = false
+        state.isShowNoticeHintModal = false
+        state.groupNoticeContentChange = state.groupNoticeInEdit
+        state.groupNoticeInEdit = ''
+        cancelEditGroupNotice()
+        window['$message'].success(res.msg)
+      } else {
+        window['$message'].warning(res.msg)
+      }
+    })
+    .catch((err) => {
+      closeLoading()
+      window['$message'].warning(err.msg)
+    })
+}
+
+//获取群公告列表
+const getGroupNotices = () => {
+  ServeGetGroupNotices({
+    group_id: talkParams.receiver_id
+  }).then((res) => {
+    console.log(res)
+    if (res.code == 200) {
+      if (res?.data?.items[0]?.id) {
+        state.groupNoticeInfo = res.data.items[0]
+      } else {
+        state.groupNoticeInfo = {
+          id: 0,
+          avatar: '',
+          updater_name: '',
+          updated_at: '',
+          content: ''
+        }
+      }
+    } else {
+      window['$message'].warning(res.msg)
+    }
+  })
+}
+
+// 清空群公告
+const doClearGroupNotice = (closeLoading) => {
+  ServeDeleteGroupNotice({
+    notice_id: state.groupNoticeInfo.id,
+    group_id: talkParams.receiver_id
+  })
+    .then((res) => {
+      closeLoading()
+      if (res.code == 200) {
+        // 清空成功，关闭群公告模态框并恢复群公告模态框初始状态
+        state.groupNoticeInfo = {
+          id: 0,
+          avatar: '',
+          updater_name: '',
+          updated_at: '',
+          content: ''
+        }
+        state.isShowGroupNoticeModal = false
+        state.isShowNoticeHintModal = false
+        state.groupNoticeContentChange = ''
+        cancelEditGroupNotice()
+        window['$message'].success(res.msg)
+      } else {
+        window['$message'].warning(res.msg)
+      }
+    })
+    .catch((err) => {
+      closeLoading()
+      window['$message'].warning(err.msg)
+    })
+}
+// 群公告模态框显示事件
+const handleGroupNoticeModalShow = (isAdmin) => {
+  state.isAdmin = isAdmin
+  if (isAdmin) {
+    state.groupNoticeModalActionBtns = {
+      confirmBtn: {
+        text: '编辑',
+        doLoading: false,
+        disabled: false
+      },
+      cancelBtn: false
+    }
+  } else {
+    ;(state.groupNoticeModalActionBtns.confirmBtn as any) = false
+  }
+  state.isShowGroupNoticeModal = true
+  getGroupNotices()
+}
 </script>
 
 <template>
@@ -223,7 +449,8 @@ const handleGroupNoticeModalInput = (value) => {
       @close="state.isShowGroupAside = false"
       :talkType="talkParams.type"
       @handleSearchRecordByConditionModalShow="state.isShowSearchRecordByConditionModal = true"
-      @handleGroupNoticeModalShow="state.isShowGroupNoticeModal = true"
+      @handleGroupNoticeModalShow="handleGroupNoticeModalShow"
+      :groupNoticeContentChange="state.groupNoticeContentChange"
     />
   </n-drawer>
 
@@ -312,6 +539,8 @@ const handleGroupNoticeModalInput = (value) => {
     :customModalBtnsStyle="state.groupNoticeModalActionBtnsStyle"
     @confirm="handleGroupNoticeModalConfirm"
     @cancel="handleGroupNoticeModalCancel"
+    :customCloseEvent="state.groupNoticeEditMode === 2 ? true : false"
+    @closeModal="handleGroupNoticeModalClose"
   >
     <template #content>
       <div class="group-notice-modal-content">
@@ -329,13 +558,65 @@ const handleGroupNoticeModalInput = (value) => {
             @input="handleGroupNoticeModalInput"
           />
         </div>
-        <div class="group-notice-empty" v-if="state.groupNoticeEditMode === 3">
+        <div
+          class="group-notice-info"
+          v-if="state.groupNoticeEditMode === 3 && state.groupNoticeInfo?.id"
+        >
+          <div class="group-notice-header">
+            <avatarModule
+              :mode="1"
+              :avatar="state.groupNoticeInfo.avatar"
+              :userName="state.groupNoticeInfo.updater_name"
+              :groupType="0"
+              :customStyle="{
+                width: '42px',
+                height: '42px'
+              }"
+              :customTextStyle="{
+                fontSize: '14px',
+                fontWeight: 'bold',
+                color: '#fff',
+                lineHeight: '20px'
+              }"
+            ></avatarModule>
+            <div class="group-notice-header-userInfo">
+              <span style="color: #1b1b1b; font-weight: 600; line-height: 20px;">{{
+                state.groupNoticeInfo.updater_name
+              }}</span>
+              <span>{{ state.groupNoticeInfo.updated_at }}</span>
+            </div>
+          </div>
+          <div class="group-notice-content">
+            <span>{{ state.groupNoticeInfo.content }}</span>
+          </div>
+        </div>
+        <div
+          class="group-notice-empty"
+          v-if="state.groupNoticeEditMode === 3 && !state.groupNoticeInfo?.id"
+        >
           <img src="@/assets/image/chatList/search-empty.png" alt="" />
           <span>暂无公告</span>
         </div>
       </div>
     </template>
   </customModal>
+
+  <customModal
+    v-model:show="state.isShowNoticeHintModal"
+    title="提示"
+    :style="state.customNoticeHintModalStyle"
+    :closable="false"
+    :actionBtns="state.noticeHintModalActionBtns"
+    customModalBtnsStyle="padding: 0 0 30px;"
+    @confirm="handleNoticeHintModalConfirm"
+    @cancel="handleNoticeHintModalCancel"
+  >
+    <template #content>
+      <div class="notice-hint-modal-content">
+        <text>{{ state.noticeHintModalContent }}</text>
+      </div>
+    </template>
+  </customModal>
 </template>
 
 <style lang="less" scoped>
@@ -419,6 +700,40 @@ const handleGroupNoticeModalInput = (value) => {
       bottom: 15px;
     }
   }
+
+  .group-notice-info {
+    .group-notice-header {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      padding: 20px 0;
+      margin: 0 12px;
+      border-bottom: 1px solid #e5e5e5;
+      .group-notice-header-userInfo {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+        margin: 0 0 0 10px;
+        span {
+          font-size: 14px;
+          color: #adadad;
+          font-weight: 400;
+          line-height: 17px;
+        }
+      }
+    }
+    .group-notice-content {
+      padding: 20px 0;
+      margin: 0 12px;
+      span {
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+      }
+    }
+  }
+
   .group-notice-empty {
     display: flex;
     flex-direction: column;
@@ -438,4 +753,17 @@ const handleGroupNoticeModalInput = (value) => {
     }
   }
 }
+.notice-hint-modal-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  text {
+    font-size: 20px;
+    line-height: 28px;
+    font-weight: 400;
+    color: #1f2225;
+  }
+}
 </style>

From 8694921f2518b70ed758a27bdd3d2d11a774de0d Mon Sep 17 00:00:00 2001
From: wangyifeng <812766448@qq.com>
Date: Tue, 20 May 2025 18:02:12 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=B8=85=E7=A9=BA?=
 =?UTF-8?q?=E8=81=8A=E5=A4=A9=E8=AE=B0=E5=BD=95=E5=8A=9F=E8=83=BD=EF=BC=9B?=
 =?UTF-8?q?=E6=8E=A5=E5=85=A5=E7=BE=A4=E4=BF=A1=E6=81=AF=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E4=B8=AD=E7=9A=84=E7=BC=96=E8=BE=91=E7=BE=A4=E5=90=8D=E7=A7=B0?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E4=B8=8E=E7=9B=B8=E5=85=B3=E4=BA=A4=E4=BA=92?=
 =?UTF-8?q?=EF=BC=8C=E5=B9=B6=E8=B0=83=E6=95=B4=E7=BE=A4=E8=81=8A=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E5=BC=B9=E7=AA=97=E7=9A=84=E6=A0=B7=E5=BC=8F=EF=BC=9B?=
 =?UTF-8?q?=E5=8E=BB=E9=99=A4=E6=97=A7=E7=89=88=E7=BE=A4=E5=85=AC=E5=91=8A?=
 =?UTF-8?q?=E5=85=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/chat.js                               |   5 +
 src/assets/image/chatSettings/edit-btn.png    | Bin 0 -> 337 bytes
 src/assets/image/chatSettings/edit-cancel.png | Bin 0 -> 486 bytes
 .../image/chatSettings/edit-confirm.png       | Bin 0 -> 473 bytes
 src/components/group/GroupPanel.vue           | 326 +++++++++++++-----
 src/store/modules/dialogue.js                 |  35 +-
 src/utils/auth.js                             |   2 +-
 src/views/message/inner/IndexSider.vue        |   2 +-
 src/views/message/inner/panel/PanelHeader.vue |   4 +-
 9 files changed, 265 insertions(+), 109 deletions(-)
 create mode 100644 src/assets/image/chatSettings/edit-btn.png
 create mode 100644 src/assets/image/chatSettings/edit-cancel.png
 create mode 100644 src/assets/image/chatSettings/edit-confirm.png

diff --git a/src/api/chat.js b/src/api/chat.js
index acb06fe..3273fc5 100644
--- a/src/api/chat.js
+++ b/src/api/chat.js
@@ -89,3 +89,8 @@ export const ServeSendVote = (data = {}) => {
 export const ServeConfirmVoteHandle = (data = {}) => {
   return post('/api/v1/talk/message/vote/handle', data)
 }
+
+//清空聊天记录
+export const ServeEmptyMessage = (data) => {
+  return post('/api/v1/talk/message/empty', data)
+}
diff --git a/src/assets/image/chatSettings/edit-btn.png b/src/assets/image/chatSettings/edit-btn.png
new file mode 100644
index 0000000000000000000000000000000000000000..528b9a6a593f37122d2ebf6c76f080144db204a4
GIT binary patch
literal 337
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dyjKx9jP7LeL$-D$|oC178T!Hlb
z`SYhwpFRr=fQ*?lXF^CI0|I7%0gN{jjeFs}2oum0(UKs)U<LsN1AB*ngo65p{t5FJ
z95{dB{`(Ix!K*d_70mH;aSX9IefH8pp+gEhEEjw=k1FL(E&2aH-1bF+u7JMW9pN*#
z8)cZTOmr<3EO|Ud<!a=-p#2Z0@Ho6Mjk}jC!p=1FXo126@zafGGIrVTFDP1m=V|xu
z_+2TtC)%m4i#>6+h~?7s(;?PE-;;M1<-C`lRj08<)_mFX#60U09FoVg-&sTy<>x0o
vym0f0<}r)P{`#{9vn3apERJ}4=obV32VpCYS2KEn?qu+E^>bP0l+XkKW^t02

literal 0
HcmV?d00001

diff --git a/src/assets/image/chatSettings/edit-cancel.png b/src/assets/image/chatSettings/edit-cancel.png
new file mode 100644
index 0000000000000000000000000000000000000000..05676aec4ef4bfbf01bd5577025e7a0f0b80cb27
GIT binary patch
literal 486
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dyjKx9jP7LeL$-D$|TmyVUT!Hlb
z`SYhwpFRr=fQ%V4X3U&96V3p#fdC>1A>mv&Ly4s+0cenDNswPKgMfm8y@P*1LViJg
z!~6yN51ha7{)3=xg*(u8Jx>?M5R22LlcS4T6$D(OI}T=x2%fn4Kj?GgqYTM^D=fc!
zv6-+=_*!mzZS?-HMR%fJEMN0ZP_E8LV!<Dt?LYV?r0ILs`7!KPtYMrKSjwrfZ@+%P
zVcYZ-0d3y<e=X09ub%c)_g;tVq?pDJVLw=odUj2iwOQ}+?E5T%L9FVYeAoVMxytRz
zwY=fEg4($`l1)ly-X`W8aS5Jg;v8c2#qZD&Q>UP|ch*e%!(*CaB^C&V#~hHIvEX_U
zliATLZhNH^q9+RrELL>$Sa#;{e#Nwo?`}sgzpOAlwaw~V)VZ+hWp`(}%zydf?S`1Y
z^>?nyatGfNTPDN3SaHALJ_oz$o17|BW^!FQxK4g{WcB{S_$!LcZ|3WJO4(b-{9@mD
w<@fc~r$7AJb5X%`*Y-osK9WUU*FMPmE|tA7>%*4cz@TODboFyt=akR{0OcdwO#lD@

literal 0
HcmV?d00001

diff --git a/src/assets/image/chatSettings/edit-confirm.png b/src/assets/image/chatSettings/edit-confirm.png
new file mode 100644
index 0000000000000000000000000000000000000000..3bded4906cb70c9e444a7d119efe2ac81df329e1
GIT binary patch
literal 473
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dyjKx9jP7LeL$-D$|TmyVUT!Hlb
z`SYhwpFRr=fQ%V4X3U&96V3p#fdC>1Bq0pA2v~9^Z-9*y&>*prAirP+0R;nl2mgSC
z{DS(1`3pAeKXCrS`wx$E-Fbl4D|os%hFF{~o$T4vY{0{EyUfT>BEi7p>;L8F8qcb^
zxO-i@l(oe8lfhX7|HJ)xN_@uz&5m&M?H6U+aR0&w$ps~zlY+t-o@psd2CQ1Okzrcj
zceZ)A=iNMbDDwX0(iczMr~m6)FS%F6wYg?{1zYzdH;wtLY*a)gR4tG6e{$1zHPE~-
z;<0UCtU`9nyEc8tAoj&vOY~#>HKG#!%Gm8-*&HGKEB59r?i<4Y%-%}tCFBdr>cs9y
zux#_;`<C@n_|(p{q6H6M&srXEQolxY)g-IR)51Th)?}9Z<@M~4)&4cTc>jUNX%f4Q
zdve<XBi<Qhxi&S&?%Km+bLCs|s+`GcQH$GH6YA_$UjCf7zRPpr_ixuf+r{Ksg=yLy
ji=N+~+PJjm>w*7lr)1Ke@%zRALzBVN)z4*}Q$iB}dp*tL

literal 0
HcmV?d00001

diff --git a/src/components/group/GroupPanel.vue b/src/components/group/GroupPanel.vue
index d6a7227..d69f576 100644
--- a/src/components/group/GroupPanel.vue
+++ b/src/components/group/GroupPanel.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { reactive, computed, watch, ref } from 'vue'
-import { NEmpty, NPopover, NPopconfirm, NSwitch, NIcon, NInput } from 'naive-ui'
-import { useUserStore } from '@/store'
+import { NEmpty, NPopover, NPopconfirm, NSwitch, NIcon, NInput, NScrollbar } from 'naive-ui'
+import { useUserStore, useTalkStore, useDialogueStore } from '@/store'
 import GroupLaunch from './GroupLaunch.vue'
 import GroupManage from './manage/index.vue'
 import { Comment, Search, Close, Plus, Down, Up } from '@icon-park/vue-next'
@@ -10,14 +10,19 @@ import {
   ServeGetGroupMembers,
   ServeSecedeGroup,
   ServeUpdateGroupCard,
-  ServeGetGroupNotices
+  ServeGetGroupNotices,
+  ServeEditGroup
 } from '@/api/group'
 import { useInject } from '@/hooks'
 import customModal from '@/components/common/customModal.vue'
 import avatarModule from '@/components/avatar-module/index.vue'
 import UserCardModal from '@/components/user/UserCardModal.vue'
+import { ServeEmptyMessage } from '@/api/chat'
+import { parseTime } from '@/utils/datetime'
 
 const userStore = useUserStore()
+const talkStore = useTalkStore()
+const dialogueStore = useDialogueStore()
 const { showUserInfoModal } = useInject()
 
 const emit = defineEmits([
@@ -44,9 +49,11 @@ const props = defineProps({
 })
 
 watch(props, () => {
-  loadDetail()
-  loadMembers()
-  getGroupNotices()
+  if (props.talkType === 2) {
+    loadDetail()
+    loadMembers()
+    getGroupNotices()
+  }
 })
 
 const editCardPopover = ref(false)
@@ -88,7 +95,10 @@ const state = reactive({
     updater_name: '',
     updated_at: '',
     content: ''
-  } //群公告信息
+  }, //群公告信息
+  editGroupName: false, //是否编辑群名称
+  editGroupNameValue: '', //编辑中的群名称
+  chatSettingOperateType: '' //聊天设置操作类型
 })
 
 const members = ref<any[]>([])
@@ -198,20 +208,41 @@ const onChangeRemark = () => {
   })
 }
 
-loadDetail()
-loadMembers()
-
 // 处理模态框的确认
 const handleModalConfirm = (closeLoading) => {
-  setTimeout(() => {
-    closeLoading()
-    state.isShowModal = false
-  }, 2000)
+  if (state.chatSettingOperateType == 'clear') {
+    //清空聊天记录
+    ServeEmptyMessage({
+      talk_type: props.talkType,
+      receiver_id: props.gid
+    })
+      .then((res) => {
+        closeLoading()
+        state.isShowModal = false
+        if (res.code == 200) {
+          window['$message'].success('聊天记录清空成功')
+          //热更新清除会话记录及会话列表中的最近消息展示
+          dialogueStore.clearDialogueRecord()
+          useTalkStore().updateItem({
+            index_name: props.talkType + '_' + props.gid,
+            msg_text: '...',
+            updated_at: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
+          })
+        } else {
+          window['$message'].error(res.message)
+        }
+      })
+      .catch((err) => {
+        closeLoading()
+        window['$message'].error(err.message)
+      })
+  }
 }
 
 //显示聊天设置操作提示模态框
 const showChatSettingOperateModal = (type: string) => {
   state.isShowModal = true
+  state.chatSettingOperateType = type
   switch (type) {
     case 'clear':
       state.chatSettingOperateHint = '确定清空聊天记录'
@@ -298,7 +329,55 @@ const getGroupNotices = () => {
     }
   })
 }
-getGroupNotices()
+
+if (props.talkType === 2) {
+  loadDetail()
+  loadMembers()
+  getGroupNotices()
+}
+
+//点击编辑群名称
+const handleEditGroupName = () => {
+  state.editGroupName = true
+  state.editGroupNameValue = state.detail.name
+}
+
+//取消编辑群名称
+const handleEditGroupNameCancel = () => {
+  state.editGroupName = false
+  state.editGroupNameValue = ''
+}
+
+//确认修改群名称
+const handleEditGroupNameConfirm = () => {
+  if (!state.editGroupNameValue.trim()) {
+    window['$message'].warning('群名称不能为空')
+    return
+  }
+  ServeEditGroup({
+    group_id: props.gid,
+    group_name: state.editGroupNameValue,
+    avatar: state.detail.avatar,
+    profile: state.detail.profile
+  }).then((res) => {
+    if (res.code == 200) {
+      window['$message'].success('群名称修改成功')
+      state.detail.name = state.editGroupNameValue
+      state.editGroupName = false
+      //热更新会话列表中的群名
+      talkStore.updateItem({
+        index_name: props.talkType + '_' + props.gid,
+        name: state.editGroupNameValue
+      })
+      //热更新会话详情中的群名
+      dialogueStore.setTalkInfoPartially({
+        username: state.editGroupNameValue
+      })
+    } else {
+      window['$message'].error(res.message)
+    }
+  })
+}
 </script>
 <template>
   <section class="el-container is-vertical section">
@@ -319,7 +398,7 @@ getGroupNotices()
 
     <main class="el-main main me-scrollbar me-scrollbar-thumb">
       <div class="info-box" v-if="talkType === 2">
-        <div class="b-box">
+        <div class="b-box" style="margin: 0 0 16px;">
           <div class="block" style="height: 34px;">
             <div class="title">群成员</div>
             <!-- <div class="text">{{ members.length }}人</div> -->
@@ -336,54 +415,60 @@ getGroupNotices()
             </div>
           </div>
           <!-- <div class="describe">群主已开启“新成员入群可查看所有聊天记录</div> -->
-          <div class="group-member-list">
-            <div
-              v-for="(memberItem, memberIndex) in groupMemberList"
-              :key="memberIndex"
-              :class="
-                !state.showAllMember && memberIndex >= 18 && !state.openGroupMemberSearch
-                  ? 'group-member-list-each-box'
-                  : ''
-              "
-            >
-              <div
-                class="group-member-list-each"
-                v-if="
-                  state.showAllMember ||
-                  (!state.showAllMember && memberIndex < 18 && !state.openGroupMemberSearch) ||
-                  state.openGroupMemberSearch
-                "
-                @click="showMemberInfo(memberItem)"
-              >
-                <div class="group-member-list-each-avatar">
-                  <avatarModule
-                    :mode="1"
-                    :avatar="memberItem.avatar"
-                    :userName="memberItem.nickname"
-                    :groupType="0"
-                    :customStyle="{
-                      width: '36px',
-                      height: '36px'
-                    }"
-                    :customTextStyle="{
-                      fontSize: '12px',
-                      fontWeight: 'bold',
-                      color: '#fff',
-                      lineHeight: '17px'
-                    }"
-                  ></avatarModule>
-                  <span
-                    class="group-member-list-each-admin-tag"
-                    v-if="memberItem.leader == 2 || memberItem.leader == 1"
-                    >管理员</span
+          <div style="width: 100%;" :style="{ height: state.openGroupMemberSearch ? '656px' : '' }">
+            <n-scrollbar :style="{ maxHeight: state.openGroupMemberSearch ? '656px' : '621px' }">
+              <div class="group-member-list">
+                <div
+                  v-for="(memberItem, memberIndex) in groupMemberList"
+                  :key="memberIndex"
+                  :class="
+                    !state.showAllMember && memberIndex >= 18 && !state.openGroupMemberSearch
+                      ? 'group-member-list-each-box'
+                      : ''
+                  "
+                >
+                  <div
+                    class="group-member-list-each"
+                    v-if="
+                      state.showAllMember ||
+                      (!state.showAllMember && memberIndex < 18 && !state.openGroupMemberSearch) ||
+                      state.openGroupMemberSearch
+                    "
+                    @click="showMemberInfo(memberItem)"
                   >
+                    <div class="group-member-list-each-avatar">
+                      <avatarModule
+                        :mode="1"
+                        :avatar="memberItem.avatar"
+                        :userName="memberItem.nickname"
+                        :groupType="0"
+                        :customStyle="{
+                          width: '36px',
+                          height: '36px'
+                        }"
+                        :customTextStyle="{
+                          fontSize: '12px',
+                          fontWeight: 'bold',
+                          color: '#fff',
+                          lineHeight: '17px'
+                        }"
+                      ></avatarModule>
+                      <span
+                        class="group-member-list-each-admin-tag"
+                        v-if="memberItem.leader == 2 || memberItem.leader == 1"
+                        >管理员</span
+                      >
+                    </div>
+                    <span>{{ memberItem.nickname }}</span>
+                  </div>
                 </div>
-                <span>{{ memberItem.nickname }}</span>
               </div>
-            </div>
+            </n-scrollbar>
             <div
               class="group-member-list-more"
-              v-if="!state.showAllMember && !state.openGroupMemberSearch"
+              v-if="
+                !state.showAllMember && !state.openGroupMemberSearch && groupMemberList.length > 18
+              "
               @click="state.showAllMember = true"
             >
               <span>展开更多</span>
@@ -391,20 +476,55 @@ getGroupNotices()
             </div>
             <div
               class="group-member-list-more"
-              v-if="state.showAllMember && !state.openGroupMemberSearch"
+              v-if="
+                state.showAllMember && !state.openGroupMemberSearch && groupMemberList.length > 18
+              "
               @click="state.showAllMember = false"
             >
-              <span>收起更多</span>
+              <span>收起</span>
               <n-icon :component="Up" />
             </div>
+            <div
+              style="cursor: unset;"
+              class="group-member-list-more"
+              v-if="groupMemberList.length <= 18 && !state.openGroupMemberSearch"
+            >
+              <span></span>
+            </div>
           </div>
         </div>
 
-        <div class="b-box">
+        <div class="b-box" :style="{ margin: state.editGroupName ? '-8px 0 -6px' : '16px 0 32px' }">
           <div class="block">
-            <div class="title">群名称</div>
-            <div>
+            <div class="title" :style="{ margin: state.editGroupName ? '2px 0 0' : '' }">
+              群名称
+            </div>
+            <div class="group-name-box" v-if="!state.editGroupName">
               <span>{{ state.detail.name }}</span>
+              <img
+                src="@/assets/image/chatSettings/edit-btn.png"
+                alt=""
+                v-if="isAdmin || isLeader"
+                @click="handleEditGroupName"
+              />
+            </div>
+            <div class="group-name-box" v-if="state.editGroupName">
+              <n-input
+                v-model:value="state.editGroupNameValue"
+                placeholder="请输入"
+                style="width: 302px;"
+                clearable
+              />
+              <img
+                src="@/assets/image/chatSettings/edit-cancel.png"
+                alt=""
+                @click="handleEditGroupNameCancel"
+              />
+              <img
+                src="@/assets/image/chatSettings/edit-confirm.png"
+                alt=""
+                @click="handleEditGroupNameConfirm"
+              />
             </div>
           </div>
           <!-- <div class="describe">{{ state.detail.name }}</div> -->
@@ -413,7 +533,7 @@ getGroupNotices()
         <div class="b-box">
           <div class="block">
             <div class="title">群类型</div>
-            <div>
+            <div class="group-name-box">
               <span>{{ groupTypeText }}</span>
             </div>
           </div>
@@ -457,7 +577,7 @@ getGroupNotices()
           </div>
         </div> -->
 
-        <div class="b-box b-box-bottomBorder" style="padding: 0 0 12px;">
+        <div class="b-box b-box-bottomBorder" style="padding: 0 0 16px; margin: 32px 0 16px;">
           <div class="block" @click="showGroupNoticeModal" style="cursor: pointer;">
             <div class="title">群公告</div>
             <!-- <div class="text"> -->
@@ -470,21 +590,21 @@ getGroupNotices()
       </div>
 
       <div class="info-box">
-        <div class="b-box b-box-bottomBorder">
+        <div class="b-box b-box-bottomBorder" style="margin: 16px 0 0; padding: 0 0 16px;">
           <div class="block" @click="showSearchRecordByConditionModal" style="cursor: pointer;">
             <div class="title">查找聊天记录</div>
             <img class="icon-right" src="@/assets/image/icon/arrow-right-grey.png" alt="" />
           </div>
         </div>
 
-        <div class="b-box">
+        <div class="b-box" style="margin: 16px 0 32px;">
           <div class="block">
             <div class="title">置顶会话</div>
             <n-switch />
           </div>
         </div>
 
-        <div class="b-box">
+        <div class="b-box" style="margin: 32px 0 20px;">
           <div class="block">
             <div class="title">消息免打扰</div>
             <n-switch />
@@ -662,8 +782,8 @@ getGroupNotices()
       .b-box {
         display: flex;
         align-items: center;
-        min-height: 30px;
-        margin: 12px 0;
+        // min-height: 30px;
+        margin: 32px 0;
         flex-direction: column;
 
         &:first-child {
@@ -690,6 +810,27 @@ getGroupNotices()
             font-weight: bold;
           }
 
+          .group-name-box {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-end;
+            gap: 0 10px;
+
+            span {
+              line-height: 20px;
+              font-size: 14px;
+              color: #999999;
+              font-weight: 400;
+            }
+
+            img {
+              width: 16px;
+              height: 16px;
+              cursor: pointer;
+            }
+          }
+
           .text {
             // height: 100%;
             // line-height: 30px;
@@ -732,6 +873,7 @@ getGroupNotices()
           font-size: 14px;
           line-height: 20px;
           color: #999999;
+          margin: 10px 0 0;
         }
 
         .group-member-list {
@@ -741,10 +883,9 @@ getGroupNotices()
           justify-content: flex-start;
           flex-wrap: wrap;
           gap: 16px 24px;
-          padding: 7px 0 16px;
+          padding: 7px 0 0;
           width: 100%;
           box-sizing: border-box;
-          border-bottom: 1px solid #f0f0f2;
 
           .group-member-list-each {
             display: flex;
@@ -788,26 +929,27 @@ getGroupNotices()
           .group-member-list-each-box:nth-child(n + 19) {
             display: none;
           }
-
-          .group-member-list-more {
-            width: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            span {
-              font-size: 14px;
-              line-height: 20px;
-              color: #747474;
-              font-weight: 400;
-              margin: 0 10px 0 0;
-              display: inline-block;
-            }
+        }
+        .group-member-list-more {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          border-bottom: 1px solid #f0f0f2;
+          padding: 16px 0;
+          span {
+            font-size: 14px;
+            line-height: 20px;
+            color: #747474;
+            font-weight: 400;
+            margin: 0 10px 0 0;
+            display: inline-block;
           }
-          .group-member-list-more:hover {
-            span {
-              color: #46299d;
-            }
+        }
+        .group-member-list-more:hover {
+          span {
+            color: #46299d;
           }
         }
       }
diff --git a/src/store/modules/dialogue.js b/src/store/modules/dialogue.js
index 78526b7..509400b 100644
--- a/src/store/modules/dialogue.js
+++ b/src/store/modules/dialogue.js
@@ -19,11 +19,11 @@ export const useDialogueStore = defineStore('dialogue', {
 
       // 对话节点
       talk: {
-        avatar:'',
+        avatar: '',
         username: '',
         talk_type: 0, // 对话来源[1:私聊;2:群聊]
         receiver_id: 0,
-        group_type:0
+        group_type: 0
       },
 
       // 好友是否正在输入文字
@@ -75,15 +75,14 @@ export const useDialogueStore = defineStore('dialogue', {
 
     // 更新对话信息
     setDialogue(data = {}) {
-
-      console.log('data',data)
+      console.log('data', data)
       this.online = data.is_online == 1
       this.talk = {
         username: data.remark || data.name,
         talk_type: data.talk_type,
         receiver_id: data.receiver_id,
-        avatar:data.avatar,
-        group_type:data.group_type
+        avatar: data.avatar,
+        group_type: data.group_type
       }
 
       this.index_name = `${data.talk_type}_${data.receiver_id}`
@@ -97,6 +96,16 @@ export const useDialogueStore = defineStore('dialogue', {
       }
     },
 
+    //按需更新对话节点部分信息
+    setTalkInfoPartially(data = {}) {
+      Object.assign(this.talk, data)
+    },
+
+    // 清空对话记录
+    clearDialogueRecord() {
+      this.records = []
+    },
+
     // 更新提及列表
     async updateGroupMembers() {
       let { code, data } = await ServeGetGroupMembers({
@@ -236,21 +245,21 @@ export const useDialogueStore = defineStore('dialogue', {
 
     // 更新视频上传进度
     updateUploadProgress(uploadId, percentage) {
-      const record = this.records.find(item => 
-        item.extra && item.extra.is_uploading && item.extra.upload_id === uploadId
+      const record = this.records.find(
+        (item) => item.extra && item.extra.is_uploading && item.extra.upload_id === uploadId
       )
-      
+
       if (record) {
         record.extra.percentage = percentage
       }
     },
-    
+
     // 视频上传完成后更新消息
     completeUpload(uploadId, videoInfo) {
-      const record = this.records.find(item => 
-        item.extra && item.extra.is_uploading && item.extra.upload_id === uploadId
+      const record = this.records.find(
+        (item) => item.extra && item.extra.is_uploading && item.extra.upload_id === uploadId
       )
-      
+
       if (record) {
         record.extra.is_uploading = false
         record.extra.url = videoInfo.url
diff --git a/src/utils/auth.js b/src/utils/auth.js
index 652e13d..f9864ce 100644
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@@ -18,7 +18,7 @@ export function isLoggedIn() {
  */
 export function getAccessToken() {
   // return storage.get(AccessToken) || ''
-  return JSON.parse(localStorage.getItem('token'))||'46d71a72d8d845ad7ed23eba9bdde260e635407190c2ce1bf7fd22088e41682ea07773ec65cae8946d2003f264d55961f96e0fc5da10eb96d3a348c1664e9644ce2108c311309f398ae8ea1b8200bfd490e5cb6e8c52c9e5d493cbabb163368f8351420451a631dbfa749829ee4cda49b77b5ed2d3dced5d0f2b7dd9ee76ba5465c84a17c23af040cd92b6b2a4ea48befbb5c729dcdad0a9c9668befe84074cc24f78899c1d947f8e7f94c7eda5325b8ed698df729e76febb98549ef3482ae942fb4f4a1c92d21836fa784728f0c5483aab2760a991b6b36e6b10c84f840a6433a6ecc31dee36e8f1c6158818bc89d22b9b32c043123b3db4f35a7a79e1bbe97875bfa18428a4f5ed561887bfbfcab3bd61f2f9348af8bdb89da8c35a7a681fe828af1502b58ebc4ffb99f28fe91d5ba4b0245d1eb24a5ccda9be0cd9bef4d01'
+  return JSON.parse(localStorage.getItem('token'))||'79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941caaef1334d640773710f8cd96473bacfb190cba595a5d6a9c87d70f0999a3ebb41147213b31b4bdccffca66a56acf3baab5af0154f0dce360079f37709f78e13711036899344bddb0fb4cf0f2890287cb62c3fcbe33368caa5e213624577be8b8420ab75b1f50775ee16142a4321c5d56995f37354a66a969da98d95ba6e65d142ed097e04b411c1ebad2f62866d0ec7e1838420530a9941dbbcd00490199f8b89a542742bebcc3862e86adbcf9b360820a497764e7432d66963e70eb29f9eab5268ee8efa98eed3c981eea690d977b38b76b3a9a6b51bb685000752d9d26f98a91f4df6970ad165c5299f9eb77d0c40ed'
 }
 
 /**
diff --git a/src/views/message/inner/IndexSider.vue b/src/views/message/inner/IndexSider.vue
index fcd753b..119a75f 100644
--- a/src/views/message/inner/IndexSider.vue
+++ b/src/views/message/inner/IndexSider.vue
@@ -271,7 +271,7 @@ const items = computed((): ISession[] => {
 watch(
   () => talkStore,
   (newValue, oldValue) => {
-    console.log(newValue)
+    // console.log(newValue)
   },
   { deep: true, immediate: true }
 )
diff --git a/src/views/message/inner/panel/PanelHeader.vue b/src/views/message/inner/panel/PanelHeader.vue
index f84c31c..942807d 100644
--- a/src/views/message/inner/panel/PanelHeader.vue
+++ b/src/views/message/inner/panel/PanelHeader.vue
@@ -69,13 +69,13 @@ const onSetMenu = () => {
     </div>
 
     <div class="module right-module">
-      <n-icon
+      <!-- <n-icon
         v-show="type == 2"
         :component="Announcement"
         :size="18"
         class="icon"
         @click="emit('evnet', 'notice')"
-      />
+      /> -->
       <n-icon
         :size="18"
         class="icon"