wangys/schoolNews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

消息模块、爬虫

Browse Source
This commit is contained in:
wangys
2025-11-13 19:00:27 +08:00
parent 2982d53800
commit e20a7755f8
85 changed files with 8637 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

473
schoolNewsWeb/src/views/user/message/MyMessageDetailView.vue Normal file
View File

@@ -0,0 +1,473 @@
<template>
<div class="my-message-detail" v-loading="loading">
<div class="header">
<el-button @click="handleBack" text>
<el-icon><ArrowLeft /></el-icon>
返回消息列表
</el-button>
</div>
<div v-if="message" class="detail-container">
<!-- 消息卡片 -->
<el-card class="message-card" shadow="never">
<!-- 标题区域 -->
<div class="message-header">
<div class="title-area">
<h1 class="message-title">{{ message.title }}</h1>
<div class="title-badges">
<el-tag :type="getMessageTypeTag(message.messageType)">
{{ getMessageTypeText(message.messageType) }}
</el-tag>
<MessagePriorityBadge :priority="message.priority || ''" />
</div>
</div>
<div class="message-meta">
<div class="meta-item">
<el-icon><User /></el-icon>
<span>发送人：{{ message.senderName }}</span>
</div>
<div class="meta-item">
<el-icon><OfficeBuilding /></el-icon>
<span>部门：{{ message.senderDeptName }}</span>
</div>
<div class="meta-item">
<el-icon><Clock /></el-icon>
<span>发送时间：{{ formatDateTime(message.actualSendTime) }}</span>
</div>
<div v-if="message.isRead" class="meta-item read-status">
<el-icon><Check /></el-icon>
<span>已读于：{{ formatDateTime(message.readTime) }}</span>
</div>
<div v-else class="meta-item unread-status">
<el-icon><View /></el-icon>
<span>未读</span>
</div>
</div>
</div>
<!-- 消息内容 -->
<el-divider />
<div class="message-content">
<div class="content-body">
{{ message.content }}
</div>
</div>
<!-- 发送方式 -->
<el-divider />
<div class="send-info">
<div class="info-label">
<el-icon><Message /></el-icon>
<span>发送方式：</span>
</div>
<div class="send-methods">
<el-tag
v-if="message.sendMethod === 'system' || !message.sendMethod"
type="primary"
size="small"
>
系统消息
</el-tag>
<el-tag
v-if="message.sendMethod === 'email'"
type="success"
size="small"
>
邮件通知
</el-tag>
<el-tag
v-if="message.sendMethod === 'sms'"
type="warning"
size="small"
>
短信通知
</el-tag>
</div>
</div>
<!-- 发送状态 -->
<div class="send-status">
<div class="info-label">
<el-icon><CircleCheck /></el-icon>
<span>发送状态：</span>
</div>
<el-tag
:type="getSendStatusType(message.sendStatus)"
size="small"
>
{{ getSendStatusText(message.sendStatus) }}
</el-tag>
<span v-if="message.failReason" class="fail-reason">
（{{ message.failReason }}）
</span>
</div>
<!-- 操作按钮 -->
<el-divider />
<div class="message-actions">
<el-button
v-if="!message.isRead"
type="primary"
@click="handleMarkAsRead"
:loading="marking"
>
<el-icon><Check /></el-icon>
标记为已读
</el-button>
</div>
</el-card>
<!-- 相关消息推荐（可选功能） -->
<el-card v-if="relatedMessages.length > 0" class="related-messages" shadow="never">
<template #header>
<div class="card-header">
<span class="header-title">相关消息</span>
</div>
</template>
<div class="related-list">
<div
v-for="relMsg in relatedMessages"
:key="relMsg.messageID"
class="related-item"
@click="handleViewRelated(relMsg.messageID)"
>
<div class="related-title">
<span v-if="!relMsg.isRead" class="unread-dot"></span>
{{ relMsg.title }}
</div>
<div class="related-meta">
<span>{{ formatDateTime(relMsg.actualSendTime) }}</span>
</div>
</div>
</div>
</el-card>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import {
ArrowLeft,
User,
OfficeBuilding,
Clock,
Check,
View,
Message,
CircleCheck
} from '@element-plus/icons-vue';
import { messageApi } from '@/apis/message';
import type { MessageUserVO } from '@/types';
import { MessagePriorityBadge } from '@/components/message';
defineOptions({
name: 'MyMessageDetailView'
});
const router = useRouter();
const route = useRoute();
const messageID = route.params.messageID as string;
const loading = ref(false);
const marking = ref(false);
const message = ref<MessageUserVO | null>(null);
const relatedMessages = ref<MessageUserVO[]>([]);
/** 获取消息类型标签 */
function getMessageTypeTag(type?: string): string {
const map: Record<string, string> = {
notice: 'info',
announcement: 'warning',
warning: 'danger',
system: 'success'
};
return map[type || ''] || '';
}
/** 获取消息类型文本 */
function getMessageTypeText(type?: string): string {
const map: Record<string, string> = {
notice: '通知',
announcement: '公告',
warning: '预警',
system: '系统消息'
};
return map[type || ''] || type || '';
}
/** 获取发送状态类型 */
function getSendStatusType(status?: string): string {
const map: Record<string, string> = {
pending: 'info',
success: 'success',
failed: 'danger'
};
return map[status || ''] || '';
}
/** 获取发送状态文本 */
function getSendStatusText(status?: string): string {
const map: Record<string, string> = {
pending: '待发送',
success: '发送成功',
failed: '发送失败'
};
return map[status || ''] || status || '';
}
/** 格式化日期时间 */
function formatDateTime(dateStr?: string): string {
if (!dateStr) return '-';
const date = new Date(dateStr);
return date.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
}
/** 加载消息详情 */
async function loadMessageDetail() {
loading.value = true;
try {
const result = await messageApi.getMyMessageDetail(messageID);
if (result.success) {
message.value = result.data || null;
// 如果是未读消息，自动标记为已读
if (message.value && !message.value.isRead) {
await autoMarkAsRead();
}
} else {
ElMessage.error(result.message || '加载失败');
}
} catch (error) {
console.error('加载消息详情失败:', error);
ElMessage.error('加载失败');
} finally {
loading.value = false;
}
}
/** 自动标记为已读 */
async function autoMarkAsRead() {
try {
await messageApi.markAsRead(messageID);
// 不显示成功消息，静默标记
} catch (error) {
console.error('自动标记已读失败:', error);
}
}
/** 手动标记为已读 */
async function handleMarkAsRead() {
marking.value = true;
try {
const result = await messageApi.markAsRead(messageID);
if (result.success) {
ElMessage.success('已标记为已读');
await loadMessageDetail();
} else {
ElMessage.error(result.message || '操作失败');
}
} catch (error) {
console.error('标记已读失败:', error);
ElMessage.error('操作失败');
} finally {
marking.value = false;
}
}
/** 查看相关消息 */
function handleViewRelated(relatedMessageID?: string) {
if (!relatedMessageID) return;
router.push(`/user/message/detail/${relatedMessageID}`);
// 重新加载当前页面
loadMessageDetail();
}
/** 返回 */
function handleBack() {
router.back()
}
onMounted(() => {
loadMessageDetail();
});
</script>
<style lang="scss" scoped>
.my-message-detail {
min-height: 100vh;
background-color: #f5f5f5;
padding: 20px;
.header {
max-width: 900px;
margin: 0 auto 20px;
}
.detail-container {
max-width: 900px;
margin: 0 auto;
.message-card {
margin-bottom: 20px;
.message-header {
.title-area {
margin-bottom: 20px;
.message-title {
margin: 0 0 12px 0;
font-size: 28px;
font-weight: 600;
color: #333;
line-height: 1.4;
}
.title-badges {
display: flex;
gap: 8px;
}
}
.message-meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
padding: 16px;
background-color: #f9f9f9;
border-radius: 8px;
.meta-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: #666;
&.read-status {
color: #67c23a;
}
&.unread-status {
color: #409eff;
}
.el-icon {
font-size: 16px;
}
}
}
}
.message-content {
.content-body {
font-size: 16px;
line-height: 1.8;
color: #333;
white-space: pre-wrap;
word-wrap: break-word;
min-height: 200px;
padding: 20px 0;
}
}
.send-info,
.send-status {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
.info-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: #666;
font-weight: 500;
.el-icon {
font-size: 16px;
}
}
.send-methods {
display: flex;
gap: 8px;
}
.fail-reason {
font-size: 12px;
color: #f56c6c;
}
}
.message-actions {
display: flex;
gap: 12px;
padding-top: 8px;
}
}
.related-messages {
.card-header {
.header-title {
font-size: 16px;
font-weight: 600;
color: #333;
}
}
.related-list {
.related-item {
padding: 12px;
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
transition: background-color 0.2s;
&:last-child {
border-bottom: none;
}
&:hover {
background-color: #f9f9f9;
}
.related-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #333;
margin-bottom: 6px;
.unread-dot {
width: 6px;
height: 6px;
background-color: #f56c6c;
border-radius: 50%;
flex-shrink: 0;
}
}
.related-meta {
font-size: 12px;
color: #999;
}
}
}
}
}
}
</style>

