xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 系统公告弹窗前端

Browse Source
This commit is contained in:
Gsh
2025-11-05 23:12:23 +08:00
parent 09fb43ee14
commit 17337b8d78
21 changed files with 2729 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

370
Yi.Ai.Vue3/src/pages/activity/detail.vue Normal file
View File

@@ -0,0 +1,370 @@
<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { getActivityDetail } from '@/api'
import type { ActivityDetailResponse } from '@/api'
const route = useRoute()
const router = useRouter()
const loading = ref(false)
const activityDetail = ref<ActivityDetailResponse | null>(null)
// 获取活动详情
async function fetchActivityDetail() {
const id = route.params.id as string
if (!id)
return
loading.value = true
try {
const res = await getActivityDetail(id)
activityDetail.value = res.data
}
catch (error) {
console.error('获取活动详情失败:', error)
ElMessage.error('获取活动详情失败')
}
finally {
loading.value = false
}
}
// 返回上一页
function goBack() {
router.back()
}
// 格式化时间
function formatDateTime(time?: string) {
if (!time)
return '-'
const date = new Date(time)
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
}
// 页面加载时获取详情
onMounted(() => {
fetchActivityDetail()
})
</script>
<template>
<div class="activity-detail-page">
<el-card v-loading="loading" class="detail-card">
<template #header>
<div class="card-header">
<el-button type="primary" link @click="goBack">
<el-icon><i-ep-arrow-left /></el-icon>
返回
</el-button>
</div>
</template>
<div v-if="activityDetail" class="detail-content">
<!-- 活动头部 -->
<div class="detail-header">
<h1 class="detail-title">{{ activityDetail.title }}</h1>
<div class="detail-meta">
<el-tag
v-if="activityDetail.status === 'active'"
type="success"
size="large"
>
进行中
</el-tag>
<el-tag
v-else-if="activityDetail.status === 'expired'"
type="info"
size="large"
>
已结束
</el-tag>
<span class="meta-item">
<el-icon><i-ep-view /></el-icon>
浏览 {{ activityDetail.views || 0 }}
</span>
<span class="meta-item">
<el-icon><i-ep-user /></el-icon>
参与 {{ activityDetail.participantCount || 0 }}
</span>
</div>
</div>
<!-- 活动封面 -->
<div v-if="activityDetail.coverImage" class="detail-cover">
<img :src="activityDetail.coverImage" :alt="activityDetail.title">
</div>
<!-- 活动描述 -->
<div class="detail-description">
<h3>活动简介</h3>
<p>{{ activityDetail.description }}</p>
</div>
<!-- 活动时间 -->
<div class="detail-time">
<el-descriptions :column="2" border>
<el-descriptions-item label="开始时间">
{{ formatDateTime(activityDetail.startTime) }}
</el-descriptions-item>
<el-descriptions-item label="结束时间">
{{ formatDateTime(activityDetail.endTime) }}
</el-descriptions-item>
<el-descriptions-item label="发布时间">
{{ formatDateTime(activityDetail.createdAt) }}
</el-descriptions-item>
<el-descriptions-item label="更新时间">
{{ formatDateTime(activityDetail.updatedAt) }}
</el-descriptions-item>
</el-descriptions>
</div>
<!-- 活动详细内容 -->
<div class="detail-body">
<h3>活动详情</h3>
<div class="content-html" v-html="activityDetail.content" />
</div>
</div>
<el-empty v-else description="暂无活动详情" />
</el-card>
</div>
</template>
<style scoped lang="scss">
.activity-detail-page {
padding: 24px;
background: #f5f7fa;
min-height: 100vh;
.detail-card {
max-width: 1200px;
margin: 0 auto;
}
.card-header {
display: flex;
align-items: center;
}
.detail-content {
.detail-header {
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid #e4e7ed;
.detail-title {
margin: 0 0 16px 0;
font-size: 28px;
font-weight: 600;
color: #303133;
line-height: 1.4;
}
.detail-meta {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
.meta-item {
display: flex;
align-items: center;
gap: 4px;
font-size: 14px;
color: #606266;
.el-icon {
font-size: 16px;
}
}
}
}
.detail-cover {
margin-bottom: 24px;
border-radius: 8px;
overflow: hidden;
img {
width: 100%;
height: auto;
display: block;
}
}
.detail-description {
margin-bottom: 24px;
padding: 20px;
background: #f9fafb;
border-radius: 8px;
h3 {
margin: 0 0 12px 0;
font-size: 18px;
font-weight: 600;
color: #303133;
}
p {
margin: 0;
font-size: 15px;
color: #606266;
line-height: 1.8;
}
}
.detail-time {
margin-bottom: 24px;
}
.detail-body {
h3 {
margin: 0 0 16px 0;
font-size: 18px;
font-weight: 600;
color: #303133;
}
.content-html {
font-size: 15px;
color: #303133;
line-height: 1.8;
:deep(img) {
max-width: 100%;
height: auto;
border-radius: 4px;
}
:deep(p) {
margin: 12px 0;
}
:deep(h1),
:deep(h2),
:deep(h3),
:deep(h4),
:deep(h5),
:deep(h6) {
margin: 20px 0 12px;
font-weight: 600;
color: #303133;
}
:deep(ul),
:deep(ol) {
padding-left: 24px;
margin: 12px 0;
}
:deep(li) {
margin: 8px 0;
}
:deep(blockquote) {
margin: 16px 0;
padding: 12px 16px;
background: #f5f7fa;
border-left: 4px solid #409eff;
color: #606266;
}
:deep(code) {
padding: 2px 6px;
background: #f5f7fa;
border-radius: 3px;
font-family: 'Courier New', monospace;
font-size: 14px;
}
:deep(pre) {
margin: 16px 0;
padding: 16px;
background: #282c34;
border-radius: 4px;
overflow-x: auto;
code {
background: none;
padding: 0;
color: #abb2bf;
}
}
}
}
}
}
// 移动端适配
@media screen and (max-width: 768px) {
.activity-detail-page {
padding: 12px;
.detail-card {
:deep(.el-card__header) {
padding: 12px;
}
:deep(.el-card__body) {
padding: 12px;
}
}
.detail-content {
.detail-header {
margin-bottom: 16px;
padding-bottom: 16px;
.detail-title {
font-size: 20px;
}
.detail-meta {
gap: 8px;
.meta-item {
font-size: 12px;
}
}
}
.detail-description {
padding: 12px;
margin-bottom: 16px;
h3 {
font-size: 16px;
}
p {
font-size: 14px;
}
}
.detail-time {
margin-bottom: 16px;
:deep(.el-descriptions__label) {
font-size: 12px;
}
:deep(.el-descriptions__content) {
font-size: 12px;
}
}
.detail-body {
h3 {
font-size: 16px;
}
.content-html {
font-size: 14px;
}
}
}
}
}
</style>

