Compare commits
2 Commits
ae2a6d912f
...
6b31779ab4
| Author | SHA1 | Date | |
|---|---|---|---|
|
6b31779ab4 | ||
|
|
8aa7a34895 |
2
.gitignore
vendored
2
.gitignore
vendored
@@ -11,3 +11,5 @@ media/
|
|||||||
*.swp
|
*.swp
|
||||||
*.swo
|
*.swo
|
||||||
*~
|
*~
|
||||||
|
frontend-react/node_modules/
|
||||||
|
frontend-react/build/
|
||||||
|
|||||||
56
deploy_multiuser.sh
Normal file
56
deploy_multiuser.sh
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
# 多用户系统 - 部署脚本
|
||||||
|
|
||||||
|
set -e
|
||||||
|
|
||||||
|
echo "======================================"
|
||||||
|
echo "🚀 部署多用户日记系统"
|
||||||
|
echo "======================================"
|
||||||
|
|
||||||
|
cd /home/ubuntu/diary-system
|
||||||
|
|
||||||
|
# 1. 安装依赖
|
||||||
|
echo "📦 安装 Python 依赖..."
|
||||||
|
cd backend
|
||||||
|
pip3 install -r requirements.txt -q 2>/dev/null || pip3 install -r requirements.txt --break-system-packages -q
|
||||||
|
|
||||||
|
# 2. 数据库迁移
|
||||||
|
echo "🗄️ 执行数据库迁移..."
|
||||||
|
python3 manage.py migrate --run-syncdb
|
||||||
|
|
||||||
|
# 3. 迁移现有数据到默认用户
|
||||||
|
echo "📦 迁移现有数据..."
|
||||||
|
python3 ../migrate_data.py
|
||||||
|
|
||||||
|
# 4. 重启 Gunicorn
|
||||||
|
echo "⚙️ 重启 Gunicorn..."
|
||||||
|
sudo systemctl restart diary-system
|
||||||
|
|
||||||
|
# 5. 检查服务状态
|
||||||
|
echo ""
|
||||||
|
echo "🔍 检查服务状态..."
|
||||||
|
sudo systemctl is-active diary-system > /dev/null && echo " ✅ Gunicorn 运行中" || echo " ❌ Gunicorn 未运行"
|
||||||
|
|
||||||
|
# 6. 测试访问
|
||||||
|
echo ""
|
||||||
|
echo "🧪 测试访问..."
|
||||||
|
sleep 2
|
||||||
|
if curl -s http://127.0.0.1:8002/api/auth/me/ > /dev/null 2>&1; then
|
||||||
|
echo " ✅ 认证 API 正常"
|
||||||
|
else
|
||||||
|
echo " ⚠️ 认证 API 可能有问题"
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo ""
|
||||||
|
echo "======================================"
|
||||||
|
echo "✅ 部署完成！"
|
||||||
|
echo "======================================"
|
||||||
|
echo ""
|
||||||
|
echo "📍 访问地址：http://cssc.datalibstar.com:8001/"
|
||||||
|
echo ""
|
||||||
|
echo "📝 默认用户："
|
||||||
|
echo " 用户名：beijixing"
|
||||||
|
echo " 密码：beijixing123"
|
||||||
|
echo ""
|
||||||
|
echo "💡 其他用户可以注册新账号使用"
|
||||||
|
echo ""
|
||||||
13
frontend-react/build/asset-manifest.json
Normal file
13
frontend-react/build/asset-manifest.json
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"files": {
|
||||||
|
"main.css": "/static/css/main.358dee66.css",
|
||||||
|
"main.js": "/static/js/main.7934ac80.js",
|
||||||
|
"index.html": "/index.html",
|
||||||
|
"main.358dee66.css.map": "/static/css/main.358dee66.css.map",
|
||||||
|
"main.7934ac80.js.map": "/static/js/main.7934ac80.js.map"
|
||||||
|
},
|
||||||
|
"entrypoints": [
|
||||||
|
"static/css/main.358dee66.css",
|
||||||
|
"static/js/main.7934ac80.js"
|
||||||
|
]
|
||||||
|
}
|
||||||
1
frontend-react/build/index.html
Normal file
1
frontend-react/build/index.html
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#667eea"/><meta name="description" content="码神的日记系统 - 记录每天的进步与成长"/><title>码神的日记系统</title><script defer="defer" src="/static/js/main.7934ac80.js"></script><link href="/static/css/main.358dee66.css" rel="stylesheet"></head><body><noscript>需要启用 JavaScript 才能运行此应用。</noscript><div id="root"></div></body></html>
|
||||||
17130
frontend-react/package-lock.json
generated
Normal file
17130
frontend-react/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
14
frontend-react/public/index.html
Normal file
14
frontend-react/public/index.html
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="theme-color" content="#667eea" />
|
||||||
|
<meta name="description" content="码神的日记系统 - 记录每天的进步与成长" />
|
||||||
|
<title>码神的日记系统</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>需要启用 JavaScript 才能运行此应用。</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -16,8 +16,8 @@ const API_BASE = '/api';
|
|||||||
* - 用户认证
|
* - 用户认证
|
||||||
* - 统计面板
|
* - 统计面板
|
||||||
* - 日历组件 ⭐
|
* - 日历组件 ⭐
|
||||||
* - 日记详情
|
* - 日记详情（支持创建/编辑）
|
||||||
* - 经验总结
|
* - 经验总结（支持创建/编辑）
|
||||||
*
|
*
|
||||||
* ⚠️ 修改前阅读 docs/README.md
|
* ⚠️ 修改前阅读 docs/README.md
|
||||||
*/
|
*/
|
||||||
@@ -25,7 +25,6 @@ function App() {
|
|||||||
const [user, setUser] = useState(null);
|
const [user, setUser] = useState(null);
|
||||||
const [authView, setAuthView] = useState('login'); // login | register
|
const [authView, setAuthView] = useState('login'); // login | register
|
||||||
const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
|
const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
|
||||||
const [diaryDates, setDiaryDates] = useState([]);
|
|
||||||
const [entries, setEntries] = useState([]);
|
const [entries, setEntries] = useState([]);
|
||||||
const [experiences, setExperiences] = useState([]);
|
const [experiences, setExperiences] = useState([]);
|
||||||
const [stats, setStats] = useState({});
|
const [stats, setStats] = useState({});
|
||||||
@@ -88,7 +87,6 @@ function App() {
|
|||||||
setStats(statsRes.data);
|
setStats(statsRes.data);
|
||||||
setEntries(entriesRes.data);
|
setEntries(entriesRes.data);
|
||||||
setExperiences(expRes.data);
|
setExperiences(expRes.data);
|
||||||
setDiaryDates(entriesRes.data.map(e => e.date));
|
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
setError(`加载失败：${err.message}`);
|
setError(`加载失败：${err.message}`);
|
||||||
@@ -96,6 +94,25 @@ function App() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleDateSelect = (date) => {
|
||||||
|
setSelectedDate(date);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDiaryUpdate = async () => {
|
||||||
|
// 日记更新后重新加载数据
|
||||||
|
await loadData();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleExperienceRefresh = () => {
|
||||||
|
// 经验更新后重新加载经验列表
|
||||||
|
axios.get(`${API_BASE}/experiences/recent/`)
|
||||||
|
.then(res => setExperiences(res.data))
|
||||||
|
.catch(err => console.error('加载经验失败:', err));
|
||||||
|
};
|
||||||
|
|
||||||
|
// 查找选中日期的日记
|
||||||
|
const selectedEntry = entries.find(e => e.date === selectedDate);
|
||||||
|
|
||||||
// 未登录显示登录/注册界面
|
// 未登录显示登录/注册界面
|
||||||
if (!user) {
|
if (!user) {
|
||||||
if (authView === 'register') {
|
if (authView === 'register') {
|
||||||
@@ -104,18 +121,61 @@ function App() {
|
|||||||
return <Login onLogin={handleLogin} />;
|
return <Login onLogin={handleLogin} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleDateSelect = (date) => {
|
|
||||||
setSelectedDate(date);
|
|
||||||
};
|
|
||||||
|
|
||||||
const selectedEntry = entries.find(e => e.date === selectedDate);
|
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return <div className="loading">加载中...</div>;
|
return (
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
minHeight: '100vh',
|
||||||
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
background: 'white',
|
||||||
|
padding: '40px',
|
||||||
|
borderRadius: '12px',
|
||||||
|
textAlign: 'center',
|
||||||
|
}}>
|
||||||
|
<div style={{ fontSize: '48px', marginBottom: '20px' }}>⚡</div>
|
||||||
|
<div style={{ color: '#666' }}>加载中...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
return <div className="error">{error}</div>;
|
return (
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
minHeight: '100vh',
|
||||||
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
background: 'white',
|
||||||
|
padding: '40px',
|
||||||
|
borderRadius: '12px',
|
||||||
|
textAlign: 'center',
|
||||||
|
}}>
|
||||||
|
<div style={{ fontSize: '48px', marginBottom: '20px' }}>❌</div>
|
||||||
|
<div style={{ color: '#c00', marginBottom: '20px' }}>{error}</div>
|
||||||
|
<button
|
||||||
|
onClick={() => window.location.reload()}
|
||||||
|
style={{
|
||||||
|
padding: '10px 20px',
|
||||||
|
background: '#667eea',
|
||||||
|
color: 'white',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '6px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
刷新页面
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -141,20 +201,36 @@ function App() {
|
|||||||
<Calendar
|
<Calendar
|
||||||
selectedDate={selectedDate}
|
selectedDate={selectedDate}
|
||||||
onDateSelect={handleDateSelect}
|
onDateSelect={handleDateSelect}
|
||||||
diaryDates={diaryDates}
|
diaryDates={entries.map(e => e.date)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="section-box">
|
<div className="section-box">
|
||||||
<h2>📝 {selectedDate} 的日记</h2>
|
<h2>📝 {selectedDate} 的日记</h2>
|
||||||
<DiaryDetail entry={selectedEntry} />
|
<DiaryDetail
|
||||||
|
entry={selectedEntry}
|
||||||
|
date={selectedDate}
|
||||||
|
onUpdate={handleDiaryUpdate}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="section-box">
|
<div className="section-box">
|
||||||
<h2>💡 经验总结</h2>
|
<ExperienceList
|
||||||
<ExperienceList experiences={experiences} />
|
experiences={experiences}
|
||||||
|
onRefresh={handleExperienceRefresh}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<footer style={{
|
||||||
|
textAlign: 'center',
|
||||||
|
padding: '20px',
|
||||||
|
color: '#999',
|
||||||
|
fontSize: '14px',
|
||||||
|
marginTop: '30px',
|
||||||
|
}}>
|
||||||
|
<p>© 2026 码神的日记系统 · 记录每一天的成长</p>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,63 +1,181 @@
|
|||||||
import React from 'react';
|
import React, { useState } from 'react';
|
||||||
|
import DiaryEditor from './DiaryEditor';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 日记详情组件
|
* 日记详情组件
|
||||||
* 显示选中日期的日记内容
|
* 显示日记内容，支持编辑
|
||||||
*/
|
*/
|
||||||
function DiaryDetail({ entry }) {
|
function DiaryDetail({ entry, date, onUpdate }) {
|
||||||
if (!entry) {
|
const [editing, setEditing] = useState(false);
|
||||||
|
|
||||||
|
const handleSave = (savedEntry) => {
|
||||||
|
setEditing(false);
|
||||||
|
if (onUpdate) {
|
||||||
|
onUpdate(savedEntry);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
setEditing(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = () => {
|
||||||
|
setEditing(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const boxStyle = {
|
||||||
|
background: 'white',
|
||||||
|
borderRadius: '8px',
|
||||||
|
padding: '20px',
|
||||||
|
minHeight: '300px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const labelStyle = {
|
||||||
|
fontWeight: '600',
|
||||||
|
color: '#667eea',
|
||||||
|
marginBottom: '8px',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '6px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const contentStyle = {
|
||||||
|
background: '#f8f9fa',
|
||||||
|
padding: '15px',
|
||||||
|
borderRadius: '6px',
|
||||||
|
marginBottom: '20px',
|
||||||
|
lineHeight: '1.6',
|
||||||
|
whiteSpace: 'pre-wrap',
|
||||||
|
};
|
||||||
|
|
||||||
|
const emptyStyle = {
|
||||||
|
color: '#999',
|
||||||
|
fontStyle: 'italic',
|
||||||
|
textAlign: 'center',
|
||||||
|
padding: '40px 20px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const buttonStyle = {
|
||||||
|
padding: '10px 20px',
|
||||||
|
background: '#667eea',
|
||||||
|
color: 'white',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '6px',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: '600',
|
||||||
|
cursor: 'pointer',
|
||||||
|
marginTop: '15px',
|
||||||
|
};
|
||||||
|
|
||||||
|
// 编辑模式
|
||||||
|
if (editing) {
|
||||||
return (
|
return (
|
||||||
<div className="empty-state">
|
<div style={boxStyle}>
|
||||||
<p>这一天还没有日记</p>
|
<DiaryEditor
|
||||||
|
entry={entry}
|
||||||
|
date={date}
|
||||||
|
onSave={handleSave}
|
||||||
|
onCancel={handleCancel}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 查看模式
|
||||||
|
if (!entry) {
|
||||||
|
return (
|
||||||
|
<div style={boxStyle}>
|
||||||
|
<div style={emptyStyle}>
|
||||||
|
<p style={{ fontSize: '48px', marginBottom: '15px' }}>📝</p>
|
||||||
|
<p>这一天还没有日记</p>
|
||||||
|
<button
|
||||||
|
onClick={handleEdit}
|
||||||
|
style={buttonStyle}
|
||||||
|
>
|
||||||
|
✏️ 写一篇
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const hasContent = entry.completed_tasks || entry.learned || entry.problems ||
|
||||||
|
entry.reflections || entry.improvements || entry.plans;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="diary-detail">
|
<div style={boxStyle}>
|
||||||
<h3>{entry.title || '每日日记'}</h3>
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
|
||||||
|
<h3 style={{ margin: 0, color: '#333' }}>{entry.title}</h3>
|
||||||
{entry.completed_tasks && (
|
<button
|
||||||
<div className="diary-section">
|
onClick={handleEdit}
|
||||||
<div className="section-title">✅ 完成的任务</div>
|
style={{
|
||||||
<div className="section-content">{entry.completed_tasks}</div>
|
...buttonStyle,
|
||||||
</div>
|
marginTop: 0,
|
||||||
)}
|
background: '#f0f0f0',
|
||||||
|
color: '#666',
|
||||||
{entry.learned && (
|
}}
|
||||||
<div className="diary-section">
|
>
|
||||||
<div className="section-title">📚 学到的东西</div>
|
✏️ 编辑
|
||||||
<div className="section-content">{entry.learned}</div>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
{!hasContent ? (
|
||||||
{entry.problems && (
|
<div style={emptyStyle}>
|
||||||
<div className="diary-section">
|
<p>这篇日记还没有内容</p>
|
||||||
<div className="section-title">🐛 遇到的问题</div>
|
<button onClick={handleEdit} style={buttonStyle}>
|
||||||
<div className="section-content">{entry.problems}</div>
|
✏️ 编辑
|
||||||
</div>
|
</button>
|
||||||
)}
|
|
||||||
|
|
||||||
{entry.reflections && (
|
|
||||||
<div className="diary-section">
|
|
||||||
<div className="section-title">💡 想法和反思</div>
|
|
||||||
<div className="section-content">{entry.reflections}</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{entry.improvements && (
|
|
||||||
<div className="diary-section">
|
|
||||||
<div className="section-title">📈 进步点</div>
|
|
||||||
<div className="section-content">{entry.improvements}</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{entry.plans && (
|
|
||||||
<div className="diary-section">
|
|
||||||
<div className="section-title">🎯 明日计划</div>
|
|
||||||
<div className="section-content">{entry.plans}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{entry.completed_tasks && (
|
||||||
|
<div style={{ marginBottom: '20px' }}>
|
||||||
|
<div style={labelStyle}>✅ 完成的任务</div>
|
||||||
|
<div style={contentStyle}>{entry.completed_tasks}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{entry.learned && (
|
||||||
|
<div style={{ marginBottom: '20px' }}>
|
||||||
|
<div style={labelStyle}>💡 学到的东西</div>
|
||||||
|
<div style={contentStyle}>{entry.learned}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{entry.problems && (
|
||||||
|
<div style={{ marginBottom: '20px' }}>
|
||||||
|
<div style={labelStyle}>🚧 遇到的问题</div>
|
||||||
|
<div style={contentStyle}>{entry.problems}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{entry.reflections && (
|
||||||
|
<div style={{ marginBottom: '20px' }}>
|
||||||
|
<div style={labelStyle}>💭 反思和想法</div>
|
||||||
|
<div style={contentStyle}>{entry.reflections}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{entry.improvements && (
|
||||||
|
<div style={{ marginBottom: '20px' }}>
|
||||||
|
<div style={labelStyle}>✨ 进步点</div>
|
||||||
|
<div style={contentStyle}>{entry.improvements}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{entry.plans && (
|
||||||
|
<div style={{ marginBottom: '20px' }}>
|
||||||
|
<div style={labelStyle}>🎯 明日计划</div>
|
||||||
|
<div style={contentStyle}>{entry.plans}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
<div style={{ marginTop: '20px', paddingTop: '15px', borderTop: '1px solid #eee', color: '#999', fontSize: '12px' }}>
|
||||||
|
创建于 {new Date(entry.created_at).toLocaleString('zh-CN')}
|
||||||
|
{entry.updated_at !== entry.created_at && ` · 更新于 ${new Date(entry.updated_at).toLocaleString('zh-CN')}`}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
233
frontend-react/src/components/DiaryEditor.js
Normal file
233
frontend-react/src/components/DiaryEditor.js
Normal file
@@ -0,0 +1,233 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 日记编辑器组件
|
||||||
|
* 用于创建和编辑日记
|
||||||
|
*/
|
||||||
|
function DiaryEditor({ entry, date, onSave, onCancel }) {
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
title: '',
|
||||||
|
content: '',
|
||||||
|
completed_tasks: '',
|
||||||
|
learned: '',
|
||||||
|
problems: '',
|
||||||
|
reflections: '',
|
||||||
|
improvements: '',
|
||||||
|
plans: '',
|
||||||
|
});
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (entry) {
|
||||||
|
setFormData({
|
||||||
|
title: entry.title || `${entry.date} 的日记`,
|
||||||
|
content: entry.content || '',
|
||||||
|
completed_tasks: entry.completed_tasks || '',
|
||||||
|
learned: entry.learned || '',
|
||||||
|
problems: entry.problems || '',
|
||||||
|
reflections: entry.reflections || '',
|
||||||
|
improvements: entry.improvements || '',
|
||||||
|
plans: entry.plans || '',
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
setFormData({
|
||||||
|
title: `${date} 的日记`,
|
||||||
|
content: '',
|
||||||
|
completed_tasks: '',
|
||||||
|
learned: '',
|
||||||
|
problems: '',
|
||||||
|
reflections: '',
|
||||||
|
improvements: '',
|
||||||
|
plans: '',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [entry, date]);
|
||||||
|
|
||||||
|
const handleChange = (e) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setFormData(prev => ({ ...prev, [name]: value }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setSaving(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const payload = {
|
||||||
|
...formData,
|
||||||
|
date: entry?.date || date,
|
||||||
|
};
|
||||||
|
|
||||||
|
let response;
|
||||||
|
if (entry && entry.id) {
|
||||||
|
// 更新已有日记
|
||||||
|
response = await axios.put(`/api/entries/${entry.id}/`, payload);
|
||||||
|
} else {
|
||||||
|
// 创建新日记
|
||||||
|
response = await axios.post('/api/entries/', payload);
|
||||||
|
}
|
||||||
|
|
||||||
|
onSave(response.data);
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.response?.data?.message || '保存失败，请重试');
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const inputStyle = {
|
||||||
|
width: '100%',
|
||||||
|
padding: '10px',
|
||||||
|
border: '1px solid #ddd',
|
||||||
|
borderRadius: '6px',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontFamily: 'inherit',
|
||||||
|
resize: 'vertical',
|
||||||
|
};
|
||||||
|
|
||||||
|
const labelStyle = {
|
||||||
|
display: 'block',
|
||||||
|
marginBottom: '8px',
|
||||||
|
fontWeight: '600',
|
||||||
|
color: '#555',
|
||||||
|
};
|
||||||
|
|
||||||
|
const sectionStyle = {
|
||||||
|
marginBottom: '20px',
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
{error && (
|
||||||
|
<div style={{
|
||||||
|
background: '#fee',
|
||||||
|
color: '#c00',
|
||||||
|
padding: '10px',
|
||||||
|
borderRadius: '6px',
|
||||||
|
marginBottom: '15px',
|
||||||
|
}}>
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div style={sectionStyle}>
|
||||||
|
<label style={labelStyle}>📝 标题</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="title"
|
||||||
|
value={formData.title}
|
||||||
|
onChange={handleChange}
|
||||||
|
style={{ ...inputStyle, fontWeight: '600' }}
|
||||||
|
placeholder="给今天的日记起个标题"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={sectionStyle}>
|
||||||
|
<label style={labelStyle}>✅ 完成的任务</label>
|
||||||
|
<textarea
|
||||||
|
name="completed_tasks"
|
||||||
|
value={formData.completed_tasks}
|
||||||
|
onChange={handleChange}
|
||||||
|
style={{ ...inputStyle, minHeight: '80px' }}
|
||||||
|
placeholder="今天完成了哪些任务？"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={sectionStyle}>
|
||||||
|
<label style={labelStyle}>💡 学到的东西</label>
|
||||||
|
<textarea
|
||||||
|
name="learned"
|
||||||
|
value={formData.learned}
|
||||||
|
onChange={handleChange}
|
||||||
|
style={{ ...inputStyle, minHeight: '80px' }}
|
||||||
|
placeholder="今天学到了什么新知识或技能？"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={sectionStyle}>
|
||||||
|
<label style={labelStyle}>🚧 遇到的问题</label>
|
||||||
|
<textarea
|
||||||
|
name="problems"
|
||||||
|
value={formData.problems}
|
||||||
|
onChange={handleChange}
|
||||||
|
style={{ ...inputStyle, minHeight: '80px' }}
|
||||||
|
placeholder="遇到了什么问题？如何解决的？"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={sectionStyle}>
|
||||||
|
<label style={labelStyle}>💭 反思和想法</label>
|
||||||
|
<textarea
|
||||||
|
name="reflections"
|
||||||
|
value={formData.reflections}
|
||||||
|
onChange={handleChange}
|
||||||
|
style={{ ...inputStyle, minHeight: '80px' }}
|
||||||
|
placeholder="有什么感悟、反思或想法？"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={sectionStyle}>
|
||||||
|
<label style={labelStyle}> 进步点</label>
|
||||||
|
<textarea
|
||||||
|
name="improvements"
|
||||||
|
value={formData.improvements}
|
||||||
|
onChange={handleChange}
|
||||||
|
style={{ ...inputStyle, minHeight: '80px' }}
|
||||||
|
placeholder="今天有哪些进步？"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={sectionStyle}>
|
||||||
|
<label style={labelStyle}>🎯 明日计划</label>
|
||||||
|
<textarea
|
||||||
|
name="plans"
|
||||||
|
value={formData.plans}
|
||||||
|
onChange={handleChange}
|
||||||
|
style={{ ...inputStyle, minHeight: '80px' }}
|
||||||
|
placeholder="明天计划做什么？"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', gap: '10px', marginTop: '25px' }}>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={saving}
|
||||||
|
style={{
|
||||||
|
padding: '12px 24px',
|
||||||
|
background: '#667eea',
|
||||||
|
color: 'white',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '6px',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: '600',
|
||||||
|
cursor: saving ? 'not-allowed' : 'pointer',
|
||||||
|
opacity: saving ? 0.7 : 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{saving ? '保存中...' : '💾 保存'}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onCancel}
|
||||||
|
style={{
|
||||||
|
padding: '12px 24px',
|
||||||
|
background: '#f0f0f0',
|
||||||
|
color: '#666',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '6px',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: '600',
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
✖️ 取消
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DiaryEditor;
|
||||||
210
frontend-react/src/components/ExperienceEditor.js
Normal file
210
frontend-react/src/components/ExperienceEditor.js
Normal file
@@ -0,0 +1,210 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 经验总结编辑器组件
|
||||||
|
* 用于创建和编辑经验总结
|
||||||
|
*/
|
||||||
|
function ExperienceEditor({ experience, onSave, onCancel }) {
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
title: '',
|
||||||
|
category: 'development',
|
||||||
|
problem: '',
|
||||||
|
solution: '',
|
||||||
|
lesson_learned: '',
|
||||||
|
date: new Date().toISOString().split('T')[0],
|
||||||
|
});
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (experience) {
|
||||||
|
setFormData({
|
||||||
|
title: experience.title || '',
|
||||||
|
category: experience.category || 'development',
|
||||||
|
problem: experience.problem || '',
|
||||||
|
solution: experience.solution || '',
|
||||||
|
lesson_learned: experience.lesson_learned || '',
|
||||||
|
date: experience.date || new Date().toISOString().split('T')[0],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [experience]);
|
||||||
|
|
||||||
|
const handleChange = (e) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setFormData(prev => ({ ...prev, [name]: value }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setSaving(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
let response;
|
||||||
|
if (experience && experience.id) {
|
||||||
|
response = await axios.put(`/api/experiences/${experience.id}/`, formData);
|
||||||
|
} else {
|
||||||
|
response = await axios.post('/api/experiences/', formData);
|
||||||
|
}
|
||||||
|
|
||||||
|
onSave(response.data);
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.response?.data?.message || '保存失败，请重试');
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const inputStyle = {
|
||||||
|
width: '100%',
|
||||||
|
padding: '10px',
|
||||||
|
border: '1px solid #ddd',
|
||||||
|
borderRadius: '6px',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontFamily: 'inherit',
|
||||||
|
resize: 'vertical',
|
||||||
|
};
|
||||||
|
|
||||||
|
const labelStyle = {
|
||||||
|
display: 'block',
|
||||||
|
marginBottom: '8px',
|
||||||
|
fontWeight: '600',
|
||||||
|
color: '#555',
|
||||||
|
};
|
||||||
|
|
||||||
|
const sectionStyle = {
|
||||||
|
marginBottom: '20px',
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
{error && (
|
||||||
|
<div style={{
|
||||||
|
background: '#fee',
|
||||||
|
color: '#c00',
|
||||||
|
padding: '10px',
|
||||||
|
borderRadius: '6px',
|
||||||
|
marginBottom: '15px',
|
||||||
|
}}>
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div style={sectionStyle}>
|
||||||
|
<label style={labelStyle}>💡 标题</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="title"
|
||||||
|
value={formData.title}
|
||||||
|
onChange={handleChange}
|
||||||
|
style={{ ...inputStyle, fontWeight: '600' }}
|
||||||
|
placeholder="给这个经验起个标题"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={sectionStyle}>
|
||||||
|
<label style={labelStyle}>📦 类别</label>
|
||||||
|
<select
|
||||||
|
name="category"
|
||||||
|
value={formData.category}
|
||||||
|
onChange={handleChange}
|
||||||
|
style={{ ...inputStyle, cursor: 'pointer' }}
|
||||||
|
>
|
||||||
|
<option value="deployment">📦 部署</option>
|
||||||
|
<option value="development">💻 开发</option>
|
||||||
|
<option value="database">🗄️ 数据库</option>
|
||||||
|
<option value="permission">🔐 权限</option>
|
||||||
|
<option value="network">🌐 网络</option>
|
||||||
|
<option value="other">其他</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={sectionStyle}>
|
||||||
|
<label style={labelStyle}> 日期</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
name="date"
|
||||||
|
value={formData.date}
|
||||||
|
onChange={handleChange}
|
||||||
|
style={inputStyle}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={sectionStyle}>
|
||||||
|
<label style={labelStyle}>🚨 问题描述</label>
|
||||||
|
<textarea
|
||||||
|
name="problem"
|
||||||
|
value={formData.problem}
|
||||||
|
onChange={handleChange}
|
||||||
|
style={{ ...inputStyle, minHeight: '100px' }}
|
||||||
|
placeholder="遇到了什么问题？详细描述一下"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={sectionStyle}>
|
||||||
|
<label style={labelStyle}>✅ 解决方案</label>
|
||||||
|
<textarea
|
||||||
|
name="solution"
|
||||||
|
value={formData.solution}
|
||||||
|
onChange={handleChange}
|
||||||
|
style={{ ...inputStyle, minHeight: '100px' }}
|
||||||
|
placeholder="如何解决的？步骤和方法"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={sectionStyle}>
|
||||||
|
<label style={labelStyle}>💎 经验教训</label>
|
||||||
|
<textarea
|
||||||
|
name="lesson_learned"
|
||||||
|
value={formData.lesson_learned}
|
||||||
|
onChange={handleChange}
|
||||||
|
style={{ ...inputStyle, minHeight: '80px' }}
|
||||||
|
placeholder="从中学到了什么？有什么经验可以分享？"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', gap: '10px', marginTop: '25px' }}>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={saving}
|
||||||
|
style={{
|
||||||
|
padding: '12px 24px',
|
||||||
|
background: '#667eea',
|
||||||
|
color: 'white',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '6px',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: '600',
|
||||||
|
cursor: saving ? 'not-allowed' : 'pointer',
|
||||||
|
opacity: saving ? 0.7 : 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{saving ? '保存中...' : '💾 保存'}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onCancel}
|
||||||
|
style={{
|
||||||
|
padding: '12px 24px',
|
||||||
|
background: '#f0f0f0',
|
||||||
|
color: '#666',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '6px',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: '600',
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
✖️ 取消
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ExperienceEditor;
|
||||||
@@ -1,37 +1,145 @@
|
|||||||
import React from 'react';
|
import React, { useState } from 'react';
|
||||||
|
import ExperienceEditor from './ExperienceEditor';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 经验总结列表组件
|
* 经验总结列表组件
|
||||||
|
* 显示经验列表，支持创建新经验
|
||||||
*/
|
*/
|
||||||
function ExperienceList({ experiences }) {
|
function ExperienceList({ experiences, onRefresh }) {
|
||||||
if (!experiences || experiences.length === 0) {
|
const [creating, setCreating] = useState(false);
|
||||||
return <div className="empty-state">暂无经验总结</div>;
|
const [selectedExp, setSelectedExp] = useState(null);
|
||||||
|
|
||||||
|
const handleSave = () => {
|
||||||
|
setCreating(false);
|
||||||
|
setSelectedExp(null);
|
||||||
|
if (onRefresh) {
|
||||||
|
onRefresh();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
setCreating(false);
|
||||||
|
setSelectedExp(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (exp) => {
|
||||||
|
setSelectedExp(exp);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getCategoryIcon = (category) => {
|
||||||
|
const icons = {
|
||||||
|
deployment: '📦',
|
||||||
|
development: '💻',
|
||||||
|
database: '🗄️',
|
||||||
|
permission: '🔐',
|
||||||
|
network: '🌐',
|
||||||
|
other: '📝',
|
||||||
|
};
|
||||||
|
return icons[category] || '📝';
|
||||||
|
};
|
||||||
|
|
||||||
|
const boxStyle = {
|
||||||
|
background: 'white',
|
||||||
|
borderRadius: '8px',
|
||||||
|
padding: '20px',
|
||||||
|
minHeight: '200px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const itemStyle = {
|
||||||
|
padding: '15px',
|
||||||
|
background: '#f8f9fa',
|
||||||
|
borderRadius: '6px',
|
||||||
|
marginBottom: '12px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
transition: 'all 0.2s',
|
||||||
|
};
|
||||||
|
|
||||||
|
const buttonStyle = {
|
||||||
|
padding: '10px 20px',
|
||||||
|
background: '#667eea',
|
||||||
|
color: 'white',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '6px',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: '600',
|
||||||
|
cursor: 'pointer',
|
||||||
|
};
|
||||||
|
|
||||||
|
// 创建/编辑模式
|
||||||
|
if (creating || selectedExp) {
|
||||||
|
return (
|
||||||
|
<div style={boxStyle}>
|
||||||
|
<ExperienceEditor
|
||||||
|
experience={selectedExp}
|
||||||
|
onSave={handleSave}
|
||||||
|
onCancel={handleCancel}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 列表模式
|
||||||
return (
|
return (
|
||||||
<div className="experience-list">
|
<div style={boxStyle}>
|
||||||
{experiences.map(exp => (
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
|
||||||
<div key={exp.id} className="experience-item">
|
<h3 style={{ margin: 0, color: '#333' }}>💡 经验总结</h3>
|
||||||
<div className="experience-header">
|
<button
|
||||||
<span className="experience-title">{exp.title}</span>
|
onClick={() => setCreating(true)}
|
||||||
<span className="experience-category">{exp.category}</span>
|
style={buttonStyle}
|
||||||
</div>
|
>
|
||||||
<div className="experience-problem">
|
➕ 新建
|
||||||
<div className="experience-problem-title">🐛 问题</div>
|
</button>
|
||||||
<div>{exp.problem}</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div className="experience-solution">
|
{!experiences || experiences.length === 0 ? (
|
||||||
<div className="experience-solution-title">✅ 解决方案</div>
|
<div style={{
|
||||||
<div>{exp.solution}</div>
|
color: '#999',
|
||||||
</div>
|
fontStyle: 'italic',
|
||||||
{exp.lesson_learned && (
|
textAlign: 'center',
|
||||||
<div className="experience-lesson">
|
padding: '40px 20px',
|
||||||
<div className="experience-lesson-title">📌 经验教训</div>
|
}}>
|
||||||
<div>{exp.lesson_learned}</div>
|
<p style={{ fontSize: '48px', marginBottom: '15px' }}>💡</p>
|
||||||
</div>
|
<p>还没有经验总结</p>
|
||||||
)}
|
<button onClick={() => setCreating(true)} style={{ ...buttonStyle, marginTop: '15px' }}>
|
||||||
|
➕ 创建第一条
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
))}
|
) : (
|
||||||
|
<div>
|
||||||
|
{experiences.map((exp) => (
|
||||||
|
<div
|
||||||
|
key={exp.id}
|
||||||
|
style={itemStyle}
|
||||||
|
onClick={() => handleEdit(exp)}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
e.currentTarget.style.background = '#e9ecef';
|
||||||
|
e.currentTarget.style.transform = 'translateX(5px)';
|
||||||
|
}}
|
||||||
|
onMouseLeave={(e) => {
|
||||||
|
e.currentTarget.style.background = '#f8f9fa';
|
||||||
|
e.currentTarget.style.transform = 'translateX(0)';
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'flex-start', gap: '10px' }}>
|
||||||
|
<span style={{ fontSize: '24px' }}>{getCategoryIcon(exp.category)}</span>
|
||||||
|
<div style={{ flex: 1 }}>
|
||||||
|
<div style={{ fontWeight: '600', color: '#333', marginBottom: '5px' }}>
|
||||||
|
{exp.title}
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: '13px', color: '#666', marginBottom: '8px' }}>
|
||||||
|
{exp.problem?.substring(0, 100)}{exp.problem?.length > 100 ? '...' : ''}
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: '12px', color: '#999' }}>
|
||||||
|
📅 {new Date(exp.date).toLocaleDateString('zh-CN')} ·
|
||||||
|
📝 {exp.get_category_display || exp.category}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span style={{ fontSize: '18px', color: '#999' }}>›</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
13
frontend/asset-manifest.json
Normal file
13
frontend/asset-manifest.json
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"files": {
|
||||||
|
"main.css": "/static/css/main.358dee66.css",
|
||||||
|
"main.js": "/static/js/main.7934ac80.js",
|
||||||
|
"index.html": "/index.html",
|
||||||
|
"main.358dee66.css.map": "/static/css/main.358dee66.css.map",
|
||||||
|
"main.7934ac80.js.map": "/static/js/main.7934ac80.js.map"
|
||||||
|
},
|
||||||
|
"entrypoints": [
|
||||||
|
"static/css/main.358dee66.css",
|
||||||
|
"static/js/main.7934ac80.js"
|
||||||
|
]
|
||||||
|
}
|
||||||
125
frontend/dashboard.html
Normal file
125
frontend/dashboard.html
Normal file
@@ -0,0 +1,125 @@
|
|||||||
|
<!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>
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.container { max-width: 1200px; margin: 0 auto; }
|
||||||
|
header {
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
header h1 { font-size: 2.5em; margin-bottom: 10px; }
|
||||||
|
.user-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
background: white;
|
||||||
|
padding: 15px 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.logout-btn {
|
||||||
|
background: #667eea;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.logout-btn:hover { background: #5568d3; }
|
||||||
|
.content {
|
||||||
|
background: white;
|
||||||
|
padding: 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.content h2 { color: #333; margin-bottom: 20px; }
|
||||||
|
.content p { color: #666; margin-bottom: 30px; }
|
||||||
|
.feature-list {
|
||||||
|
text-align: left;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.feature-item {
|
||||||
|
padding: 15px;
|
||||||
|
margin: 10px 0;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 5px;
|
||||||
|
border-left: 4px solid #667eea;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header>
|
||||||
|
<h1>⚡ 码神的日记系统</h1>
|
||||||
|
<p>记录每天的进步与成长</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="user-info">
|
||||||
|
<span>👤 欢迎，<strong id="username">用户</strong></span>
|
||||||
|
<button class="logout-btn" onclick="logout()">登出</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<h2>🎉 多用户系统已上线！</h2>
|
||||||
|
<p>你现在可以：</p>
|
||||||
|
<div class="feature-list">
|
||||||
|
<div class="feature-item">
|
||||||
|
<strong>📝 写日记</strong> - 记录每天的任务、学到的东西、反思和进步
|
||||||
|
</div>
|
||||||
|
<div class="feature-item">
|
||||||
|
<strong>📅 日历视图</strong> - 通过日历快速查看历史日记
|
||||||
|
</div>
|
||||||
|
<div class="feature-item">
|
||||||
|
<strong>💡 经验总结</strong> - 记录遇到的问题和解决方案
|
||||||
|
</div>
|
||||||
|
<div class="feature-item">
|
||||||
|
<strong>📊 任务管理</strong> - 追踪任务进展和完成率
|
||||||
|
</div>
|
||||||
|
<div class="feature-item">
|
||||||
|
<strong>🔒 数据隔离</strong> - 每个用户的数据完全独立
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p style="margin-top: 30px; color: #999;">
|
||||||
|
React 前端正在构建中，当前使用简化版界面<br>
|
||||||
|
完整功能即将上线...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 检查登录状态
|
||||||
|
fetch('/api/auth/me/')
|
||||||
|
.then(res => {
|
||||||
|
if (!res.ok) {
|
||||||
|
window.location.href = '/';
|
||||||
|
}
|
||||||
|
return res.json();
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
document.getElementById('username').textContent = data.username;
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
window.location.href = '/';
|
||||||
|
});
|
||||||
|
|
||||||
|
function logout() {
|
||||||
|
fetch('/api/auth/logout/', { method: 'POST' })
|
||||||
|
.then(() => {
|
||||||
|
window.location.href = '/';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -1,937 +1 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#667eea"/><meta name="description" content="码神的日记系统 - 记录每天的进步与成长"/><title>码神的日记系统</title><script defer="defer" src="/static/js/main.7934ac80.js"></script><link href="/static/css/main.358dee66.css" rel="stylesheet"></head><body><noscript>需要启用 JavaScript 才能运行此应用。</noscript><div id="root"></div></body></html>
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>码神的日记系统</title>
|
|
||||||
<!--
|
|
||||||
⚠️⚠️⚠️ 核心功能：日历组件 ⚠️⚠️⚠️
|
|
||||||
修改此文件前必须：
|
|
||||||
1. 阅读 docs/CALENDAR.md 了解日历功能
|
|
||||||
2. 确认不会删除日历相关代码
|
|
||||||
3. 修改后运行 test_frontend.py diary 验证
|
|
||||||
|
|
||||||
日历功能包括：
|
|
||||||
- 月历视图显示
|
|
||||||
- 点击日期显示日记
|
|
||||||
- 上月/下月切换
|
|
||||||
- 有日记的日期标记 📝
|
|
||||||
-->
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
min-height: 100vh;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
max-width: 1400px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
header {
|
|
||||||
text-align: center;
|
|
||||||
color: white;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
header h1 {
|
|
||||||
font-size: 2.5em;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
header p {
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
.stats {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
||||||
gap: 20px;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
.stat-card {
|
|
||||||
background: white;
|
|
||||||
padding: 15px;
|
|
||||||
border-radius: 10px;
|
|
||||||
text-align: center;
|
|
||||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
.stat-card h3 {
|
|
||||||
color: #667eea;
|
|
||||||
font-size: 1.8em;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
.stat-card p {
|
|
||||||
color: #666;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tab 切换 */
|
|
||||||
.tabs {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.tab-btn {
|
|
||||||
padding: 12px 24px;
|
|
||||||
background: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 1em;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #666;
|
|
||||||
transition: all 0.3s;
|
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
touch-action: manipulation;
|
|
||||||
}
|
|
||||||
.tab-btn:hover {
|
|
||||||
background: #f8f9fa;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
.tab-btn:active {
|
|
||||||
transform: scale(0.98);
|
|
||||||
}
|
|
||||||
.tab-btn.active {
|
|
||||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-box {
|
|
||||||
background: white;
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 20px;
|
|
||||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
.section-box h2 {
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
border-bottom: 2px solid #667eea;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ⚠️ 日历组件样式 - 核心功能，不可删除 */
|
|
||||||
.calendar-wrapper {
|
|
||||||
display: flex;
|
|
||||||
gap: 20px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.calendar {
|
|
||||||
flex: 0 0 300px;
|
|
||||||
background: #f8f9fa;
|
|
||||||
padding: 15px;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
.calendar-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
.calendar-header button {
|
|
||||||
background: #667eea;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
padding: 8px 12px;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
min-width: 44px;
|
|
||||||
min-height: 44px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
touch-action: manipulation;
|
|
||||||
}
|
|
||||||
.calendar-header button:hover {
|
|
||||||
background: #5568d3;
|
|
||||||
}
|
|
||||||
.calendar-header button:active {
|
|
||||||
background: #4857c0;
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
.calendar-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(7, 1fr);
|
|
||||||
gap: 2px;
|
|
||||||
}
|
|
||||||
.calendar-day-header {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 0.75em;
|
|
||||||
color: #666;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
.calendar-day {
|
|
||||||
aspect-ratio: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 0.85em;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
touch-action: manipulation;
|
|
||||||
min-width: 36px;
|
|
||||||
min-height: 36px;
|
|
||||||
}
|
|
||||||
.calendar-day:hover {
|
|
||||||
background: #e0e7ff;
|
|
||||||
}
|
|
||||||
.calendar-day:active {
|
|
||||||
background: #c7d2fe;
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
.calendar-day.selected {
|
|
||||||
background: #667eea;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.calendar-day.today {
|
|
||||||
border: 2px solid #667eea;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.calendar-day.has-data {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.calendar-day.has-data::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: 2px;
|
|
||||||
width: 6px;
|
|
||||||
height: 6px;
|
|
||||||
background: #10b981;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
.calendar-day.empty {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 内容区域 */
|
|
||||||
.content-area {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-item, .diary-item {
|
|
||||||
padding: 15px;
|
|
||||||
border-left: 4px solid #667eea;
|
|
||||||
background: #f8f9fa;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
touch-action: manipulation;
|
|
||||||
}
|
|
||||||
.task-item:hover, .diary-item:hover {
|
|
||||||
transform: translateX(5px);
|
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
.task-item:active, .diary-item:active {
|
|
||||||
transform: scale(0.98);
|
|
||||||
background: #eef1f5;
|
|
||||||
}
|
|
||||||
.task-item.status-pending { border-left-color: #6b7280; }
|
|
||||||
.task-item.status-in_progress { border-left-color: #3b82f6; }
|
|
||||||
.task-item.status-blocked { border-left-color: #f59e0b; }
|
|
||||||
.task-item.status-completed { border-left-color: #10b981; }
|
|
||||||
.task-item.status-cancelled { border-left-color: #ef4444; opacity: 0.6; }
|
|
||||||
|
|
||||||
.task-item .header, .diary-item .header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.task-item .title, .diary-item .title {
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
font-size: 1.1em;
|
|
||||||
}
|
|
||||||
.task-item .status {
|
|
||||||
padding: 4px 12px;
|
|
||||||
border-radius: 20px;
|
|
||||||
font-size: 0.85em;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.status-pending .status { background: #6b7280; }
|
|
||||||
.status-in_progress .status { background: #3b82f6; }
|
|
||||||
.status-blocked .status { background: #f59e0b; }
|
|
||||||
.status-completed .status { background: #10b981; }
|
|
||||||
.status-cancelled .status { background: #ef4444; }
|
|
||||||
|
|
||||||
.task-item .priority {
|
|
||||||
font-size: 0.8em;
|
|
||||||
color: #666;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
.task-item .progress-bar {
|
|
||||||
height: 8px;
|
|
||||||
background: #e5e7eb;
|
|
||||||
border-radius: 4px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
.task-item .progress-fill {
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(90deg, #667eea, #764ba2);
|
|
||||||
transition: width 0.3s;
|
|
||||||
}
|
|
||||||
.task-item .progress-text {
|
|
||||||
font-size: 0.85em;
|
|
||||||
color: #666;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.diary-item .date {
|
|
||||||
color: #667eea;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.diary-item .section {
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
.diary-item .section-title {
|
|
||||||
font-weight: bold;
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
.diary-item .section-content {
|
|
||||||
color: #666;
|
|
||||||
margin-left: 20px;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 任务详情 */
|
|
||||||
.task-detail {
|
|
||||||
background: #f8f9fa;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
.task-detail h3 {
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
.task-detail .meta {
|
|
||||||
display: flex;
|
|
||||||
gap: 20px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.task-detail .meta-item {
|
|
||||||
background: white;
|
|
||||||
padding: 8px 15px;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
.task-detail .description {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
.task-detail .progress-notes {
|
|
||||||
background: #fffbeb;
|
|
||||||
padding: 15px;
|
|
||||||
border-radius: 5px;
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
.task-detail .progress-notes h4 {
|
|
||||||
color: #92400e;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.task-detail .progress-notes .note {
|
|
||||||
font-size: 0.85em;
|
|
||||||
color: #666;
|
|
||||||
padding: 8px 0;
|
|
||||||
border-bottom: 1px solid #f3e5d5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.experience-item {
|
|
||||||
padding: 15px;
|
|
||||||
border-left: 4px solid #f59e0b;
|
|
||||||
background: #fffbeb;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
.experience-item .header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.experience-item .title {
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
font-size: 1.1em;
|
|
||||||
}
|
|
||||||
.experience-item .category {
|
|
||||||
background: #f59e0b;
|
|
||||||
color: white;
|
|
||||||
padding: 4px 12px;
|
|
||||||
border-radius: 20px;
|
|
||||||
font-size: 0.85em;
|
|
||||||
}
|
|
||||||
.experience-item .problem, .experience-item .solution, .experience-item .lesson {
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
.experience-item .problem-title {
|
|
||||||
font-weight: bold;
|
|
||||||
color: #dc2626;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
.experience-item .solution-title {
|
|
||||||
font-weight: bold;
|
|
||||||
color: #059669;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
.experience-item .lesson {
|
|
||||||
padding: 10px;
|
|
||||||
background: #fef3c7;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
.experience-item .lesson-title {
|
|
||||||
font-weight: bold;
|
|
||||||
color: #92400e;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading {
|
|
||||||
text-align: center;
|
|
||||||
padding: 40px;
|
|
||||||
color: white;
|
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
|
||||||
.error {
|
|
||||||
background: #fee;
|
|
||||||
color: #c00;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.empty-state {
|
|
||||||
text-align: center;
|
|
||||||
padding: 40px;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-2 {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
|
|
||||||
gap: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 移动端优化 */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
body {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
header h1 {
|
|
||||||
font-size: 1.8em;
|
|
||||||
}
|
|
||||||
header p {
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
.stats {
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: 10px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.stat-card {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
.stat-card h3 {
|
|
||||||
font-size: 1.4em;
|
|
||||||
}
|
|
||||||
.stat-card p {
|
|
||||||
font-size: 0.75em;
|
|
||||||
}
|
|
||||||
.tabs {
|
|
||||||
gap: 8px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
.tab-btn {
|
|
||||||
padding: 10px 16px;
|
|
||||||
font-size: 0.9em;
|
|
||||||
flex: 1;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.section-box {
|
|
||||||
padding: 15px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.section-box h2 {
|
|
||||||
font-size: 1.3em;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
.calendar-wrapper {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
.calendar {
|
|
||||||
flex: none;
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
.calendar-header span {
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
.calendar-header button {
|
|
||||||
padding: 3px 8px;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
.calendar-day {
|
|
||||||
font-size: 0.75em;
|
|
||||||
aspect-ratio: 1;
|
|
||||||
}
|
|
||||||
.calendar-day-header {
|
|
||||||
font-size: 0.65em;
|
|
||||||
}
|
|
||||||
.content-area {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.task-item, .diary-item {
|
|
||||||
padding: 12px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
.task-item .title, .diary-item .title {
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
.task-item .status {
|
|
||||||
font-size: 0.75em;
|
|
||||||
padding: 3px 10px;
|
|
||||||
}
|
|
||||||
.task-item .priority {
|
|
||||||
font-size: 0.75em;
|
|
||||||
}
|
|
||||||
.task-detail .meta {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
.task-detail .meta-item {
|
|
||||||
font-size: 0.85em;
|
|
||||||
}
|
|
||||||
.experience-item .title {
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
.experience-item .category {
|
|
||||||
font-size: 0.75em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 超小屏幕（< 400px） */
|
|
||||||
@media (max-width: 400px) {
|
|
||||||
.stats {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
}
|
|
||||||
.stat-card h3 {
|
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
|
||||||
.stat-card p {
|
|
||||||
font-size: 0.7em;
|
|
||||||
}
|
|
||||||
header h1 {
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
.tabs {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.tab-btn {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<header>
|
|
||||||
<h1>⚡ 码神的日记系统</h1>
|
|
||||||
<p>记录每天的进步与成长</p>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div id="app">
|
|
||||||
<div class="loading">加载中...</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const API_BASE = '/api';
|
|
||||||
let state = {
|
|
||||||
currentTab: 'tasks',
|
|
||||||
selectedDate: new Date().toISOString().split('T')[0],
|
|
||||||
selectedTask: null,
|
|
||||||
allTasks: [],
|
|
||||||
allEntries: [],
|
|
||||||
allExperiences: [],
|
|
||||||
taskStats: {},
|
|
||||||
diaryStats: {},
|
|
||||||
expStats: {}
|
|
||||||
};
|
|
||||||
|
|
||||||
async function loadData() {
|
|
||||||
try {
|
|
||||||
const [taskStatsRes, tasksRes, diaryStatsRes, entriesRes, expStatsRes, experiencesRes] = await Promise.all([
|
|
||||||
fetch(`${API_BASE}/tasks/stats/`),
|
|
||||||
fetch(`${API_BASE}/tasks/`),
|
|
||||||
fetch(`${API_BASE}/entries/stats/`),
|
|
||||||
fetch(`${API_BASE}/entries/`),
|
|
||||||
fetch(`${API_BASE}/experiences/stats/`),
|
|
||||||
fetch(`${API_BASE}/experiences/`)
|
|
||||||
]);
|
|
||||||
|
|
||||||
state.taskStats = await taskStatsRes.json();
|
|
||||||
state.allTasks = await tasksRes.json();
|
|
||||||
state.diaryStats = await diaryStatsRes.json();
|
|
||||||
state.allEntries = await entriesRes.json();
|
|
||||||
state.expStats = await expStatsRes.json();
|
|
||||||
state.allExperiences = await experiencesRes.json();
|
|
||||||
|
|
||||||
render();
|
|
||||||
} catch (error) {
|
|
||||||
document.getElementById('app').innerHTML = `
|
|
||||||
<div class="error">加载失败：${error.message}</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTasksByDate(date) {
|
|
||||||
return state.allTasks.filter(task => {
|
|
||||||
const createdDate = task.created_at.split('T')[0];
|
|
||||||
return createdDate === date;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function getEntryByDate(date) {
|
|
||||||
return state.allEntries.find(entry => entry.date === date);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ⚠️ 核心功能：渲染日历 - 不可删除
|
|
||||||
function renderCalendar(year, month, selectedDate, hasDataDates) {
|
|
||||||
const firstDay = new Date(year, month, 1);
|
|
||||||
const lastDay = new Date(year, month + 1, 0);
|
|
||||||
const startDay = firstDay.getDay();
|
|
||||||
const today = new Date().toISOString().split('T')[0];
|
|
||||||
|
|
||||||
const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
|
|
||||||
const dayNames = ['日', '一', '二', '三', '四', '五', '六'];
|
|
||||||
|
|
||||||
let html = `
|
|
||||||
<div class="calendar">
|
|
||||||
<div class="calendar-header">
|
|
||||||
<button onclick="changeMonth(-1)">←</button>
|
|
||||||
<span style="font-weight: bold;">${year}年 ${monthNames[month]}</span>
|
|
||||||
<button onclick="changeMonth(1)">→</button>
|
|
||||||
</div>
|
|
||||||
<div class="calendar-grid">
|
|
||||||
${dayNames.map(d => `<div class="calendar-day-header">${d}</div>`).join('')}
|
|
||||||
${Array(startDay).fill('<div class="calendar-day empty"></div>').join('')}
|
|
||||||
`;
|
|
||||||
|
|
||||||
for (let day = 1; day <= lastDay.getDate(); day++) {
|
|
||||||
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
|
||||||
const isSelected = dateStr === selectedDate;
|
|
||||||
const isToday = dateStr === today;
|
|
||||||
const hasData = hasDataDates.includes(dateStr);
|
|
||||||
|
|
||||||
html += `
|
|
||||||
<div class="calendar-day ${isSelected ? 'selected' : ''} ${isToday ? 'today' : ''} ${hasData ? 'has-data' : ''}"
|
|
||||||
onclick="selectDate('${dateStr}')">
|
|
||||||
${day}
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
html += `</div></div>`;
|
|
||||||
return html;
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderTasksView() {
|
|
||||||
const current = state.currentCalendar || new Date();
|
|
||||||
|
|
||||||
// 任务列表视图
|
|
||||||
if (!state.selectedTask) {
|
|
||||||
return `
|
|
||||||
<div class="tabs">
|
|
||||||
<button class="tab-btn active" onclick="switchTab('tasks')">📋 工作任务</button>
|
|
||||||
<button class="tab-btn" onclick="switchTab('diary')">📝 日记</button>
|
|
||||||
<button class="tab-btn" onclick="switchTab('experiences')">💡 经验总结</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section-box">
|
|
||||||
<h2>📋 所有任务</h2>
|
|
||||||
<div class="content-area">
|
|
||||||
${state.allTasks.length === 0 ? `
|
|
||||||
<div class="empty-state">
|
|
||||||
<p>暂无任务</p>
|
|
||||||
</div>
|
|
||||||
` : state.allTasks.map(task => `
|
|
||||||
<div class="task-item status-${task.status}" onclick="selectTask(${task.id})">
|
|
||||||
<div class="header">
|
|
||||||
<span class="title">${task.title}</span>
|
|
||||||
<span class="status">${task.status_display}</span>
|
|
||||||
</div>
|
|
||||||
<div class="priority">优先级：${task.priority_display} | 创建：${task.created_at.split('T')[0]}</div>
|
|
||||||
${task.description ? `<div class="description" style="max-height: 60px; overflow: hidden;">${task.description}</div>` : ''}
|
|
||||||
<div class="progress-bar">
|
|
||||||
<div class="progress-fill" style="width: ${task.progress_percent}%"></div>
|
|
||||||
</div>
|
|
||||||
<div class="progress-text">进展：${task.progress_percent}%</div>
|
|
||||||
</div>
|
|
||||||
`).join('')}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 任务详情视图（带日历）
|
|
||||||
const task = state.selectedTask;
|
|
||||||
const taskProgressDates = task.progress_notes ?
|
|
||||||
task.progress_notes.match(/\[(\d{4}-\d{2}-\d{2})\]/g)?.map(s => s.slice(1, 11)) || [] : [];
|
|
||||||
const calendarHtml = renderCalendar(current.getFullYear(), current.getMonth(),
|
|
||||||
state.selectedDate, taskProgressDates, true);
|
|
||||||
|
|
||||||
const selectedDateProgress = task.progress_notes
|
|
||||||
.split('\n')
|
|
||||||
.filter(line => line.startsWith(`[${state.selectedDate}]`))
|
|
||||||
.map(line => line.slice(13))
|
|
||||||
.join('\n');
|
|
||||||
|
|
||||||
return `
|
|
||||||
<div class="tabs">
|
|
||||||
<button class="tab-btn" onclick="switchTab('tasks')">📋 工作任务</button>
|
|
||||||
<button class="tab-btn" onclick="switchTab('diary')">📝 日记</button>
|
|
||||||
<button class="tab-btn" onclick="switchTab('experiences')">💡 经验总结</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section-box">
|
|
||||||
<h2>📋 任务详情</h2>
|
|
||||||
<button class="tab-btn" onclick="state.selectedTask = null; render();" style="margin-bottom: 20px;">← 返回列表</button>
|
|
||||||
|
|
||||||
<div class="task-detail">
|
|
||||||
<h3>${task.title}</h3>
|
|
||||||
<div class="meta">
|
|
||||||
<div class="meta-item">状态：${task.status_display}</div>
|
|
||||||
<div class="meta-item">优先级：${task.priority_display}</div>
|
|
||||||
<div class="meta-item">负责人：${task.assigned_to || '码神'}</div>
|
|
||||||
<div class="meta-item">创建：${task.created_at.split('T')[0]}</div>
|
|
||||||
<div class="meta-item">进展：${task.progress_percent}%</div>
|
|
||||||
</div>
|
|
||||||
${task.description ? `<div class="description"><strong>描述：</strong><br>${task.description}</div>` : ''}
|
|
||||||
|
|
||||||
<h3 style="margin-top: 25px; margin-bottom: 15px;">📅 任务进展日历</h3>
|
|
||||||
<p style="color: #666; margin-bottom: 15px; font-size: 0.9em;">点击日历查看当日的任务记录</p>
|
|
||||||
<div class="calendar-wrapper">
|
|
||||||
${calendarHtml}
|
|
||||||
<div class="content-area">
|
|
||||||
<div class="task-detail" style="background: white; border: 1px solid #e0e7ff;">
|
|
||||||
<h4 style="color: #667eea; margin-bottom: 10px;">📝 ${state.selectedDate} 的进展记录</h4>
|
|
||||||
${selectedDateProgress ? `
|
|
||||||
<div class="progress-notes" style="background: #f8f9fa;">
|
|
||||||
<div class="note" style="white-space: pre-wrap;">${selectedDateProgress}</div>
|
|
||||||
</div>
|
|
||||||
` : `
|
|
||||||
<div class="empty-state" style="padding: 20px;">
|
|
||||||
<p style="color: #999;">${state.selectedDate} 暂无记录</p>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderDiaryView() {
|
|
||||||
const entry = getEntryByDate(state.selectedDate);
|
|
||||||
const entryDates = state.allEntries.map(e => e.date);
|
|
||||||
const current = state.currentCalendar || new Date();
|
|
||||||
const calendarHtml = renderCalendar(current.getFullYear(), current.getMonth(), state.selectedDate, entryDates);
|
|
||||||
|
|
||||||
return `
|
|
||||||
<div class="tabs">
|
|
||||||
<button class="tab-btn" onclick="switchTab('tasks')">📋 工作任务</button>
|
|
||||||
<button class="tab-btn active" onclick="switchTab('diary')">📝 日记</button>
|
|
||||||
<button class="tab-btn" onclick="switchTab('experiences')">💡 经验总结</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section-box">
|
|
||||||
<h2>📝 日记</h2>
|
|
||||||
<p style="color: #666; margin-bottom: 15px; font-size: 0.9em;">点击日历选择日期查看日记</p>
|
|
||||||
<div class="calendar-wrapper">
|
|
||||||
${calendarHtml}
|
|
||||||
<div class="content-area">
|
|
||||||
${!entry ? `
|
|
||||||
<div class="empty-state">
|
|
||||||
<p>📅 ${state.selectedDate} 没有日记</p>
|
|
||||||
<p style="margin-top: 10px; font-size: 0.9em; color: #999;">点击日历选择其他日期</p>
|
|
||||||
</div>
|
|
||||||
` : `
|
|
||||||
<div class="diary-item" style="cursor: default;">
|
|
||||||
<div class="header">
|
|
||||||
<span class="title">${entry.title || '每日日记'}</span>
|
|
||||||
<span class="date">${entry.date}</span>
|
|
||||||
</div>
|
|
||||||
${entry.completed_tasks ? `
|
|
||||||
<div class="section">
|
|
||||||
<span class="section-title">✅ 完成的任务</span>
|
|
||||||
<div class="section-content">${entry.completed_tasks}</div>
|
|
||||||
</div>
|
|
||||||
` : ''}
|
|
||||||
${entry.learned ? `
|
|
||||||
<div class="section">
|
|
||||||
<span class="section-title">📚 学到的东西</span>
|
|
||||||
<div class="section-content">${entry.learned}</div>
|
|
||||||
</div>
|
|
||||||
` : ''}
|
|
||||||
${entry.problems ? `
|
|
||||||
<div class="section">
|
|
||||||
<span class="section-title">🐛 遇到的问题</span>
|
|
||||||
<div class="section-content">${entry.problems}</div>
|
|
||||||
</div>
|
|
||||||
` : ''}
|
|
||||||
${entry.reflections ? `
|
|
||||||
<div class="section">
|
|
||||||
<span class="section-title">💡 想法和反思</span>
|
|
||||||
<div class="section-content">${entry.reflections}</div>
|
|
||||||
</div>
|
|
||||||
` : ''}
|
|
||||||
${entry.improvements ? `
|
|
||||||
<div class="section">
|
|
||||||
<span class="section-title">📈 进步点</span>
|
|
||||||
<div class="section-content">${entry.improvements}</div>
|
|
||||||
</div>
|
|
||||||
` : ''}
|
|
||||||
${entry.plans ? `
|
|
||||||
<div class="section">
|
|
||||||
<span class="section-title">🎯 明日计划</span>
|
|
||||||
<div class="section-content">${entry.plans}</div>
|
|
||||||
</div>
|
|
||||||
` : ''}
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderExperiencesView() {
|
|
||||||
return `
|
|
||||||
<div class="tabs">
|
|
||||||
<button class="tab-btn" onclick="switchTab('tasks')">📋 工作任务</button>
|
|
||||||
<button class="tab-btn" onclick="switchTab('diary')">📝 日记</button>
|
|
||||||
<button class="tab-btn active" onclick="switchTab('experiences')">💡 经验总结</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section-box">
|
|
||||||
<h2>💡 经验总结</h2>
|
|
||||||
${state.allExperiences.length === 0 ? `
|
|
||||||
<div class="empty-state">
|
|
||||||
<p>暂无经验总结</p>
|
|
||||||
</div>
|
|
||||||
` : state.allExperiences.map(exp => `
|
|
||||||
<div class="experience-item">
|
|
||||||
<div class="header">
|
|
||||||
<span class="title">${exp.title}</span>
|
|
||||||
<span class="category">${exp.category}</span>
|
|
||||||
</div>
|
|
||||||
<div class="problem">
|
|
||||||
<div class="problem-title">🐛 问题</div>
|
|
||||||
<div class="section-content">${exp.problem}</div>
|
|
||||||
</div>
|
|
||||||
<div class="solution">
|
|
||||||
<div class="solution-title">✅ 解决方案</div>
|
|
||||||
<div class="section-content">${exp.solution}</div>
|
|
||||||
</div>
|
|
||||||
${exp.lesson_learned ? `
|
|
||||||
<div class="lesson">
|
|
||||||
<div class="lesson-title">📌 经验教训</div>
|
|
||||||
<div class="section-content">${exp.lesson_learned}</div>
|
|
||||||
</div>
|
|
||||||
` : ''}
|
|
||||||
</div>
|
|
||||||
`).join('')}
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function render() {
|
|
||||||
const app = document.getElementById('app');
|
|
||||||
|
|
||||||
let content = '';
|
|
||||||
if (state.currentTab === 'tasks') {
|
|
||||||
content = renderTasksView();
|
|
||||||
} else if (state.currentTab === 'diary') {
|
|
||||||
content = renderDiaryView();
|
|
||||||
} else {
|
|
||||||
content = renderExperiencesView();
|
|
||||||
}
|
|
||||||
|
|
||||||
app.innerHTML = `
|
|
||||||
<div class="stats">
|
|
||||||
<div class="stat-card">
|
|
||||||
<h3>${state.diaryStats.total_entries || 0}</h3>
|
|
||||||
<p>总日记</p>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<h3>${state.taskStats.total || 0}</h3>
|
|
||||||
<p>总任务</p>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<h3>${state.taskStats.in_progress || 0}</h3>
|
|
||||||
<p>进行中</p>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<h3>${state.taskStats.completed || 0}</h3>
|
|
||||||
<p>已完成</p>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<h3>${state.taskStats.completion_rate || 0}%</h3>
|
|
||||||
<p>完成率</p>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<h3>${state.expStats.total_experiences || 0}</h3>
|
|
||||||
<p>经验</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
${content}
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function switchTab(tab) {
|
|
||||||
state.currentTab = tab;
|
|
||||||
state.selectedTask = null;
|
|
||||||
render();
|
|
||||||
}
|
|
||||||
|
|
||||||
// ⚠️ 核心功能：选择日期显示日记 - 不可删除
|
|
||||||
function selectDate(date) {
|
|
||||||
state.selectedDate = date;
|
|
||||||
render();
|
|
||||||
}
|
|
||||||
|
|
||||||
function selectTask(taskId) {
|
|
||||||
state.selectedTask = state.allTasks.find(t => t.id === taskId);
|
|
||||||
render();
|
|
||||||
}
|
|
||||||
|
|
||||||
// ⚠️ 核心功能：切换月份 - 不可删除
|
|
||||||
function changeMonth(delta) {
|
|
||||||
if (!state.currentCalendar) {
|
|
||||||
state.currentCalendar = new Date();
|
|
||||||
}
|
|
||||||
state.currentCalendar.setMonth(state.currentCalendar.getMonth() + delta);
|
|
||||||
render();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 初始化
|
|
||||||
loadData();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
149
frontend/login.html
Normal file
149
frontend/login.html
Normal file
@@ -0,0 +1,149 @@
|
|||||||
|
<!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>
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.auth-card {
|
||||||
|
background: white;
|
||||||
|
padding: 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
.auth-card h1 {
|
||||||
|
color: #667eea;
|
||||||
|
font-size: 2em;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.auth-card h2 {
|
||||||
|
color: #333;
|
||||||
|
font-size: 1.5em;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
color: #555;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.form-group input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
.form-group input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #667eea;
|
||||||
|
}
|
||||||
|
.btn-primary {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 1.1em;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.btn-primary:hover {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
.error {
|
||||||
|
background: #fee;
|
||||||
|
color: #c00;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.success {
|
||||||
|
background: #efe;
|
||||||
|
color: #0a0;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="auth-card">
|
||||||
|
<h1>⚡ 码神的日记系统</h1>
|
||||||
|
<h2>登录</h2>
|
||||||
|
|
||||||
|
<div id="message"></div>
|
||||||
|
|
||||||
|
<form id="loginForm">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>用户名</label>
|
||||||
|
<input type="text" id="username" required placeholder="请输入用户名" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>密码</label>
|
||||||
|
<input type="password" id="password" required placeholder="请输入密码" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="btn-primary">登录</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<p style="text-align: center; margin-top: 20px; color: #666;">
|
||||||
|
默认账号：beijixing / beijixing123
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const API_BASE = '/api';
|
||||||
|
|
||||||
|
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const username = document.getElementById('username').value;
|
||||||
|
const password = document.getElementById('password').value;
|
||||||
|
const messageDiv = document.getElementById('message');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${API_BASE}/auth/login/`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ username, password })
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await res.json();
|
||||||
|
|
||||||
|
if (res.ok) {
|
||||||
|
messageDiv.innerHTML = `<div class="success">✅ 登录成功！正在跳转...</div>`;
|
||||||
|
setTimeout(() => {
|
||||||
|
window.location.href = '/dashboard.html';
|
||||||
|
}, 1000);
|
||||||
|
} else {
|
||||||
|
messageDiv.innerHTML = `<div class="error">❌ ${data.message || '登录失败'}</div>`;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
messageDiv.innerHTML = `<div class="error">❌ 网络错误：${err.message}</div>`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user