507
schoolNewsWeb/src/views/user/message/MyMessageListView.vue Normal file
View File

@@ -0,0 +1,507 @@
<template>
<div class="my-message-list">
<div class="header">
<h2>我的消息</h2>
<div class="header-actions">
<el-badge :value="unreadCount" :hidden="unreadCount === 0">
<el-button @click="loadMessages">
<el-icon><Refresh /></el-icon>
刷新
</el-button>
</el-badge>
<el-button @click="handleMarkAllRead" :disabled="selectedMessages.length === 0">
<el-icon><Check /></el-icon>
标记已读
</el-button>
</div>
</div>
<!-- 筛选条件 -->
<el-form :model="filterForm" inline class="filter-form">
<el-form-item label="消息类型">
<el-select class="w-full" v-model="filterForm.messageType" placeholder="全部" clearable>
<el-option label="通知" value="notice" />
<el-option label="公告" value="announcement" />
<el-option label="预警" value="warning" />
<el-option label="系统消息" value="system" />
</el-select>
</el-form-item>
<el-form-item label="阅读状态">
<el-select class="w-full" v-model="filterForm.isRead" placeholder="全部" clearable>
<el-option label="未读" :value="false" />
<el-option label="已读" :value="true" />
</el-select>
</el-form-item>
<el-form-item label="优先级">
<el-select class="w-full" v-model="filterForm.priority" placeholder="全部" clearable>
<el-option label="紧急" value="urgent" />
<el-option label="重要" value="important" />
<el-option label="普通" value="normal" />
</el-select>
</el-form-item>
<el-form-item class="filter-actions">
<el-button type="primary" @click="handleSearch">搜索</el-button>
<el-button @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
<!-- 消息列表 -->
<div class="message-cards" v-loading="loading">
<el-checkbox-group v-model="selectedMessages" class="message-group">
<div
v-for="msg in messageList"
:key="msg.messageID"
class="message-card"
:class="{ unread: !msg.isRead, urgent: msg.priority === 'urgent' }"
>
<div class="card-header">
<el-checkbox :value="msg.messageID" class="message-checkbox" />
<div class="card-title-area" @click="handleViewDetail(msg)">
<span v-if="!msg.isRead" class="unread-dot"></span>
<h3 class="card-title">{{ msg.title }}</h3>
<MessagePriorityBadge :priority="msg.priority || ''" />
</div>
<div class="card-actions">
<el-button
v-if="!msg.isRead"
type="primary"
size="small"
link
@click.stop="handleMarkAsRead(msg.messageID)"
>
标记已读
</el-button>
<el-button
type="primary"
size="small"
link
@click="handleViewDetail(msg)"
>
查看详情
</el-button>
</div>
</div>
<div class="card-body" @click="handleViewDetail(msg)">
<div class="message-meta">
<el-tag :type="getMessageTypeTag(msg.messageType)" size="small">
{{ getMessageTypeText(msg.messageType) }}
</el-tag>
<span class="sender-info">
<el-icon><User /></el-icon>
{{ msg.senderName }} · {{ msg.senderDeptName }}
</span>
<span class="send-time">
<el-icon><Clock /></el-icon>
{{ formatDateTime(msg.actualSendTime) }}
</span>
<el-tag
v-if="msg.isRead"
type="success"
size="small"
>
已读于 {{ formatDateTime(msg.readTime) }}
</el-tag>
</div>
<div class="message-preview">
{{ getPreviewText(msg.content) }}
</div>
</div>
</div>
</el-checkbox-group>
<el-empty
v-if="messageList.length === 0 && !loading"
description="暂无消息"
/>
</div>
<!-- 分页组件 -->
<div class="pagination-container">
<el-pagination
v-model:current-page="pageParam.pageNumber"
v-model:page-size="pageParam.pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handlePageChange"
/>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { Refresh, Check, User, Clock } from '@element-plus/icons-vue';
import { messageApi } from '@/apis/message';
import type { MessageUserVO, PageParam } from '@/types';
import { MessagePriorityBadge } from '@/components/message';
defineOptions({
name: 'MyMessageListView'
});
const router = useRouter();
const loading = ref(false);
const messageList = ref<MessageUserVO[]>([]);
const selectedMessages = ref<string[]>([]);
const unreadCount = ref(0);
// 分页参数
const pageParam = ref<PageParam>({
pageNumber: 1,
pageSize: 10
});
const total = ref(0);
// 筛选表单
const filterForm = ref<Partial<MessageUserVO>>({
messageType: undefined,
priority: undefined,
isRead: undefined
});
/** 获取消息类型标签 */
function getMessageTypeTag(type?: string): string {
const map: Record<string, string> = {
notice: 'info',
announcement: 'warning',
warning: 'danger',
system: 'success'
};
return map[type || ''] || '';
}
/** 获取消息类型文本 */
function getMessageTypeText(type?: string): string {
const map: Record<string, string> = {
notice: '通知',
announcement: '公告',
warning: '预警',
system: '系统'
};
return map[type || ''] || type || '';
}
/** 格式化日期时间 */
function formatDateTime(dateStr?: string): string {
if (!dateStr) return '-';
const date = new Date(dateStr);
const now = new Date();
const diff = now.getTime() - date.getTime();
// 1分钟内
if (diff < 60000) {
return '刚刚';
}
// 1小时内
if (diff < 3600000) {
return `${Math.floor(diff / 60000)}分钟前`;
}
// 24小时内
if (diff < 86400000) {
return `${Math.floor(diff / 3600000)}小时前`;
}
// 7天内
if (diff < 604800000) {
return `${Math.floor(diff / 86400000)}天前`;
}
return date.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
});
}
/** 获取预览文本 */
function getPreviewText(content?: string): string {
if (!content) return '';
return content.length > 100 ? content.substring(0, 100) + '...' : content;
}
/** 加载消息列表 */
async function loadMessages() {
loading.value = true;
try {
const result = await messageApi.getMyMessages(pageParam.value, filterForm.value);
if (result.success) {
messageList.value = result.dataList || [];
total.value = result.pageParam?.totalElements || 0;
} else {
ElMessage.error(result.message || '加载失败');
}
} catch (error) {
console.error('加载消息列表失败:', error);
ElMessage.error('加载失败');
} finally {
loading.value = false;
}
}
/** 加载未读数量 */
async function loadUnreadCount() {
try {
const result = await messageApi.getUnreadCount();
if (result.success) {
unreadCount.value = result.data || 0;
}
} catch (error) {
console.error('加载未读数量失败:', error);
}
}
/** 搜索 */
function handleSearch() {
pageParam.value.pageNumber = 1;
loadMessages();
}
/** 重置 */
function handleReset() {
filterForm.value = {
isRead: undefined
};
handleSearch();
}
/** 分页大小变更 */
function handleSizeChange() {
pageParam.value.pageNumber = 1;
loadMessages();
}
/** 页码变更 */
function handlePageChange() {
loadMessages();
}
/** 查看详情 */
async function handleViewDetail(msg: MessageUserVO) {
// 如果是未读消息，先标记为已读
if (!msg.isRead && msg.messageID) {
await handleMarkAsRead(msg.messageID, false);
}
router.push(`/user/message/detail/${msg.messageID}`);
}
/** 标记单条消息为已读 */
async function handleMarkAsRead(messageID?: string, showMessage = true) {
if (!messageID) return;
try {
const result = await messageApi.markAsRead(messageID);
if (result.success) {
if (showMessage) {
ElMessage.success('已标记为已读');
}
await loadMessages();
await loadUnreadCount();
} else {
ElMessage.error(result.message || '操作失败');
}
} catch (error) {
console.error('标记已读失败:', error);
ElMessage.error('操作失败');
}
}
/** 批量标记为已读 */
async function handleMarkAllRead() {
if (selectedMessages.value.length === 0) {
ElMessage.warning('请选择要标记的消息');
return;
}
try {
const result = await messageApi.batchMarkAsRead(selectedMessages.value);
if (result.success) {
ElMessage.success('已标记为已读');
selectedMessages.value = [];
await loadMessages();
await loadUnreadCount();
} else {
ElMessage.error(result.message || '操作失败');
}
} catch (error) {
console.error('批量标记已读失败:', error);
ElMessage.error('操作失败');
}
}
onMounted(() => {
loadMessages();
loadUnreadCount();
});
</script>
<style lang="scss" scoped>
.my-message-list {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
h2 {
margin: 0;
font-size: 24px;
font-weight: 600;
color: #333;
}
.header-actions {
display: flex;
gap: 10px;
}
}
.filter-form {
margin-bottom: 20px;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px 24px;
::v-deep(.el-form-item) {
margin-bottom: 0;
}
::v-deep(.el-select) {
width: 180px;
}
.filter-actions {
display: flex;
gap: 12px;
.el-button {
min-width: 88px;
}
}
}
.message-cards {
.message-group {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
}
.message-card {
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
transition: all 0.3s;
cursor: pointer;
&:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-color: #c8232c;
}
&.unread {
border-left: 4px solid #409eff;
background-color: #f0f9ff;
}
&.urgent {
border-left: 4px solid #f56c6c;
}
.card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
.message-checkbox {
flex-shrink: 0;
}
.card-title-area {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
min-height: 32px;
padding: 4px 0;
flex-wrap: wrap;
.unread-dot {
width: 8px;
height: 8px;
background-color: #f56c6c;
border-radius: 50%;
flex-shrink: 0;
}
.card-title {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #333;
flex: 1 1 auto;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
line-height: 1.4;
}
}
.card-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
}
.card-body {
.message-meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
font-size: 14px;
color: #666;
.sender-info,
.send-time {
display: flex;
align-items: center;
gap: 4px;
}
}
.message-preview {
font-size: 14px;
color: #666;
line-height: 1.6;
}
}
}
}
}
</style>

8
schoolNewsWeb/src/views/user/message/index.ts Normal file
View File

@@ -0,0 +1,8 @@
/**
* @description 用户消息视图导出
* @author Claude
* @since 2025-11-13
*/
export { default as MyMessageListView } from './MyMessageListView.vue';
export { default as MyMessageDetailView } from './MyMessageDetailView.vue';