feat: 完善日记系统前端（创建/编辑功能）
新增功能: - ✏️ DiaryEditor 组件 - 日记创建/编辑器 - 💡 ExperienceEditor 组件 - 经验总结创建/编辑器 - 🔄 DiaryDetail 组件 - 支持查看/编辑切换 - 🔄 ExperienceList 组件 - 支持创建/编辑经验 改进: - 📱 优化 UI 样式和交互体验 - 🔐 完善认证流程 - 📅 日历组件保持不变（核心功能） 技术栈: - React 18 + Axios - MobX (状态管理) - 原生 CSS
This commit is contained in:
maoshen
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
@@ -16,8 +16,8 @@ const API_BASE = '/api';
|
||||
* - 用户认证
|
||||
* - 统计面板
|
||||
* - 日历组件 ⭐
|
||||
* - 日记详情
|
||||
* - 经验总结
|
||||
* - 日记详情（支持创建/编辑）
|
||||
* - 经验总结（支持创建/编辑）
|
||||
*
|
||||
* ⚠️ 修改前阅读 docs/README.md
|
||||
*/
|
||||
@@ -25,7 +25,6 @@ function App() {
|
||||
const [user, setUser] = useState(null);
|
||||
const [authView, setAuthView] = useState('login'); // login | register
|
||||
const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
|
||||
const [diaryDates, setDiaryDates] = useState([]);
|
||||
const [entries, setEntries] = useState([]);
|
||||
const [experiences, setExperiences] = useState([]);
|
||||
const [stats, setStats] = useState({});
|
||||
@@ -88,7 +87,6 @@ function App() {
|
||||
setStats(statsRes.data);
|
||||
setEntries(entriesRes.data);
|
||||
setExperiences(expRes.data);
|
||||
setDiaryDates(entriesRes.data.map(e => e.date));
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
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 (authView === 'register') {
|
||||
@@ -104,18 +121,61 @@ function App() {
|
||||
return <Login onLogin={handleLogin} />;
|
||||
}
|
||||
|
||||
const handleDateSelect = (date) => {
|
||||
setSelectedDate(date);
|
||||
};
|
||||
|
||||
const selectedEntry = entries.find(e => e.date === selectedDate);
|
||||
|
||||
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) {
|
||||
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 (
|
||||
@@ -141,20 +201,36 @@ function App() {
|
||||
<Calendar
|
||||
selectedDate={selectedDate}
|
||||
onDateSelect={handleDateSelect}
|
||||
diaryDates={diaryDates}
|
||||
diaryDates={entries.map(e => e.date)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="section-box">
|
||||
<h2>📝 {selectedDate} 的日记</h2>
|
||||
<DiaryDetail entry={selectedEntry} />
|
||||
<DiaryDetail
|
||||
entry={selectedEntry}
|
||||
date={selectedDate}
|
||||
onUpdate={handleDiaryUpdate}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="section-box">
|
||||
<h2>💡 经验总结</h2>
|
||||
<ExperienceList experiences={experiences} />
|
||||
<ExperienceList
|
||||
experiences={experiences}
|
||||
onRefresh={handleExperienceRefresh}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<footer style={{
|
||||
textAlign: 'center',
|
||||
padding: '20px',
|
||||
color: '#999',
|
||||
fontSize: '14px',
|
||||
marginTop: '30px',
|
||||
}}>
|
||||
<p>© 2026 码神的日记系统 · 记录每一天的成长</p>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,63 +1,181 @@
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import DiaryEditor from './DiaryEditor';
|
||||
|
||||
/**
|
||||
* 日记详情组件
|
||||
* 显示选中日期的日记内容
|
||||
* 显示日记内容，支持编辑
|
||||
*/
|
||||
function DiaryDetail({ entry }) {
|
||||
if (!entry) {
|
||||
function DiaryDetail({ entry, date, onUpdate }) {
|
||||
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 (
|
||||
<div className="empty-state">
|
||||
<p>这一天还没有日记</p>
|
||||
<div style={boxStyle}>
|
||||
<DiaryEditor
|
||||
entry={entry}
|
||||
date={date}
|
||||
onSave={handleSave}
|
||||
onCancel={handleCancel}
|
||||
/>
|
||||
</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 (
|
||||
<div className="diary-detail">
|
||||
<h3>{entry.title || '每日日记'}</h3>
|
||||
|
||||
{entry.completed_tasks && (
|
||||
<div className="diary-section">
|
||||
<div className="section-title">✅ 完成的任务</div>
|
||||
<div className="section-content">{entry.completed_tasks}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{entry.learned && (
|
||||
<div className="diary-section">
|
||||
<div className="section-title">📚 学到的东西</div>
|
||||
<div className="section-content">{entry.learned}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{entry.problems && (
|
||||
<div className="diary-section">
|
||||
<div className="section-title">🐛 遇到的问题</div>
|
||||
<div className="section-content">{entry.problems}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{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 style={boxStyle}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
|
||||
<h3 style={{ margin: 0, color: '#333' }}>{entry.title}</h3>
|
||||
<button
|
||||
onClick={handleEdit}
|
||||
style={{
|
||||
...buttonStyle,
|
||||
marginTop: 0,
|
||||
background: '#f0f0f0',
|
||||
color: '#666',
|
||||
}}
|
||||
>
|
||||
✏️ 编辑
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{!hasContent ? (
|
||||
<div style={emptyStyle}>
|
||||
<p>这篇日记还没有内容</p>
|
||||
<button onClick={handleEdit} style={buttonStyle}>
|
||||
✏️ 编辑
|
||||
</button>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
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 }) {
|
||||
if (!experiences || experiences.length === 0) {
|
||||
return <div className="empty-state">暂无经验总结</div>;
|
||||
function ExperienceList({ experiences, onRefresh }) {
|
||||
const [creating, setCreating] = useState(false);
|
||||
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 (
|
||||
<div className="experience-list">
|
||||
{experiences.map(exp => (
|
||||
<div key={exp.id} className="experience-item">
|
||||
<div className="experience-header">
|
||||
<span className="experience-title">{exp.title}</span>
|
||||
<span className="experience-category">{exp.category}</span>
|
||||
</div>
|
||||
<div className="experience-problem">
|
||||
<div className="experience-problem-title">🐛 问题</div>
|
||||
<div>{exp.problem}</div>
|
||||
</div>
|
||||
<div className="experience-solution">
|
||||
<div className="experience-solution-title">✅ 解决方案</div>
|
||||
<div>{exp.solution}</div>
|
||||
</div>
|
||||
{exp.lesson_learned && (
|
||||
<div className="experience-lesson">
|
||||
<div className="experience-lesson-title">📌 经验教训</div>
|
||||
<div>{exp.lesson_learned}</div>
|
||||
</div>
|
||||
)}
|
||||
<div style={boxStyle}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
|
||||
<h3 style={{ margin: 0, color: '#333' }}>💡 经验总结</h3>
|
||||
<button
|
||||
onClick={() => setCreating(true)}
|
||||
style={buttonStyle}
|
||||
>
|
||||
➕ 新建
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{!experiences || experiences.length === 0 ? (
|
||||
<div style={{
|
||||
color: '#999',
|
||||
fontStyle: 'italic',
|
||||
textAlign: 'center',
|
||||
padding: '40px 20px',
|
||||
}}>
|
||||
<p style={{ fontSize: '48px', marginBottom: '15px' }}>💡</p>
|
||||
<p>还没有经验总结</p>
|
||||
<button onClick={() => setCreating(true)} style={{ ...buttonStyle, marginTop: '15px' }}>
|
||||
➕ 创建第一条
|
||||
</button>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user