364
Yi.Ai.Vue3/src/pages/announcement/detail.vue Normal file
View File

@@ -0,0 +1,364 @@
<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { getAnnouncementDetail } from '@/api'
import type { AnnouncementDetailResponse } from '@/api'
const route = useRoute()
const router = useRouter()
const loading = ref(false)
const announcementDetail = ref<AnnouncementDetailResponse | null>(null)
// 获取公告详情
async function fetchAnnouncementDetail() {
const id = route.params.id as string
if (!id)
return
loading.value = true
try {
const res = await getAnnouncementDetail(id)
announcementDetail.value = res.data
}
catch (error) {
console.error('获取公告详情失败:', error)
ElMessage.error('获取公告详情失败')
}
finally {
loading.value = false
}
}
// 返回上一页
function goBack() {
router.back()
}
// 格式化时间
function formatDateTime(time?: string) {
if (!time)
return '-'
const date = new Date(time)
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
}
// 页面加载时获取详情
onMounted(() => {
fetchAnnouncementDetail()
})
</script>
<template>
<div class="announcement-detail-page">
<el-card v-loading="loading" class="detail-card">
<template #header>
<div class="card-header">
<el-button type="primary" link @click="goBack">
<el-icon><i-ep-arrow-left /></el-icon>
返回
</el-button>
</div>
</template>
<div v-if="announcementDetail" class="detail-content">
<!-- 公告头部 -->
<div class="detail-header">
<h1 class="detail-title">
<el-icon v-if="announcementDetail.isImportant" color="#f56c6c" class="important-icon">
<i-ep-warning />
</el-icon>
{{ announcementDetail.title }}
</h1>
<div class="detail-meta">
<el-tag
v-if="announcementDetail.type === 'latest'"
type="success"
size="large"
>
最新公告
</el-tag>
<el-tag
v-else
type="info"
size="large"
>
历史公告
</el-tag>
<span class="meta-item">
<el-icon><i-ep-view /></el-icon>
浏览 {{ announcementDetail.views || 0 }}
</span>
<span class="meta-item">
<el-icon><i-ep-clock /></el-icon>
发布时间: {{ formatDateTime(announcementDetail.publishTime) }}
</span>
</div>
</div>
<!-- 公告详细内容 -->
<div class="detail-body">
<div class="content-html" v-html="announcementDetail.content" />
</div>
<!-- 公告底部信息 -->
<div class="detail-footer">
<el-divider />
<div class="footer-info">
<span>创建时间: {{ formatDateTime(announcementDetail.createdAt) }}</span>
<span v-if="announcementDetail.updatedAt">
更新时间: {{ formatDateTime(announcementDetail.updatedAt) }}
</span>
</div>
</div>
</div>
<el-empty v-else description="暂无公告详情" />
</el-card>
</div>
</template>
<style scoped lang="scss">
.announcement-detail-page {
padding: 24px;
background: #f5f7fa;
min-height: 100vh;
.detail-card {
max-width: 1200px;
margin: 0 auto;
}
.card-header {
display: flex;
align-items: center;
}
.detail-content {
.detail-header {
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid #e4e7ed;
.detail-title {
margin: 0 0 16px 0;
font-size: 28px;
font-weight: 600;
color: #303133;
line-height: 1.4;
display: flex;
align-items: center;
gap: 8px;
.important-icon {
font-size: 30px;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
}
.detail-meta {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
.meta-item {
display: flex;
align-items: center;
gap: 4px;
font-size: 14px;
color: #606266;
.el-icon {
font-size: 16px;
}
}
}
}
.detail-body {
margin-bottom: 24px;
.content-html {
font-size: 16px;
color: #303133;
line-height: 1.8;
:deep(img) {
max-width: 100%;
height: auto;
border-radius: 4px;
}
:deep(p) {
margin: 12px 0;
}
:deep(h1),
:deep(h2),
:deep(h3),
:deep(h4),
:deep(h5),
:deep(h6) {
margin: 24px 0 12px;
font-weight: 600;
color: #303133;
}
:deep(ul),
:deep(ol) {
padding-left: 24px;
margin: 12px 0;
}
:deep(li) {
margin: 8px 0;
}
:deep(blockquote) {
margin: 16px 0;
padding: 12px 16px;
background: #f5f7fa;
border-left: 4px solid #409eff;
color: #606266;
}
:deep(code) {
padding: 2px 6px;
background: #f5f7fa;
border-radius: 3px;
font-family: 'Courier New', monospace;
font-size: 14px;
}
:deep(pre) {
margin: 16px 0;
padding: 16px;
background: #282c34;
border-radius: 4px;
overflow-x: auto;
code {
background: none;
padding: 0;
color: #abb2bf;
}
}
:deep(table) {
width: 100%;
margin: 16px 0;
border-collapse: collapse;
border-spacing: 0;
th,
td {
padding: 12px;
border: 1px solid #e4e7ed;
text-align: left;
}
th {
background: #f5f7fa;
font-weight: 600;
}
tr:hover {
background: #fafafa;
}
}
}
}
.detail-footer {
.footer-info {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: #909399;
flex-wrap: wrap;
gap: 12px;
}
}
}
}
// 移动端适配
@media screen and (max-width: 768px) {
.announcement-detail-page {
padding: 12px;
.detail-card {
:deep(.el-card__header) {
padding: 12px;
}
:deep(.el-card__body) {
padding: 12px;
}
}
.detail-content {
.detail-header {
margin-bottom: 16px;
padding-bottom: 16px;
.detail-title {
font-size: 20px;
.important-icon {
font-size: 24px;
}
}
.detail-meta {
gap: 8px;
.meta-item {
font-size: 12px;
}
}
}
.detail-body {
margin-bottom: 16px;
.content-html {
font-size: 14px;
:deep(table) {
display: block;
overflow-x: auto;
white-space: nowrap;
th,
td {
padding: 8px;
font-size: 12px;
}
}
}
}
.detail-footer {
.footer-info {
font-size: 11px;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
}
}
}
}
</style>