9b9ee273fc
功能特性： - JWT用户认证系统 - 日报CRUD管理 - 三级权限控制 - 多维度搜索过滤 - 统计分析功能 - 评论互动系统 - 响应式Cool Admin界面 - 暗色主题支持 技术栈： - 后端：Django 4.2.7 + DRF + SimpleJWT - 前端：Vue 3 + Element Plus + Pinia - 数据库：SQLite/PostgreSQL - 部署：Docker + Nginx 包含内容： - 完整的后端API代码 - 现代化前端界面 - 数据库迁移文件 - 部署脚本和文档 - 演示页面和测试工具
481 lines
22 KiB
HTML
481 lines
22 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>
|
||
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
|
||
<style>
|
||
body {
|
||
margin: 0;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
background-color: #f5f7fa;
|
||
}
|
||
.demo-container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
.demo-header {
|
||
text-align: center;
|
||
margin-bottom: 40px;
|
||
padding: 40px;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
border-radius: 12px;
|
||
}
|
||
.demo-header h1 {
|
||
margin: 0 0 10px 0;
|
||
font-size: 2.5em;
|
||
}
|
||
.demo-header p {
|
||
margin: 0;
|
||
font-size: 1.2em;
|
||
opacity: 0.9;
|
||
}
|
||
.demo-section {
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||
margin-bottom: 30px;
|
||
overflow: hidden;
|
||
}
|
||
.section-header {
|
||
padding: 20px;
|
||
border-bottom: 1px solid #e4e7ed;
|
||
background: #fafafa;
|
||
}
|
||
.section-title {
|
||
margin: 0;
|
||
font-size: 1.5em;
|
||
color: #303133;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.section-content {
|
||
padding: 20px;
|
||
}
|
||
.login-demo {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 30px;
|
||
align-items: center;
|
||
}
|
||
.login-form {
|
||
max-width: 400px;
|
||
}
|
||
.login-preview {
|
||
text-align: center;
|
||
}
|
||
.dashboard-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 20px;
|
||
margin-bottom: 30px;
|
||
}
|
||
.stat-card {
|
||
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
|
||
color: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
}
|
||
.stat-card.success {
|
||
background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
|
||
}
|
||
.stat-card.warning {
|
||
background: linear-gradient(135deg, #e6a23c 0%, #ebb563 100%);
|
||
}
|
||
.stat-card.info {
|
||
background: linear-gradient(135deg, #909399 0%, #a6a9ad 100%);
|
||
}
|
||
.stat-number {
|
||
font-size: 2em;
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
}
|
||
.stat-label {
|
||
font-size: 0.9em;
|
||
opacity: 0.9;
|
||
}
|
||
.report-list {
|
||
border: 1px solid #e4e7ed;
|
||
border-radius: 6px;
|
||
}
|
||
.report-item {
|
||
padding: 20px;
|
||
border-bottom: 1px solid #e4e7ed;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
}
|
||
.report-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.report-info {
|
||
flex: 1;
|
||
}
|
||
.report-date {
|
||
font-weight: 600;
|
||
color: #409eff;
|
||
margin-bottom: 8px;
|
||
}
|
||
.report-content {
|
||
color: #606266;
|
||
line-height: 1.6;
|
||
margin-bottom: 8px;
|
||
}
|
||
.report-meta {
|
||
font-size: 0.9em;
|
||
color: #909399;
|
||
}
|
||
.report-actions {
|
||
margin-left: 20px;
|
||
}
|
||
.feature-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 20px;
|
||
}
|
||
.feature-item {
|
||
text-align: center;
|
||
padding: 20px;
|
||
border: 1px solid #e4e7ed;
|
||
border-radius: 8px;
|
||
background: white;
|
||
}
|
||
.feature-icon {
|
||
font-size: 3em;
|
||
margin-bottom: 15px;
|
||
}
|
||
.feature-title {
|
||
font-weight: 600;
|
||
margin-bottom: 10px;
|
||
color: #303133;
|
||
}
|
||
.feature-desc {
|
||
color: #606266;
|
||
line-height: 1.5;
|
||
}
|
||
.tech-stack {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 30px;
|
||
}
|
||
.tech-group h4 {
|
||
color: #409eff;
|
||
margin-bottom: 15px;
|
||
font-size: 1.2em;
|
||
}
|
||
.tech-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
.tech-list li {
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.tech-list li:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.version {
|
||
color: #909399;
|
||
font-size: 0.9em;
|
||
}
|
||
@media (max-width: 768px) {
|
||
.login-demo, .tech-stack {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.dashboard-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
.feature-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="demo-container">
|
||
<div class="demo-header">
|
||
<h1>🚀 企业级日报系统</h1>
|
||
<p>基于Django + Vue3 + Cool Admin框架的现代化日报管理系统</p>
|
||
</div>
|
||
|
||
<!-- 登录界面演示 -->
|
||
<div class="demo-section">
|
||
<div class="section-header">
|
||
<h2 class="section-title">
|
||
<span>🔐</span>
|
||
登录界面演示
|
||
</h2>
|
||
</div>
|
||
<div class="section-content">
|
||
<div class="login-demo">
|
||
<div class="login-form">
|
||
<div style="margin-bottom: 20px;">
|
||
<label style="display: block; margin-bottom: 8px; font-weight: 500;">用户名</label>
|
||
<input type="text" value="admin" style="width: 100%; padding: 12px; border: 1px solid #dcdfe6; border-radius: 4px;" readonly>
|
||
</div>
|
||
<div style="margin-bottom: 20px;">
|
||
<label style="display: block; margin-bottom: 8px; font-weight: 500;">密码</label>
|
||
<input type="password" value="admin123456" style="width: 100%; padding: 12px; border: 1px solid #dcdfe6; border-radius: 4px;" readonly>
|
||
</div>
|
||
<button style="width: 100%; padding: 12px; background: #409eff; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer;">
|
||
登录
|
||
</button>
|
||
<div style="margin-top: 20px; padding: 15px; background: #f0f9ff; border: 1px solid #b3d8ff; border-radius: 4px; font-size: 14px;">
|
||
<strong>演示账号：</strong><br>
|
||
管理员: admin / admin123456<br>
|
||
普通用户: zhangsan / test123456
|
||
</div>
|
||
</div>
|
||
<div class="login-preview">
|
||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iIzY2N2VlYSIgcng9IjgiLz4KICA8dGV4dCB4PSIxNTAiIHk9IjEwMCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE4IiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkNvb2wgQWRtaW4g6aOO5qC8PC90ZXh0Pgo8L3N2Zz4K" alt="Cool Admin风格预览" style="border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
|
||
<p style="margin-top: 15px; color: #606266;">现代化登录界面</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 工作台演示 -->
|
||
<div class="demo-section">
|
||
<div class="section-header">
|
||
<h2 class="section-title">
|
||
<span>📊</span>
|
||
工作台统计
|
||
</h2>
|
||
</div>
|
||
<div class="section-content">
|
||
<div class="dashboard-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-number">156</div>
|
||
<div class="stat-label">总日报数</div>
|
||
</div>
|
||
<div class="stat-card success">
|
||
<div class="stat-number">23</div>
|
||
<div class="stat-label">本月日报</div>
|
||
</div>
|
||
<div class="stat-card warning">
|
||
<div class="stat-number">5</div>
|
||
<div class="stat-label">本周日报</div>
|
||
</div>
|
||
<div class="stat-card info">
|
||
<div class="stat-number">92%</div>
|
||
<div class="stat-label">完成率</div>
|
||
</div>
|
||
</div>
|
||
<p style="color: #606266; text-align: center;">📈 实时统计数据展示，支持个人和团队视图</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 日报列表演示 -->
|
||
<div class="demo-section">
|
||
<div class="section-header">
|
||
<h2 class="section-title">
|
||
<span>📝</span>
|
||
日报管理
|
||
</h2>
|
||
</div>
|
||
<div class="section-content">
|
||
<div class="report-list">
|
||
<div class="report-item">
|
||
<div class="report-info">
|
||
<div class="report-date">2024-01-15</div>
|
||
<div class="report-content">
|
||
<strong>工作总结：</strong>完成了用户认证模块的开发，包括登录、注册和权限验证功能。修复了3个bug，优化了API响应时间...<br>
|
||
<strong>明日计划：</strong>开始日报管理模块的前端界面开发，集成富文本编辑器...
|
||
</div>
|
||
<div class="report-meta">张三 · 技术部 · 2小时前</div>
|
||
</div>
|
||
<div class="report-actions">
|
||
<button style="padding: 6px 12px; margin: 0 5px; border: 1px solid #409eff; background: white; color: #409eff; border-radius: 4px; cursor: pointer;">查看</button>
|
||
<button style="padding: 6px 12px; margin: 0 5px; border: 1px solid #67c23a; background: white; color: #67c23a; border-radius: 4px; cursor: pointer;">编辑</button>
|
||
</div>
|
||
</div>
|
||
<div class="report-item">
|
||
<div class="report-info">
|
||
<div class="report-date">2024-01-14</div>
|
||
<div class="report-content">
|
||
<strong>工作总结：</strong>设计了数据库表结构，完成了项目架构搭建。与前端团队对接API接口规范...<br>
|
||
<strong>明日计划：</strong>实现日报CRUD功能，添加数据验证和错误处理...
|
||
</div>
|
||
<div class="report-meta">李四 · 技术部 · 1天前</div>
|
||
</div>
|
||
<div class="report-actions">
|
||
<button style="padding: 6px 12px; margin: 0 5px; border: 1px solid #409eff; background: white; color: #409eff; border-radius: 4px; cursor: pointer;">查看</button>
|
||
<button style="padding: 6px 12px; margin: 0 5px; border: 1px solid #67c23a; background: white; color: #67c23a; border-radius: 4px; cursor: pointer;">编辑</button>
|
||
</div>
|
||
</div>
|
||
<div class="report-item">
|
||
<div class="report-info">
|
||
<div class="report-date">2024-01-13 <span style="background: #e6a23c; color: white; padding: 2px 6px; border-radius: 3px; font-size: 12px; margin-left: 10px;">草稿</span></div>
|
||
<div class="report-content">
|
||
<strong>工作总结：</strong>参与需求评审会议，整理产品功能清单。制作了用户流程图和原型设计...<br>
|
||
<strong>明日计划：</strong>完善产品文档，准备用户测试方案...
|
||
</div>
|
||
<div class="report-meta">王五 · 产品部 · 2天前</div>
|
||
</div>
|
||
<div class="report-actions">
|
||
<button style="padding: 6px 12px; margin: 0 5px; border: 1px solid #409eff; background: white; color: #409eff; border-radius: 4px; cursor: pointer;">查看</button>
|
||
<button style="padding: 6px 12px; margin: 0 5px; border: 1px solid #67c23a; background: white; color: #67c23a; border-radius: 4px; cursor: pointer;">编辑</button>
|
||
<button style="padding: 6px 12px; margin: 0 5px; border: 1px solid #e6a23c; background: white; color: #e6a23c; border-radius: 4px; cursor: pointer;">发布</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p style="color: #606266; text-align: center; margin-top: 20px;">
|
||
🔍 支持按日期、用户、内容等多维度搜索和过滤
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 核心功能 -->
|
||
<div class="demo-section">
|
||
<div class="section-header">
|
||
<h2 class="section-title">
|
||
<span>✨</span>
|
||
核心功能
|
||
</h2>
|
||
</div>
|
||
<div class="section-content">
|
||
<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>
|
||
|
||
<!-- 技术栈 -->
|
||
<div class="demo-section">
|
||
<div class="section-header">
|
||
<h2 class="section-title">
|
||
<span>🛠</span>
|
||
技术栈
|
||
</h2>
|
||
</div>
|
||
<div class="section-content">
|
||
<div class="tech-stack">
|
||
<div class="tech-group">
|
||
<h4>后端技术</h4>
|
||
<ul class="tech-list">
|
||
<li>Django <span class="version">4.2.7</span></li>
|
||
<li>Django REST Framework <span class="version">3.14.0</span></li>
|
||
<li>SimpleJWT <span class="version">5.3.0</span></li>
|
||
<li>SQLite/PostgreSQL <span class="version">数据库</span></li>
|
||
<li>django-cors-headers <span class="version">4.3.1</span></li>
|
||
<li>django-filter <span class="version">23.3</span></li>
|
||
</ul>
|
||
</div>
|
||
<div class="tech-group">
|
||
<h4>前端技术</h4>
|
||
<ul class="tech-list">
|
||
<li>Vue 3 <span class="version">3.3.4</span></li>
|
||
<li>Element Plus <span class="version">2.3.12</span></li>
|
||
<li>Pinia <span class="version">2.1.6</span></li>
|
||
<li>Vue Router <span class="version">4.2.4</span></li>
|
||
<li>Axios <span class="version">1.5.0</span></li>
|
||
<li>WangEditor <span class="version">5.1.23</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 部署信息 -->
|
||
<div class="demo-section">
|
||
<div class="section-header">
|
||
<h2 class="section-title">
|
||
<span>🚀</span>
|
||
部署信息
|
||
</h2>
|
||
</div>
|
||
<div class="section-content">
|
||
<div style="background: #f8f9fa; padding: 20px; border-radius: 8px; border: 1px solid #e4e7ed;">
|
||
<h4 style="margin-top: 0; color: #303133;">服务地址：</h4>
|
||
<ul style="margin: 0; padding-left: 20px; line-height: 1.8;">
|
||
<li><strong>前端应用:</strong> <a href="http://localhost:3000" target="_blank" style="color: #409eff;">http://localhost:3000</a></li>
|
||
<li><strong>API接口:</strong> <a href="http://localhost:8000/api/" target="_blank" style="color: #409eff;">http://localhost:8000/api/</a></li>
|
||
<li><strong>管理后台:</strong> <a href="http://localhost:8000/admin/" target="_blank" style="color: #409eff;">http://localhost:8000/admin/</a></li>
|
||
</ul>
|
||
|
||
<h4 style="color: #303133; margin-top: 30px;">演示账号：</h4>
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
|
||
<div style="background: white; padding: 15px; border-radius: 6px; border: 1px solid #e4e7ed;">
|
||
<div style="font-weight: 600; color: #409eff; margin-bottom: 8px;">超级管理员</div>
|
||
<div style="font-family: monospace; font-size: 14px; color: #606266;">
|
||
admin<br>admin123456
|
||
</div>
|
||
</div>
|
||
<div style="background: white; padding: 15px; border-radius: 6px; border: 1px solid #e4e7ed;">
|
||
<div style="font-weight: 600; color: #67c23a; margin-bottom: 8px;">前端工程师</div>
|
||
<div style="font-family: monospace; font-size: 14px; color: #606266;">
|
||
zhangsan<br>test123456
|
||
</div>
|
||
</div>
|
||
<div style="background: white; padding: 15px; border-radius: 6px; border: 1px solid #e4e7ed;">
|
||
<div style="font-weight: 600; color: #e6a23c; margin-bottom: 8px;">后端工程师</div>
|
||
<div style="font-family: monospace; font-size: 14px; color: #606266;">
|
||
lisi<br>test123456
|
||
</div>
|
||
</div>
|
||
<div style="background: white; padding: 15px; border-radius: 6px; border: 1px solid #e4e7ed;">
|
||
<div style="font-weight: 600; color: #909399; margin-bottom: 8px;">产品经理</div>
|
||
<div style="font-family: monospace; font-size: 14px; color: #606266;">
|
||
wangwu<br>test123456
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="text-align: center; margin-top: 30px; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 8px;">
|
||
<h3 style="margin: 0 0 10px 0;">🎉 系统已成功部署！</h3>
|
||
<p style="margin: 0; opacity: 0.9;">您可以点击上方链接访问完整的日报管理系统</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|