https://github.com/risesoft-y9/Email
html版前端页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>企业内部邮件系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#4072EE',
sideBg: '#F5F7FA',
borderColor: '#E5E9F2',
textDark: '#1F2937',
textGray: '#6B7280'
}
}
}
}
</script>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;}
.side-active{background:#fff;border-left:3px solid #4072EE;color:#4072EE;}
.page-hide{display:none !important;}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px;}
</style>
</head>
<body class="bg-gray-100">
<div class="flex h-screen w-full">
<!-- 左侧侧边栏 -->
<aside class="w-56 bg-sideBg border-r border-borderColor flex flex-col">
<div class="h-14 border-b border-borderColor flex items-center px-4 text-lg font-bold">
内部邮件系统
</div>
<nav class="flex-1 py-2">
<ul class="text-sm">
<li class="mb-1">
<a onclick="switchPage('writeMail')" class="flex items-center px-5 py-2.5 hover:bg-white cursor-pointer">
<i class="ri-edit-line mr-3 text-textGray"></i>写信
</a>
</li>
<li class="mb-1">
<a onclick="switchPage('inboxPage')" class="flex items-center px-5 py-2.5 side-active cursor-pointer">
<i class="ri-inbox-line mr-3"></i>收件箱
</a>
</li>
<li class="mb-1">
<a class="flex items-center px-5 py-2.5 hover:bg-white cursor-pointer">
<i class="ri-file-text-line mr-3 text-textGray"></i>草稿箱
</a>
</li>
<li class="mb-1">
<a class="flex items-center px-5 py-2.5 hover:bg-white cursor-pointer">
<i class="ri-send-plane-line mr-3 text-textGray"></i>已发送
</a>
</li>
<li class="mb-1">
<a class="flex items-center px-5 py-2.5 hover:bg-white cursor-pointer">
<i class="ri-delete-bin-line mr-3 text-textGray"></i>垃圾箱
</a>
</li>
<li class="mb-1">
<a class="flex items-center px-5 py-2.5 hover:bg-white cursor-pointer">
<i class="ri-star-line mr-3 text-textGray"></i>收藏邮件
</a>
</li>
<li class="mb-1">
<a onclick="switchPage('addressPage')" class="flex items-center px-5 py-2.5 hover:bg-white cursor-pointer">
<i class="ri-contacts-book-line mr-3 text-textGray"></i>通讯录
</a>
</li>
<li class="mb-1">
<a class="flex items-center px-5 py-2.5 hover:bg-white cursor-pointer">
<i class="ri-search-line mr-3 text-textGray"></i>邮件查询
</a>
</li>
</ul>
</nav>
</aside>
<!-- 主内容区域 -->
<main class="flex-1 flex flex-col overflow-hidden">
<!-- 顶部导航栏 -->
<header class="h-14 bg-white border-b border-borderColor flex items-center justify-between px-6">
<div></div>
<div class="flex items-center gap-5 text-sm">
<span class="text-textGray">刷新</span>
<span class="text-textGray">全屏</span>
<span class="text-textGray">系统设置</span>
<span>部门：北方第五事业部</span>
<div class="flex items-center gap-2">
<i class="ri-user-line"></i>
<span>王洪哲</span>
</div>
</div>
</header>
<!-- 内容容器 -->
<div class="flex-1 p-4 overflow-auto">
<!-- 1.收件箱页面 -->
<div id="inboxPage" class="w-full h-full">
<div class="bg-white rounded shadow-sm border border-borderColor h-full flex flex-col">
<div class="p-4 border-b border-borderColor flex justify-between items-center">
<h2 class="text-base font-medium">收件箱</h2>
<div class="flex items-center gap-2">
<input type="text" placeholder="搜索邮件" class="border border-borderColor rounded px-3 py-1.5 text-sm w-52">
</div>
</div>
<div class="p-3 border-b border-borderColor flex gap-3">
<button class="px-3 py-1 bg-primary text-white rounded text-sm">移动至</button>
<button class="px-3 py-1 border border-borderColor rounded text-sm">标记已读</button>
<button class="px-3 py-1 border border-borderColor rounded text-sm">删除</button>
<button class="px-3 py-1 border border-borderColor rounded text-sm">刷新列表</button>
</div>
<div class="flex-1 overflow-auto">
<table class="w-full text-sm">
<thead class="bg-gray-50 sticky top-0">
<tr>
<th class="w-10 py-3 text-center"><input type="checkbox"></th>
<th class="w-12 text-center">状态</th>
<th class="w-12 text-center">收藏</th>
<th class="w-32 text-left pl-3">发件人</th>
<th class="w-32 text-left">收件人</th>
<th class="text-left">邮件主题</th>
<th class="w-16 text-center">附件</th>
<th class="w-40 text-center">发送时间</th>
<th class="w-20 text-center">大小</th>
</tr>
</thead>
<tbody id="mailTableBody">
<!-- JSON渲染邮件列表 -->
</tbody>
</table>
</div>
<div class="p-4 border-t border-borderColor flex justify-between items-center">
<span class="text-textGray text-sm">共 <span id="mailTotal">0</span> 条邮件</span>
<div class="flex items-center gap-2">
<button class="w-7 h-7 border rounded flex items-center justify-center"><</button>
<button class="w-7 h-7 bg-primary text-white rounded flex items-center justify-center">1</button>
<button class="w-7 h-7 border rounded flex items-center justify-center">2</button>
<button class="w-7 h-7 border rounded flex items-center justify-center">3</button>
<span>...</span>
<button class="w-7 h-7 border rounded flex items-center justify-center">19</button>
<button class="w-7 h-7 border rounded flex items-center justify-center">></button>
<select class="border border-borderColor rounded px-2 py-1 text-sm">
<option>20条/页</option>
<option>50条/页</option>
</select>
</div>
</div>
</div>
</div>
<!-- 2.邮件详情页面 -->
<div id="detailPage" class="w-full h-full page-hide">
<div class="bg-white rounded shadow-sm border border-borderColor h-full flex flex-col">
<div class="p-4 border-b border-borderColor flex gap-3">
<button onclick="backInbox()" class="px-3 py-1 border border-primary text-primary rounded text-sm">
<i class="ri-arrow-left-line"></i> 返回
</button>
<button class="px-3 py-1 border border-borderColor rounded text-sm">回复</button>
<button class="px-3 py-1 border border-borderColor rounded text-sm">全部回复</button>
<button class="px-3 py-1 border border-borderColor rounded text-sm">转发</button>
<button class="px-3 py-1 border border-borderColor rounded text-sm">收藏</button>
<button class="px-3 py-1 border border-borderColor rounded text-sm">打印</button>
</div>
<div class="px-6 py-5 bg-gray-50 border-b border-borderColor">
<h3 class="text-lg font-medium mb-3" id="detailTitle"></h3>
<div class="text-sm text-textGray space-y-1">
<p>发件人：<span id="detailSender"></span></p>
<p>收件人：<span id="detailReceiver"></span></p>
<p>发送时间：<span id="detailTime"></span></p>
</div>
</div>
<div class="flex-1 p-6 overflow-auto">
<div id="detailContent" class="text-sm leading-relaxed"></div>
<div class="mt-6 pt-4 border-t border-borderColor">
<p class="text-sm mb-3">附件列表</p>
<div id="detailFileList" class="flex flex-wrap gap-3"></div>
</div>
</div>
<div class="p-4 border-t border-borderColor flex items-center gap-3">
<input type="text" class="flex-1 border border-borderColor rounded px-3 py-2 text-sm" placeholder="快速回复">
<button class="px-4 py-2 bg-primary text-white rounded text-sm">发送回复</button>
</div>
</div>
</div>
<!-- 3.写信页面 -->
<div id="writeMail" class="w-full h-full page-hide">
<div class="bg-white rounded shadow-sm border border-borderColor h-full flex flex-col">
<div class="p-4 border-b border-borderColor flex justify-between items-center">
<h2 class="text-base font-medium">撰写新邮件</h2>
<div class="flex gap-3">
<button class="px-4 py-1 bg-primary text-white rounded text-sm">立即发送</button>
<button class="px-4 py-1 border border-borderColor rounded text-sm">保存草稿</button>
<button class="px-4 py-1 border border-borderColor rounded text-sm">关闭</button>
</div>
</div>
<div class="p-5 space-y-4">
<div class="flex items-center">
<label class="w-16 text-sm">收件人：</label>
<input type="text" class="flex-1 border border-borderColor rounded px-3 py-2 text-sm" placeholder="请输入邮箱/选择联系人">
</div>
<div class="flex items-center">
<label class="w-16 text-sm">邮件主题：</label>
<input type="text" class="flex-1 border border-borderColor rounded px-3 py-2 text-sm" placeholder="请填写邮件主题">
</div>
<div class="flex items-center">
<label class="w-16 text-sm">抄送人：</label>
<input type="text" class="flex-1 border border-borderColor rounded px-3 py-2 text-sm" placeholder="选填">
</div>
<div class="flex items-center">
<label class="w-16 text-sm">密送人：</label>
<input type="text" class="flex-1 border border-borderColor rounded px-3 py-2 text-sm" placeholder="选填">
</div>
<div>
<p class="text-sm mb-2">添加附件：<span class="text-primary cursor-pointer">点击上传文件</span></p>
<div class="flex flex-wrap gap-3"></div>
</div>
</div>
<div class="flex-1 px-5 pb-5">
<div class="border border-borderColor rounded h-full flex flex-col">
<div class="border-b border-borderColor p-2 flex items-center gap-3 flex-wrap">
<button class="p-1 hover:bg-gray-100 rounded"><i class="ri-bold"></i></button>
<button class="p-1 hover:bg-gray-100 rounded"><i class="ri-italic"></i></button>
<button class="p-1 hover:bg-gray-100 rounded"><i class="ri-underline"></i></button>
<span class="w-px h-4 bg-gray-300"></span>
<button class="p-1 hover:bg-gray-100 rounded"><i class="ri-align-left"></i></button>
<button class="p-1 hover:bg-gray-100 rounded"><i class="ri-align-center"></i></button>
<button class="p-1 hover:bg-gray-100 rounded"><i class="ri-align-right"></i></button>
<span class="w-px h-4 bg-gray-300"></span>
<button class="p-1 hover:bg-gray-100 rounded"><i class="ri-list-ordered"></i></button>
<button class="p-1 hover:bg-gray-100 rounded"><i class="ri-font-color"></i></button>
<button class="p-1 hover:bg-gray-100 rounded"><i class="ri-image-line"></i></button>
</div>
<textarea class="flex-1 w-full border-0 outline-none p-3 resize-none text-sm" placeholder="请输入邮件正文内容..."></textarea>
</div>
</div>
</div>
</div>
<!-- 4.通讯录页面 -->
<div id="addressPage" class="w-full h-full page-hide">
<div class="bg-white rounded shadow-sm border border-borderColor h-full flex flex-col">
<div class="p-4 border-b border-borderColor">
<h2 class="text-base font-medium">企业通讯录</h2>
</div>
<div class="flex-1 flex overflow-hidden">
<!-- 左侧部门树 -->
<div class="w-1/3 border-r border-borderColor p-4 overflow-auto">
<div class="flex gap-2 mb-4">
<input type="text" placeholder="搜索联系人" class="flex-1 border border-borderColor rounded px-2 py-1.5 text-sm">
<button class="px-3 py-1 bg-primary text-white rounded text-sm">搜索</button>
</div>
<div class="text-sm">
<div class="py-2 flex items-center">
<i class="ri-arrow-down-s-line mr-1"></i>
<span>有生集团总公司</span>
</div>
<div class="pl-4">
<div class="py-2 hover:bg-gray-50 rounded px-2 cursor-pointer">总经理办公室</div>
<div class="py-2 hover:bg-gray-50 rounded px-2 cursor-pointer">人力资源部</div>
<div class="py-2 hover:bg-gray-50 rounded px-2 cursor-pointer">财务部</div>
<div class="py-2 hover:bg-gray-50 rounded px-2 cursor-pointer">保密管理办公室</div>
<div class="py-2 bg-primary/10 rounded px-2 cursor-pointer text-primary">信息管理中心</div>
<div class="py-2 hover:bg-gray-50 rounded px-2 cursor-pointer">项目研发中心</div>
<div class="py-2 hover:bg-gray-50 rounded px-2 cursor-pointer">北方第五事业部</div>
<div class="py-2 hover:bg-gray-50 rounded px-2 cursor-pointer">深圳分公司</div>
<div class="py-2 hover:bg-gray-50 rounded px-2 cursor-pointer">山西分公司</div>
<div class="py-2 hover:bg-gray-50 rounded px-2 cursor-pointer">内蒙古分公司</div>
</div>
</div>
</div>
<!-- 右侧联系人列表 -->
<div class="flex-1 p-5 overflow-auto">
<div class="grid grid-cols-4 gap-5" id="userContactList">
<!-- JSON渲染联系人 -->
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<script>
// ====================== 模拟JSON邮件数据 ======================
const mailJsonData = [
{
id:1,
title:"大连云服务器统计表8月更新",
sender:"曲金凤",
receiver:"王洪哲、范鸿飞、张郁雯、张艳雪",
time:"2024-08-13 14:42:21",
size:"129KB",
hasFile:true,
content:"各位领导同事大家好：<br><br>2024年8月云服务器成本核算表已统计完成，本月整体支出已核算完毕，各环境费用明细已整理完成。<br><br>DZ正式环境月支出：7407.86元<br>VUE云环境月支出：5479.56元<br><br>所有明细全部在附件表格内，请各位查收核对，如有疑问及时沟通！",
files:[
{name:"大连云服务器统计表.xlsx",size:"129KB",type:"excel"}
]
},
{
id:2,
title:"7月份财务报表汇总",
sender:"李超",
receiver:"王洪哲、张郁雯、王克照",
time:"2024-08-12 10:15:19",
size:"180KB",
hasFile:true,
content:"各位负责人：<br>现将2024年7月全公司财务报表、各项经营指标数据统一发送，请各部门负责人查阅留存，做好部门成本管控工作。",
files:[
{name:"7月财务总表.xlsx",size:"156KB",type:"excel"},
{name:"经营指标说明.docx",size:"24KB",type:"word"}
]
},
{
id:3,
title:"员工考勤数据同步通知",
sender:"苏奥",
receiver:"全体事业部人员",
time:"2024-08-14 00:05:33",
size:"25KB",
hasFile:false,
content:"人事部门已完成8月上半月员工考勤统计，异常考勤已标注完毕，各位如有考勤异议，3日内提交人事复核。",
files:[]
},
{
id:4,
title:"项目进度同步汇报",
sender:"汤红玲",
receiver:"王洪哲、苑鸿飞",
time:"2024-08-12 15:04:35",
size:"63KB",
hasFile:true,
content:"现将联通数科项目本月执行进度整理完毕，附件为进度台账与下周工作计划，请领导审阅批示。",
files:[
{name:"项目进度台账.xlsx",size:"63KB",type:"excel"}
]
}
];
// 模拟联系人JSON数据
const contactJsonData = [
{name:"苑鸿飞",dept:"财务部",avatar:"苑"},
{name:"张郁雯",dept:"财务部",avatar:"张"},
{name:"范鸿飞",dept:"北方第五事业部",avatar:"范"},
{name:"李超",dept:"财务部",avatar:"李"},
{name:"黄明",dept:"深圳分公司",avatar:"黄"},
{name:"马腾",dept:"深圳分公司",avatar:"马"},
{name:"苏奥",dept:"财务部",avatar:"苏"},
{name:"汤红玲",dept:"项目中心",avatar:"汤"}
];
// 页面切换
function switchPage(pageName){
document.getElementById('inboxPage').classList.add('page-hide');
document.getElementById('detailPage').classList.add('page-hide');
document.getElementById('writeMail').classList.add('page-hide');
document.getElementById('addressPage').classList.add('page-hide');
document.getElementById(pageName).classList.remove('page-hide');
}
// 返回收件箱
function backInbox(){
switchPage('inboxPage');
}
// 渲染邮件列表
function renderMailList(){
let html = '';
mailJsonData.forEach(item=>{
html += `
<tr class="border-b border-borderColor hover:bg-gray-50 cursor-pointer" onclick="openMailDetail(${item.id})">
<td class="py-3 text-center"><input type="checkbox"></td>
<td class="text-center"><i class="ri-mail-unread-line text-orange-500"></i></td>
<td class="text-center"><i class="ri-star-line text-textGray"></i></td>
<td class="pl-3">${item.sender}</td>
<td>${item.receiver}</td>
<td class="truncate max-w-xl">${item.title}</td>
<td class="text-center">${item.hasFile ? '<i class="ri-attachment-line"></i>' : ''}</td>
<td class="text-center">${item.time}</td>
<td class="text-center">${item.size}</td>
</tr>
`
});
document.getElementById('mailTableBody').innerHTML = html;
document.getElementById('mailTotal').innerText = mailJsonData.length;
}
// 打开邮件详情
function openMailDetail(id){
let info = mailJsonData.find(v=>v.id === id);
if(!info)return;
document.getElementById('detailTitle').innerText = info.title;
document.getElementById('detailSender').innerText = info.sender;
document.getElementById('detailReceiver').innerText = info.receiver;
document.getElementById('detailTime').innerText = info.time;
document.getElementById('detailContent').innerHTML = info.content;
// 渲染附件
let fileHtml = '';
info.files.forEach(f=>{
fileHtml += `
<div class="flex items-center border border-borderColor rounded p-2 w-52 bg-gray-50">
<i class="ri-file-${f.type==='excel'?'excel':'text'}-line text-primary text-xl mr-2"></i>
<div>
<p class="text-xs truncate">${f.name}</p>
<p class="text-xs text-textGray">${f.size}</p>
</div>
</div>
`
})
document.getElementById('detailFileList').innerHTML = fileHtml;
switchPage('detailPage');
}
// 渲染通讯录联系人
function renderContactList(){
let html = '';
contactJsonData.forEach(item=>{
html += `
<div class="flex flex-col items-center">
<div class="w-20 h-20 rounded-full bg-primary/20 flex items-center justify-center text-2xl text-primary mb-2">${item.avatar}</div>
<p class="text-sm font-medium">${item.name}</p>
<p class="text-xs text-textGray mb-2">${item.dept}</p>
<button class="text-xs px-3 py-1 bg-gray-100 rounded hover:bg-gray-200">发送邮件</button>
</div>
`
})
document.getElementById('userContactList').innerHTML = html;
}
// 初始化加载
window.onload = function(){
renderMailList();
renderContactList();
}
</script>
</body>
</html>