From d3ef22f06ecd1851eefddeb2563e5f685aec53eb Mon Sep 17 00:00:00 2001
From: congsh <congsh@jiulu-gameplay.com.cn>
Date: Tue, 21 Apr 2026 14:07:51 +0800
Subject: [PATCH] feat(bulletin): add detail dialog for full bulletin content
 viewing

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../src/components/bulletin/BulletinBoard.vue | 190 +++++++++++++++++-
 frontend/src/views/Changelog.vue              |  10 +
 2 files changed, 199 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/bulletin/BulletinBoard.vue b/frontend/src/components/bulletin/BulletinBoard.vue
index 40ffab5..cb315fe 100644
--- a/frontend/src/components/bulletin/BulletinBoard.vue
+++ b/frontend/src/components/bulletin/BulletinBoard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useBulletinStore } from '@/stores/bulletin'
 import { useGroupStore } from '@/stores/group'
@@ -7,12 +7,14 @@ import { subscribeBulletins } from '@/api/bulletins'
 import BulletinPostCard from './BulletinPostCard.vue'
 import CreateBulletinDialog from './CreateBulletinDialog.vue'
 import type { BulletinPost } from '@/types'
+import { displayName, BulletinPriorityMap, BulletinPriorityColor } from '@/types'
 
 const bulletinStore = useBulletinStore()
 const groupStore = useGroupStore()
 
 const showCreate = ref(false)
 const editingPost = ref<BulletinPost | null>(null)
