style(announcement): 💄 modify the functionality and style of announcements

src/components/rightBox/renderMessage/Announcement.vue

@@ -1,9 +1,15 @@
 <template>
   <!-- 公告消息 -->
   <n-flex vertical :size="0" class="w-240px h-170px bg-[--group-notice-bg] rounded-8px custom-shadow">
-    <n-flex class="h-34px px-12px select-none cursor-default" align="center" :size="8">
-      <svg class="size-16px flex-shrink-0"><use href="#Loudspeaker"></use></svg>
-      <p class="text-(12px [--chat-text-color])">公告</p>
+    <n-flex class="h-34px px-12px select-none cursor-default" align="center" justify="space-between">
+      <n-flex align="center" :size="8">
+        <svg class="size-16px flex-shrink-0"><use href="#Loudspeaker"></use></svg>
+        <p class="text-(12px [--chat-text-color])">公告</p>
+      </n-flex>
+
+      <p class="select-none cursor-default flex-shrink-0 text-(12px [--chat-text-color])">
+        {{ formatTimestamp(body.updateTime || body.createTime, true) }}
+      </p>
     </n-flex>
 
     <span class="w-full h-1px bg-[--line-color]"></span>
@@ -23,18 +29,37 @@
       <template v-else>{{ body.content }}</template>
     </p>
 
-    <p class="select-none cursor-default flex-shrink-0 flex-y-center h-36px px-12px text-(12px [--chat-text-color])">
-      {{ formatTimestamp(body.updateTime || body.createTime, true) }}
-    </p>
+    <div class="w-full flex-center py-6px cursor-default">
+      <n-button
+        secondary
+        type="primary"
+        class="flex-y-center px-12px h-26px text-12px"
+        @click.stop="openAnnouncementDetail">
+        查看详情
+      </n-button>
+    </div>
   </n-flex>
 </template>
 
 <script setup lang="ts">
+import { useWindow } from '@/hooks/useWindow'
 import type { AnnouncementBody } from '@/services/types'
+import { useGlobalStore } from '@/stores/global'
 import { formatTimestamp } from '@/utils/ComputedTime.ts'
 
 defineProps<{
   body: AnnouncementBody
   searchKeyword?: string
 }>()
+
+const globalStore = useGlobalStore()
+const { createWebviewWindow } = useWindow()
+
+const openAnnouncementDetail = async () => {
+  const roomId = globalStore.currentSession?.roomId
+  if (!roomId) {
+    return
+  }
+  await createWebviewWindow('查看群公告', `announList/${roomId}/1`, 420, 620)
+}
 </script>

src/typings/components.d.ts

@@ -50,7 +50,6 @@ declare module 'vue' {
     MsgInput: typeof import('./../components/rightBox/MsgInput.vue')['default']
     MyMessageItem: typeof import('./../mobile/components/my/MyMessageItem.vue')['default']
     NaiveProvider: typeof import('./../components/common/NaiveProvider.vue')['default']
-    NAlert: typeof import('naive-ui')['NAlert']
     NAutoComplete: typeof import('naive-ui')['NAutoComplete']
     NAvatar: typeof import('naive-ui')['NAvatar']
     NAvatarGroup: typeof import('naive-ui')['NAvatarGroup']
@@ -77,7 +76,6 @@ declare module 'vue' {
     NIconWrapper: typeof import('naive-ui')['NIconWrapper']
     NImage: typeof import('naive-ui')['NImage']
     NImageGroup: typeof import('naive-ui')['NImageGroup']
-    NInfiniteScroll: typeof import('naive-ui')['NInfiniteScroll']
     NInput: typeof import('naive-ui')['NInput']
     NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']