feat(bulletin): add detail dialog for full bulletin content viewing
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
congsh
@@ -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>
|
||||
|
||||
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user