+const detailPost = ref<BulletinPost | null>(null)
 let unsubscribeFn: (() => void) | null = null
 
 async function loadAll() {
@@ -38,6 +40,7 @@ function stopSubscription() {
 }
 
 function handleCardClick(post: BulletinPost) {
+  detailPost.value = post
   bulletinStore.markAsRead(post.id)
 }
 
@@ -66,6 +69,52 @@ function handleDialogClose() {
   editingPost.value = null
 }
 
+const detailVisible = computed({
+  get: () => !!detailPost.value,
+  set: (v: boolean) => { if (!v) detailPost.value = null }
+})
+
+function priorityLabel(post: BulletinPost) { return BulletinPriorityMap[post.priority] }
+function priorityColor(post: BulletinPost) { return BulletinPriorityColor[post.priority] }
+function creatorName(post: BulletinPost) { return displayName(post.expand?.creator) }
+function isExpired(post: BulletinPost) {
+  return post.expiresAt ? new Date(post.expiresAt) <= new Date() : false
+}
+
+function formatTime(dateStr: string) {
+  const d = new Date(dateStr)
+  const now = new Date()
+  const diff = now.getTime() - d.getTime()
+  const minutes = Math.floor(diff / (1000 * 60))
+  const hours = Math.floor(minutes / 60)
+  const days = Math.floor(hours / 24)
+  if (days > 0) return `${days}天前`
+  if (hours > 0) return `${hours}小时前`
+  if (minutes > 0) return `${minutes}分钟前`
+  return '刚刚'
+}
+
+function formatDate(dateStr: string) {
+  return new Date(dateStr).toLocaleString('zh-CN')
+}
+
+async function handleDeleteFromDetail(post: BulletinPost) {
+  try {
+    await ElMessageBox.confirm(
+      `确定要删除公告 "${post.title}" 吗？`,
+      '确认删除',
+      { confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning' }
+    )
+    await bulletinStore.remove(post.id)
+    detailPost.value = null
+    ElMessage.success('删除成功')
+  } catch (error: any) {
+    if (error !== 'cancel') {
+      ElMessage.error(error.message || '删除失败')
+    }
+  }
+}
+
 onMounted(() => {
   if (groupStore.currentGroupId) {
     loadAll()
@@ -106,6 +155,43 @@ onUnmounted(() => {
       @updated="loadAll(); showCreate = false; handleDialogClose()"
     />
 
+    <!-- 详情弹窗 -->
+    <el-dialog
+      v-model="detailVisible"
+      :title="null"
+      width="580px"
+      :close-on-click-modal="true"
+      class="bulletin-detail-dialog"
+      @closed="detailPost = null"
+    >
+      <template v-if="detailPost">
+        <div class="bulletin-detail__tags">
+          <span
+            class="bulletin-detail__priority"
+            :style="{ background: priorityColor(detailPost) + '18', color: priorityColor(detailPost) }"
+          >
+            {{ priorityLabel(detailPost) }}
+          </span>
+          <span v-if="detailPost.pinned" class="bulletin-detail__pinned">置顶</span>
+          <span v-if="isExpired(detailPost)" class="bulletin-detail__expired">已过期</span>
+        </div>
+        <h2 class="bulletin-detail__title">{{ detailPost.title }}</h2>
+        <div class="bulletin-detail__meta">
+          <span class="bulletin-detail__author">{{ creatorName(detailPost) }}</span>
+          <span class="bulletin-detail__sep">·</span>
+          <span class="bulletin-detail__time">{{ formatTime(detailPost.created) }}</span>
+          <span v-if="detailPost.expiresAt" class="bulletin-detail__expires">
+            · 截止 {{ formatDate(detailPost.expiresAt) }}
+          </span>
+        </div>
+        <div class="bulletin-detail__content">{{ detailPost.content }}</div>
+        <div class="bulletin-detail__footer">
+          <button class="bulletin-detail__btn" @click="handleEdit(detailPost!); detailPost = null">编辑</button>
+          <button class="bulletin-detail__btn bulletin-detail__btn--danger" @click="handleDeleteFromDetail(detailPost!)">删除</button>
+        </div>
+      </template>
+    </el-dialog>
+
     <!-- 置顶公告 -->
     <section v-if="bulletinStore.pinnedPosts.length > 0" class="bulletin-board__section">
       <div class="bulletin-board__section-header">
@@ -298,3 +384,105 @@ onUnmounted(() => {
   }
 }
 </style>
+
+<style>
+.bulletin-detail-dialog .el-dialog__header {
+  display: none;
+}
+.bulletin-detail-dialog .el-dialog__body {
+  padding: 28px 32px;
+}
+</style>
+
+<style scoped>
+.bulletin-detail__tags {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 14px;
+}
+
+.bulletin-detail__priority,
+.bulletin-detail__pinned,
+.bulletin-detail__expired {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 10px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.bulletin-detail__pinned {
+  background: rgba(5, 150, 105, 0.1);
+  color: var(--gg-primary);
+}
+
+.bulletin-detail__expired {
+  background: var(--gg-bg-elevated);
+  color: var(--gg-text-muted);
+}
+
+.bulletin-detail__title {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--gg-text);
+  margin: 0 0 12px;
+  line-height: 1.4;
+}
+
+.bulletin-detail__meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--gg-text-muted);
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--gg-border);
+}
+
+.bulletin-detail__sep {
+  color: var(--gg-border);
+}
+
+.bulletin-detail__content {
+  font-size: 14px;
+  color: var(--gg-text);
+  line-height: 1.8;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 50vh;
+  overflow-y: auto;
+}
+
+.bulletin-detail__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 1px solid var(--gg-border);
+}
+
+.bulletin-detail__btn {
+  padding: 6px 16px;
+  border: 1px solid var(--gg-border);
+  border-radius: var(--gg-radius-sm);
+  background: var(--gg-bg-card);
+  color: var(--gg-text-secondary);
+  font-size: 13px;
+  cursor: pointer;
+  transition: border-color 0.2s, color 0.2s;
+}
+
+.bulletin-detail__btn:hover {
+  border-color: var(--gg-primary);
+  color: var(--gg-primary);
+}
+
+.bulletin-detail__btn--danger:hover {
+  border-color: var(--gg-danger);
+  color: var(--gg-danger);
+}
+</style>
diff --git a/frontend/src/views/Changelog.vue b/frontend/src/views/Changelog.vue
index b192bf8..66473f0 100644
--- a/frontend/src/views/Changelog.vue
+++ b/frontend/src/views/Changelog.vue
@@ -10,6 +10,16 @@ interface LogEntry {
 }
 
 const logs = ref<LogEntry[]>([
+  {
+    version: 'v0.3.4',
+    date: '2026-04-21',
+    title: '公告详情弹窗',
+    items: [
+      { type: 'feat', text: '公告卡片点击打开详情弹窗，展示完整内容（保留换行格式）' },
+      { type: 'feat', text: '详情弹窗显示优先级标签、作者、发布时间、截止时间等信息' },
+      { type: 'feat', text: '详情弹窗内置编辑和删除操作按钮' },
+    ]
+  },
   {
     version: 'v0.3.3',
     date: '2026-04-20',