【悟凡】真正意义上的净土重生：只保留核心逻辑
This commit is contained in:
17172
frontend/package-lock.json
generated
Normal file
17172
frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
28
frontend/package.json
Normal file
28
frontend/package.json
Normal file
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "meeting-room-frontend",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.20.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"axios": "^1.6.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
11
frontend/public/index.html
Normal file
11
frontend/public/index.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>🏛️ 龙虾议事厅</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
403
frontend/src/App.js
Normal file
403
frontend/src/App.js
Normal file
@@ -0,0 +1,403 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { BrowserRouter as Router, Routes, Route, Link, useNavigate, useParams } from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
|
||||
const API_BASE = 'http://localhost:8000/api/v1';
|
||||
|
||||
// 配置 axios 默认头
|
||||
axios.interceptors.request.use(config => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
});
|
||||
|
||||
// ============ 登录页面 ============
|
||||
function LoginPage() {
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleLogin = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
const response = await axios.post(`${API_BASE}/auth/login/`, { username, password });
|
||||
const token = response.data.token;
|
||||
localStorage.setItem('token', token);
|
||||
localStorage.setItem('user', JSON.stringify(response.data.user));
|
||||
navigate('/meetings');
|
||||
} catch (error) {
|
||||
alert('登录失败：' + (error.response?.data?.detail || error.message));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<div style={styles.card}>
|
||||
<h1 style={styles.title}>🏛️ 龙虾议事厅</h1>
|
||||
<form onSubmit={handleLogin} style={styles.form}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="用户名"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
style={styles.input}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="密码"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
style={styles.input}
|
||||
required
|
||||
/>
|
||||
<button type="submit" style={styles.button}>登录</button>
|
||||
</form>
|
||||
<p style={styles.hint}>提示：首次使用请先注册超级用户</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ============ 会议列表页面 ============
|
||||
function MeetingList() {
|
||||
const [meetings, setMeetings] = useState([]);
|
||||
const [topic, setTopic] = useState('');
|
||||
const navigate = useNavigate();
|
||||
const token = localStorage.getItem('token');
|
||||
|
||||
useEffect(() => {
|
||||
if (!token) {
|
||||
navigate('/login');
|
||||
return;
|
||||
}
|
||||
fetchMeetings();
|
||||
}, []);
|
||||
|
||||
const fetchMeetings = async () => {
|
||||
try {
|
||||
const response = await axios.get(`${API_BASE}/meetings/`, {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
});
|
||||
setMeetings(response.data);
|
||||
} catch (error) {
|
||||
console.error('获取会议失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const createMeeting = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
const response = await axios.post(
|
||||
`${API_BASE}/meetings/`,
|
||||
{ topic },
|
||||
{ headers: { Authorization: `Bearer ${token}` } }
|
||||
);
|
||||
navigate(`/meeting/${response.data.id}`);
|
||||
} catch (error) {
|
||||
alert('创建失败：' + (error.response?.data?.detail || error.message));
|
||||
}
|
||||
};
|
||||
|
||||
const joinMeeting = async (meetingId) => {
|
||||
const inviteCode = prompt('请输入邀请码:');
|
||||
if (!inviteCode) return;
|
||||
|
||||
try {
|
||||
await axios.post(
|
||||
`${API_BASE}/meetings/${meetingId}/join/`,
|
||||
{ invite_code: inviteCode },
|
||||
{ headers: { Authorization: `Bearer ${token}` } }
|
||||
);
|
||||
navigate(`/meeting/${meetingId}`);
|
||||
} catch (error) {
|
||||
alert('加入失败：' + (error.response?.data?.error || error.message));
|
||||
}
|
||||
};
|
||||
|
||||
const logout = () => {
|
||||
localStorage.removeItem('token');
|
||||
navigate('/login');
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<div style={styles.header}>
|
||||
<h1 style={styles.title}>🏛️ 我的会议室</h1>
|
||||
<button onClick={logout} style={styles.logoutBtn}>退出</button>
|
||||
</div>
|
||||
|
||||
<div style={styles.card}>
|
||||
<h2>创建新会议</h2>
|
||||
<form onSubmit={createMeeting} style={styles.form}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="会议主题"
|
||||
value={topic}
|
||||
onChange={(e) => setTopic(e.target.value)}
|
||||
style={styles.input}
|
||||
required
|
||||
/>
|
||||
<button type="submit" style={styles.button}>创建</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div style={styles.meetingList}>
|
||||
{meetings.map(meeting => (
|
||||
<div key={meeting.id} style={styles.meetingCard}>
|
||||
<div>
|
||||
<h3>{meeting.topic}</h3>
|
||||
<p>状态：{meeting.status} | 参会：{meeting.participant_count} | 邀请码：{meeting.invite_code}</p>
|
||||
</div>
|
||||
<div>
|
||||
<button onClick={() => navigate(`/meeting/${meeting.id}`)} style={styles.smallBtn}>进入</button>
|
||||
<button onClick={() => joinMeeting(meeting.id)} style={styles.smallBtn}>加入</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ============ 会议室页面 ============
|
||||
function MeetingRoom() {
|
||||
const { id } = useParams();
|
||||
const [messages, setMessages] = useState([]);
|
||||
const [content, setContent] = useState('');
|
||||
const [participants, setParticipants] = useState([]);
|
||||
const [lastId, setLastId] = useState(0);
|
||||
const token = localStorage.getItem('token');
|
||||
|
||||
useEffect(() => {
|
||||
if (!token) return;
|
||||
fetchParticipants();
|
||||
fetchMessages();
|
||||
|
||||
// 1 秒轮询新消息
|
||||
const interval = setInterval(fetchMessages, 1000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const fetchParticipants = async () => {
|
||||
try {
|
||||
const response = await axios.get(`${API_BASE}/meetings/${id}/participants/`, {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
});
|
||||
setParticipants(response.data);
|
||||
} catch (error) {
|
||||
console.error('获取参会者失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchMessages = async () => {
|
||||
try {
|
||||
const response = await axios.get(`${API_BASE}/meetings/${id}/messages/?last_id=${lastId}`, {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
});
|
||||
if (response.data.messages.length > 0) {
|
||||
setMessages(prev => [...prev, ...response.data.messages]);
|
||||
setLastId(response.data.messages[response.data.messages.length - 1].id);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取消息失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const sendMessage = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
await axios.post(
|
||||
`${API_BASE}/meetings/${id}/send_message/`,
|
||||
{ content },
|
||||
{ headers: { Authorization: `Bearer ${token}` } }
|
||||
);
|
||||
setContent('');
|
||||
fetchMessages();
|
||||
} catch (error) {
|
||||
alert('发送失败：' + (error.response?.data?.detail || error.message));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<div style={styles.header}>
|
||||
<Link to="/meetings" style={styles.backLink}>← 返回</Link>
|
||||
<h1 style={styles.title}>🏛️ 会议室</h1>
|
||||
<div style={styles.participants}>
|
||||
{participants.map(p => (
|
||||
<span key={p.id} style={styles.participant}>
|
||||
{p.agent_emoji} {p.nickname}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={styles.chatContainer}>
|
||||
<div style={styles.messages}>
|
||||
{messages.map(msg => (
|
||||
<div key={msg.id} style={styles.message}>
|
||||
<strong>{msg.sender_emoji} {msg.sender_name}</strong>
|
||||
<span style={styles.time}>{new Date(msg.created_at).toLocaleTimeString()}</span>
|
||||
<p>{msg.content}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<form onSubmit={sendMessage} style={styles.form}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="输入消息..."
|
||||
value={content}
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
style={styles.input}
|
||||
required
|
||||
/>
|
||||
<button type="submit" style={styles.button}>发送</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ============ 主应用 ============
|
||||
function App() {
|
||||
return (
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route path="/meetings" element={<MeetingList />} />
|
||||
<Route path="/meeting/:id" element={<MeetingRoom />} />
|
||||
<Route path="/" element={<LoginPage />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
// ============ 样式 ============
|
||||
const styles = {
|
||||
container: {
|
||||
maxWidth: '1200px',
|
||||
margin: '0 auto',
|
||||
padding: '20px',
|
||||
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
|
||||
},
|
||||
header: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '20px',
|
||||
marginBottom: '20px'
|
||||
},
|
||||
title: {
|
||||
margin: '0',
|
||||
color: '#1a365d'
|
||||
},
|
||||
card: {
|
||||
background: 'white',
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
marginBottom: '20px',
|
||||
boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
|
||||
},
|
||||
form: {
|
||||
display: 'flex',
|
||||
gap: '10px',
|
||||
marginBottom: '15px'
|
||||
},
|
||||
input: {
|
||||
flex: 1,
|
||||
padding: '12px',
|
||||
border: '2px solid #e2e8f0',
|
||||
borderRadius: '8px',
|
||||
fontSize: '1em'
|
||||
},
|
||||
button: {
|
||||
padding: '12px 24px',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '8px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '1em',
|
||||
fontWeight: '600'
|
||||
},
|
||||
logoutBtn: {
|
||||
marginLeft: 'auto',
|
||||
padding: '8px 16px',
|
||||
background: '#edf2f7',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer'
|
||||
},
|
||||
meetingList: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '15px'
|
||||
},
|
||||
meetingCard: {
|
||||
background: 'white',
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
|
||||
},
|
||||
smallBtn: {
|
||||
padding: '8px 16px',
|
||||
background: '#4299e1',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer',
|
||||
marginLeft: '10px'
|
||||
},
|
||||
chatContainer: {
|
||||
background: 'white',
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
|
||||
},
|
||||
messages: {
|
||||
maxHeight: '500px',
|
||||
overflowY: 'auto',
|
||||
marginBottom: '20px'
|
||||
},
|
||||
message: {
|
||||
padding: '15px',
|
||||
background: '#f7fafc',
|
||||
borderRadius: '8px',
|
||||
marginBottom: '10px'
|
||||
},
|
||||
time: {
|
||||
fontSize: '0.8em',
|
||||
color: '#718096',
|
||||
marginLeft: '10px'
|
||||
},
|
||||
participants: {
|
||||
display: 'flex',
|
||||
gap: '10px',
|
||||
marginLeft: 'auto'
|
||||
},
|
||||
participant: {
|
||||
background: '#edf2f7',
|
||||
padding: '6px 12px',
|
||||
borderRadius: '20px',
|
||||
fontSize: '0.9em'
|
||||
},
|
||||
backLink: {
|
||||
color: '#4299e1',
|
||||
textDecoration: 'none',
|
||||
fontSize: '1.1em'
|
||||
},
|
||||
hint: {
|
||||
color: '#718096',
|
||||
fontSize: '0.9em',
|
||||
textAlign: 'center',
|
||||
marginTop: '15px'
|
||||
}
|
||||
};
|
||||
|
||||
export default App;
|
||||
10
frontend/src/index.js
Normal file
10
frontend/src/index.js
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
Reference in New Issue
Block a user