9b9ee273fc
功能特性： - JWT用户认证系统 - 日报CRUD管理 - 三级权限控制 - 多维度搜索过滤 - 统计分析功能 - 评论互动系统 - 响应式Cool Admin界面 - 暗色主题支持 技术栈： - 后端：Django 4.2.7 + DRF + SimpleJWT - 前端：Vue 3 + Element Plus + Pinia - 数据库：SQLite/PostgreSQL - 部署：Docker + Nginx 包含内容： - 完整的后端API代码 - 现代化前端界面 - 数据库迁移文件 - 部署脚本和文档 - 演示页面和测试工具
332 lines
11 KiB
HTML
332 lines
11 KiB
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>
|
||
<style>
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
margin: 0;
|
||
padding: 20px;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
color: #333;
|
||
}
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 16px;
|
||
padding: 40px;
|
||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
h1 {
|
||
text-align: center;
|
||
color: #303133;
|
||
margin-bottom: 10px;
|
||
font-size: 2.5em;
|
||
}
|
||
.subtitle {
|
||
text-align: center;
|
||
color: #606266;
|
||
margin-bottom: 40px;
|
||
font-size: 1.1em;
|
||
}
|
||
.status-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 20px;
|
||
margin-bottom: 40px;
|
||
}
|
||
.status-card {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||
border-left: 4px solid #409eff;
|
||
}
|
||
.status-card.success {
|
||
border-left-color: #67c23a;
|
||
}
|
||
.status-card.warning {
|
||
border-left-color: #e6a23c;
|
||
}
|
||
.status-title {
|
||
font-size: 1.2em;
|
||
font-weight: 600;
|
||
margin-bottom: 10px;
|
||
color: #303133;
|
||
}
|
||
.status-desc {
|
||
color: #606266;
|
||
line-height: 1.6;
|
||
}
|
||
.access-info {
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin-bottom: 30px;
|
||
}
|
||
.access-info h3 {
|
||
margin-top: 0;
|
||
color: #303133;
|
||
}
|
||
.access-links {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 15px;
|
||
margin-top: 20px;
|
||
}
|
||
.access-link {
|
||
display: block;
|
||
padding: 12px 20px;
|
||
background: #409eff;
|
||
color: white;
|
||
text-decoration: none;
|
||
border-radius: 6px;
|
||
text-align: center;
|
||
transition: background-color 0.3s;
|
||
}
|
||
.access-link:hover {
|
||
background: #66b1ff;
|
||
}
|
||
.access-link.admin {
|
||
background: #e6a23c;
|
||
}
|
||
.access-link.admin:hover {
|
||
background: #ebb563;
|
||
}
|
||
.demo-accounts {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||
}
|
||
.account-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 15px;
|
||
margin-top: 15px;
|
||
}
|
||
.account-item {
|
||
background: #f8f9fa;
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
border: 1px solid #e4e7ed;
|
||
}
|
||
.account-type {
|
||
font-weight: 600;
|
||
color: #409eff;
|
||
margin-bottom: 8px;
|
||
}
|
||
.account-credentials {
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 0.9em;
|
||
color: #606266;
|
||
}
|
||
.features {
|
||
margin-top: 40px;
|
||
}
|
||
.feature-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
.feature-item {
|
||
background: #fff;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||
text-align: center;
|
||
}
|
||
.feature-icon {
|
||
font-size: 2em;
|
||
margin-bottom: 10px;
|
||
}
|
||
.feature-title {
|
||
font-weight: 600;
|
||
margin-bottom: 10px;
|
||
color: #303133;
|
||
}
|
||
.feature-desc {
|
||
color: #606266;
|
||
font-size: 0.9em;
|
||
line-height: 1.5;
|
||
}
|
||
.footer {
|
||
text-align: center;
|
||
margin-top: 40px;
|
||
padding-top: 20px;
|
||
border-top: 1px solid #e4e7ed;
|
||
color: #909399;
|
||
}
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
margin: 0 10px;
|
||
padding: 20px;
|
||
}
|
||
h1 {
|
||
font-size: 2em;
|
||
}
|
||
.status-grid, .access-links, .account-grid, .feature-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>🚀 企业级日报系统</h1>
|
||
<p class="subtitle">基于Django + Vue3 + Cool Admin框架的现代化日报管理系统</p>
|
||
|
||
<div class="status-grid">
|
||
<div class="status-card success">
|
||
<div class="status-title">✅ 后端服务</div>
|
||
<div class="status-desc">Django REST API 服务正在运行<br>端口：8000</div>
|
||
</div>
|
||
<div class="status-card success">
|
||
<div class="status-title">✅ 前端服务</div>
|
||
<div class="status-desc">Vue3 开发服务器正在运行<br>端口：3000</div>
|
||
</div>
|
||
<div class="status-card success">
|
||
<div class="status-title">✅ 数据库</div>
|
||
<div class="status-desc">SQLite 数据库已初始化<br>包含演示数据</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="access-info">
|
||
<h3>🌐 访问地址</h3>
|
||
<div class="access-links">
|
||
<a href="http://localhost:3000" class="access-link" target="_blank">
|
||
前端应用 (Vue3)
|
||
</a>
|
||
<a href="http://localhost:8000/api/" class="access-link" target="_blank">
|
||
API接口 (Django)
|
||
</a>
|
||
<a href="http://localhost:8000/admin/" class="access-link admin" target="_blank">
|
||
管理后台 (Django Admin)
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-accounts">
|
||
<h3>👤 演示账号</h3>
|
||
<div class="account-grid">
|
||
<div class="account-item">
|
||
<div class="account-type">超级管理员</div>
|
||
<div class="account-credentials">
|
||
用户名: admin<br>
|
||
密码: admin123456
|
||
</div>
|
||
</div>
|
||
<div class="account-item">
|
||
<div class="account-type">前端工程师</div>
|
||
<div class="account-credentials">
|
||
用户名: zhangsan<br>
|
||
密码: test123456
|
||
</div>
|
||
</div>
|
||
<div class="account-item">
|
||
<div class="account-type">后端工程师</div>
|
||
<div class="account-credentials">
|
||
用户名: lisi<br>
|
||
密码: test123456
|
||
</div>
|
||
</div>
|
||
<div class="account-item">
|
||
<div class="account-type">产品经理</div>
|
||
<div class="account-credentials">
|
||
用户名: wangwu<br>
|
||
密码: test123456
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="features">
|
||
<h3>✨ 核心功能</h3>
|
||
<div class="feature-grid">
|
||
<div class="feature-item">
|
||
<div class="feature-icon">🔐</div>
|
||
<div class="feature-title">用户认证</div>
|
||
<div class="feature-desc">JWT令牌认证，支持登录、注册、权限管理</div>
|
||
</div>
|
||
<div class="feature-item">
|
||
<div class="feature-icon">📝</div>
|
||
<div class="feature-title">日报管理</div>
|
||
<div class="feature-desc">创建、编辑、查看、删除日报，支持富文本编辑</div>
|
||
</div>
|
||
<div class="feature-item">
|
||
<div class="feature-icon">👥</div>
|
||
<div class="feature-title">权限控制</div>
|
||
<div class="feature-desc">三级权限管理，管理员可查看所有日报</div>
|
||
</div>
|
||
<div class="feature-item">
|
||
<div class="feature-icon">🔍</div>
|
||
<div class="feature-title">搜索过滤</div>
|
||
<div class="feature-desc">多维度搜索，支持日期、用户、内容筛选</div>
|
||
</div>
|
||
<div class="feature-item">
|
||
<div class="feature-icon">📊</div>
|
||
<div class="feature-title">统计分析</div>
|
||
<div class="feature-desc">个人和团队统计，完成率分析</div>
|
||
</div>
|
||
<div class="feature-item">
|
||
<div class="feature-icon">💬</div>
|
||
<div class="feature-title">评论系统</div>
|
||
<div class="feature-desc">日报评论功能，支持团队互动交流</div>
|
||
</div>
|
||
<div class="feature-item">
|
||
<div class="feature-icon">📱</div>
|
||
<div class="feature-title">响应式设计</div>
|
||
<div class="feature-desc">适配桌面、平板、手机，支持暗色主题</div>
|
||
</div>
|
||
<div class="feature-item">
|
||
<div class="feature-icon">🎨</div>
|
||
<div class="feature-title">Cool Admin风格</div>
|
||
<div class="feature-desc">现代化界面设计，优秀的用户体验</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer">
|
||
<p>🎉 系统部署完成！您可以点击上方链接访问不同的服务</p>
|
||
<p>技术栈：Django 4.2.7 + Vue 3.3.4 + Element Plus + Cool Admin</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 检查服务状态
|
||
function checkServiceStatus() {
|
||
// 检查前端服务
|
||
fetch('http://localhost:3000')
|
||
.then(response => {
|
||
if (response.ok) {
|
||
console.log('✅ 前端服务运行正常');
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.warn('⚠️ 前端服务可能未启动');
|
||
});
|
||
|
||
// 检查后端API
|
||
fetch('http://localhost:8000/api/auth/login/')
|
||
.then(response => {
|
||
console.log('✅ 后端API运行正常');
|
||
})
|
||
.catch(error => {
|
||
console.warn('⚠️ 后端API可能未启动');
|
||
});
|
||
}
|
||
|
||
// 页面加载完成后检查服务
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
setTimeout(checkServiceStatus, 2000);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|