237 lines
8.2 KiB
JavaScript
237 lines
8.2 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
||
import { Brain, Users, Calendar, TrendingUp, X, User, Lock, Library, Download, LogIn, Eye, EyeOff } from 'lucide-react';
|
||
import { Link } from 'react-router-dom';
|
||
import apiClient from '../utils/apiClient';
|
||
import { buildApiUrl, API_ENDPOINTS } from '../config/api';
|
||
import './HomePage.css';
|
||
|
||
const HomePage = ({ onLogin }) => {
|
||
const [showLoginModal, setShowLoginModal] = useState(false);
|
||
const [loginForm, setLoginForm] = useState({ username: '', password: '' });
|
||
const [loginError, setLoginError] = useState('');
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const [rememberMe, setRememberMe] = useState(false);
|
||
const [showPassword, setShowPassword] = useState(false);
|
||
|
||
// 组件挂载时，从localStorage读取保存的用户名
|
||
useEffect(() => {
|
||
const savedUsername = localStorage.getItem('rememberedUsername');
|
||
const isRemembered = localStorage.getItem('rememberMe') === 'true';
|
||
|
||
if (savedUsername && isRemembered) {
|
||
setLoginForm(prev => ({ ...prev, username: savedUsername }));
|
||
setRememberMe(true);
|
||
}
|
||
}, []);
|
||
|
||
const handleLogin = async (e) => {
|
||
e.preventDefault();
|
||
setIsLoading(true);
|
||
setLoginError('');
|
||
|
||
try {
|
||
const loginResponse = await apiClient.post(buildApiUrl(API_ENDPOINTS.AUTH.LOGIN), loginForm);
|
||
|
||
// 处理记住用户名
|
||
if (rememberMe) {
|
||
localStorage.setItem('rememberedUsername', loginForm.username);
|
||
localStorage.setItem('rememberMe', 'true');
|
||
} else {
|
||
localStorage.removeItem('rememberedUsername');
|
||
localStorage.removeItem('rememberMe');
|
||
}
|
||
|
||
onLogin(loginResponse.data);
|
||
setShowLoginModal(false);
|
||
} catch (error) {
|
||
setLoginError(error.response?.data?.message || '登录失败,请重试');
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleInputChange = (e) => {
|
||
setLoginForm({
|
||
...loginForm,
|
||
[e.target.name]: e.target.value
|
||
});
|
||
};
|
||
|
||
const closeModal = () => {
|
||
setShowLoginModal(false);
|
||
setLoginForm({ username: '', password: '' });
|
||
setLoginError('');
|
||
};
|
||
|
||
return (
|
||
<div className="homepage">
|
||
{/* Header */}
|
||
<header className="homepage-header">
|
||
<div className="header-content">
|
||
<div className="logo">
|
||
<Brain className="logo-icon" />
|
||
<span className="logo-text">iMeeting</span>
|
||
</div>
|
||
<div className="header-actions">
|
||
<Link to="/downloads" className="download-link">
|
||
<Download size={18} />
|
||
<span>下载客户端</span>
|
||
</Link>
|
||
<button
|
||
className="login-btn"
|
||
onClick={() => setShowLoginModal(true)}
|
||
>
|
||
<LogIn size={18} />
|
||
<span>登录</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
{/* Hero Section */}
|
||
<section className="hero">
|
||
<div className="hero-content">
|
||
<h1 className="hero-title">iMeeting - 灵 枢 (Líng Shū)</h1>
|
||
<p className="hero-subtitle">
|
||
让每一次谈话都产生价值
|
||
</p>
|
||
<button
|
||
className="cta-button"
|
||
onClick={() => setShowLoginModal(true)}
|
||
>
|
||
开始使用
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Features Section */}
|
||
<section className="features">
|
||
<div className="features-container">
|
||
<h2 className="features-title">核心功能</h2>
|
||
<div className="features-grid">
|
||
<div className="feature-card feature-card-1">
|
||
<Brain className="feature-icon feature-icon-1" />
|
||
<h3>AI智能转录</h3>
|
||
<p>自动将会议音频转为文字，并识别不同发言人。</p>
|
||
</div>
|
||
<div className="feature-card feature-card-2">
|
||
<TrendingUp className="feature-icon feature-icon-2" />
|
||
<h3>智能摘要</h3>
|
||
<p>AI自动生成会议摘要，提取关键信息和决策。</p>
|
||
</div>
|
||
<div className="feature-card feature-card-3">
|
||
<Library className="feature-icon feature-icon-3" />
|
||
<h3>交叉知识库</h3>
|
||
<p>所有会议的摘要和内容汇聚成一个可供检索的知识库。</p>
|
||
</div>
|
||
<div className="feature-card feature-card-4">
|
||
<Users className="feature-icon feature-icon-4" />
|
||
<h3>参会人管理</h3>
|
||
<p>轻松管理会议参与者，追踪会议参与情况。</p>
|
||
</div>
|
||
<div className="feature-card feature-card-5">
|
||
<Calendar className="feature-icon feature-icon-5" />
|
||
<h3>时间轴视图</h3>
|
||
<p>按时间顺序展示所有会议，快速回顾历史记录。</p>
|
||
</div>
|
||
<div className="feature-card feature-card-6">
|
||
<Download className="feature-icon feature-icon-6" />
|
||
<h3>数据导出</h3>
|
||
<p>导出会议摘要、脑图和转录内容，方便归档和分享。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Footer */}
|
||
<footer className="homepage-footer">
|
||
<p>© 2025 紫光汇智信息技术有限公司. All rights reserved.</p>
|
||
<p>备案号：渝ICP备2023007695号-11</p>
|
||
</footer>
|
||
|
||
{/* Login Modal */}
|
||
{showLoginModal && (
|
||
<div className="modal-overlay" onClick={closeModal}>
|
||
<div className="login-modal" onClick={e => e.stopPropagation()}>
|
||
<div className="modal-header">
|
||
<h2>登录到iMeeting</h2>
|
||
<button className="close-btn" onClick={closeModal}>
|
||
<X size={20} />
|
||
</button>
|
||
</div>
|
||
|
||
<form className="login-form" onSubmit={handleLogin}>
|
||
<div className="form-group">
|
||
<label htmlFor="username">
|
||
<User size={18} />
|
||
用户名
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="username"
|
||
name="username"
|
||
value={loginForm.username}
|
||
onChange={handleInputChange}
|
||
placeholder="请输入用户名"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div className="form-group password-group">
|
||
<label htmlFor="password">
|
||
<Lock size={18} />
|
||
密码
|
||
</label>
|
||
<div className="password-input-wrapper">
|
||
<input
|
||
type={showPassword ? "text" : "password"}
|
||
id="password"
|
||
name="password"
|
||
value={loginForm.password}
|
||
onChange={handleInputChange}
|
||
placeholder="请输入密码"
|
||
required
|
||
/>
|
||
<button
|
||
type="button"
|
||
className="password-toggle-btn"
|
||
onClick={() => setShowPassword(!showPassword)}
|
||
aria-label={showPassword ? "隐藏密码" : "显示密码"}
|
||
>
|
||
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
|
||
</button>
|
||
</div>
|
||
<label htmlFor="rememberMe" className="remember-me-label">
|
||
<input
|
||
type="checkbox"
|
||
id="rememberMe"
|
||
checked={rememberMe}
|
||
onChange={(e) => setRememberMe(e.target.checked)}
|
||
/>
|
||
<span>记住用户名</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div className="error-message-container">
|
||
{loginError && (
|
||
<div className="error-message">{loginError}</div>
|
||
)}
|
||
</div>
|
||
|
||
<button
|
||
type="submit"
|
||
className="submit-btn"
|
||
disabled={isLoading}
|
||
>
|
||
{isLoading ? '登录中...' : '登录'}
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default HomePage;
|