Files
jiangmingzhao-daily-report/demo_static.html

481 lines
22 KiB
HTML
Raw Normal View History

<!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>