146 lines
6.4 KiB
TypeScript
146 lines
6.4 KiB
TypeScript
import { Metadata } from 'next'
|
|
|
|
export const metadata: Metadata = {
|
|
title: '消息发送 - Crop-X 智慧农业管理系统',
|
|
description: '消息推送管理页面',
|
|
}
|
|
|
|
export default function MessageSendPage() {
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h2 className="text-2xl font-bold text-gray-800 mb-6">
|
|
📤 消息发送管理
|
|
</h2>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<div className="bg-blue-50 rounded-lg p-6">
|
|
<h3 className="text-lg font-semibold text-blue-900 mb-4">
|
|
创建新消息
|
|
</h3>
|
|
<form className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
消息标题
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
placeholder="请输入消息标题"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
接收人群组
|
|
</label>
|
|
<select className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<option>全体用户</option>
|
|
<option>农场管理员</option>
|
|
<option>农机操作员</option>
|
|
<option>系统管理员</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
消息类型
|
|
</label>
|
|
<select className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<option>系统通知</option>
|
|
<option>任务提醒</option>
|
|
<option>维护通知</option>
|
|
<option>紧急警报</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
消息内容
|
|
</label>
|
|
<textarea
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
rows={4}
|
|
placeholder="请输入消息内容"
|
|
></textarea>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
发送方式
|
|
</label>
|
|
<div className="space-y-2">
|
|
<label className="flex items-center">
|
|
<input type="checkbox" className="mr-2" defaultChecked />
|
|
站内消息
|
|
</label>
|
|
<label className="flex items-center">
|
|
<input type="checkbox" className="mr-2" />
|
|
邮件通知
|
|
</label>
|
|
<label className="flex items-center">
|
|
<input type="checkbox" className="mr-2" />
|
|
短信通知
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
|
>
|
|
发送消息
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div className="bg-green-50 rounded-lg p-6">
|
|
<h3 className="text-lg font-semibold text-green-900 mb-4">
|
|
最近发送记录
|
|
</h3>
|
|
<div className="space-y-3">
|
|
{[
|
|
{ id: 'MSG001', title: '系统维护通知', recipients: '全体用户', time: '2024-10-20 14:30', status: '已发送' },
|
|
{ id: 'MSG002', title: '农机任务分配', recipients: '农机操作员', time: '2024-10-20 12:15', status: '已发送' },
|
|
{ id: 'MSG003', title: '天气预警', recipients: '农场管理员', time: '2024-10-20 09:45', status: '已发送' },
|
|
{ id: 'MSG004', title: '数据备份提醒', recipients: '系统管理员', time: '2024-10-19 23:00', status: '已发送' },
|
|
].map((message) => (
|
|
<div key={message.id} className="bg-white rounded-lg p-4 shadow-sm">
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<h4 className="font-semibold text-gray-800">{message.title}</h4>
|
|
<p className="text-sm text-gray-600">接收人: {message.recipients}</p>
|
|
<p className="text-xs text-gray-500">{message.time}</p>
|
|
</div>
|
|
<span className="inline-block px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">
|
|
{message.status}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 bg-yellow-50 rounded-lg p-6">
|
|
<h3 className="text-lg font-semibold text-yellow-900 mb-4">
|
|
📊 消息统计
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div className="bg-white rounded-lg p-4 text-center">
|
|
<div className="text-2xl font-bold text-blue-600 mb-2">156</div>
|
|
<div className="text-sm text-gray-600">今日发送</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg p-4 text-center">
|
|
<div className="text-2xl font-bold text-green-600 mb-2">98.5%</div>
|
|
<div className="text-sm text-gray-600">发送成功率</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg p-4 text-center">
|
|
<div className="text-2xl font-bold text-purple-600 mb-2">1,234</div>
|
|
<div className="text-sm text-gray-600">总发送量</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg p-4 text-center">
|
|
<div className="text-2xl font-bold text-orange-600 mb-2">8</div>
|
|
<div className="text-sm text-gray-600">待发送</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |