提交样式修改，登录和云盘页面
This commit is contained in:
364
docs/front-proto/01login/index.html
Normal file
364
docs/front-proto/01login/index.html
Normal file
@@ -0,0 +1,364 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CloudStorage - 登录</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientBG 15s ease infinite;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@keyframes gradientBG {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
.login-container {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
padding: 40px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: conic-gradient(
|
||||
transparent,
|
||||
rgba(168, 85, 247, 0.4),
|
||||
transparent 30%
|
||||
);
|
||||
animation: rotate 6s linear infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.logo i {
|
||||
font-size: 48px;
|
||||
color: #667eea;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.logo h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-top: 15px;
|
||||
color: #333;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.logo p {
|
||||
color: #666;
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 25px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-group i {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #999;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.input-group input {
|
||||
width: 100%;
|
||||
padding: 15px 15px 15px 45px;
|
||||
border: 2px solid #e1e5e9;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
transition: all 0.3s ease;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.input-group input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
background: white;
|
||||
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.remember-me {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.remember-me input {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.forgot-password:hover {
|
||||
color: #764ba2;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.login-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.login-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.divider {
|
||||
text-align: center;
|
||||
margin: 30px 0;
|
||||
position: relative;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.divider::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: #e1e5e9;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.divider span {
|
||||
background: white;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.signup-link {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.signup-link a {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.signup-link a:hover {
|
||||
color: #764ba2;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.login-container {
|
||||
padding: 30px 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.logo h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-container">
|
||||
<div class="logo">
|
||||
<i class="fas fa-cloud"></i>
|
||||
<h1>CloudStorage</h1>
|
||||
<p>安全可靠的云端存储服务</p>
|
||||
</div>
|
||||
|
||||
<form id="loginForm">
|
||||
<div class="input-group">
|
||||
<i class="fas fa-user"></i>
|
||||
<input type="text" placeholder="用户名或邮箱" required>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<i class="fas fa-lock"></i>
|
||||
<input type="password" placeholder="密码" required>
|
||||
</div>
|
||||
|
||||
<div class="options">
|
||||
<label class="remember-me">
|
||||
<input type="checkbox"> 记住我
|
||||
</label>
|
||||
<a href="#" class="forgot-password">忘记密码？</a>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="login-btn">
|
||||
登录账户
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="divider">
|
||||
<span>新用户？</span>
|
||||
</div>
|
||||
|
||||
<div class="signup-link">
|
||||
还没有账户？<a href="#" onclick="showRegisterPage()">立即注册</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showRegisterPage() {
|
||||
document.body.innerHTML = `
|
||||
<div class="login-container">
|
||||
<div class="logo">
|
||||
<i class="fas fa-user-plus"></i>
|
||||
<h1>用户注册</h1>
|
||||
<p>创建您的云端存储账户</p>
|
||||
</div>
|
||||
|
||||
<form id="registerForm">
|
||||
<div class="input-group">
|
||||
<i class="fas fa-user"></i>
|
||||
<input type="text" placeholder="账户名" required>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<i class="fas fa-lock"></i>
|
||||
<input type="password" placeholder="密码" required id="password">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<i class="fas fa-lock"></i>
|
||||
<input type="password" placeholder="确认密码" required id="confirmPassword">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<i class="fas fa-envelope"></i>
|
||||
<input type="email" placeholder="邮箱地址" required>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="login-btn">
|
||||
注册账户
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="signup-link">
|
||||
已有账户？<a href="#" onclick="showLoginPage()">立即登录</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.getElementById('registerForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const password = document.getElementById('password').value;
|
||||
const confirmPassword = document.getElementById('confirmPassword').value;
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
alert('密码和确认密码不匹配！');
|
||||
return;
|
||||
}
|
||||
|
||||
const btn = this.querySelector('.login-btn');
|
||||
const originalText = btn.textContent;
|
||||
|
||||
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 注册中...';
|
||||
btn.disabled = true;
|
||||
|
||||
// 模拟注册过程
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = originalText;
|
||||
btn.disabled = false;
|
||||
alert('注册成功！');
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
function showLoginPage() {
|
||||
location.reload();
|
||||
}
|
||||
|
||||
document.getElementById('loginForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const btn = this.querySelector('.login-btn');
|
||||
const originalText = btn.textContent;
|
||||
|
||||
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 登录中...';
|
||||
btn.disabled = true;
|
||||
|
||||
// 模拟登录过程
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = originalText;
|
||||
btn.disabled = false;
|
||||
alert('登录成功！');
|
||||
}, 2000);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
471
docs/front-proto/02cloud/index.html
Normal file
471
docs/front-proto/02cloud/index.html
Normal file
@@ -0,0 +1,471 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"="width=device-width, initial-scale=1.0">
|
||||
<title>Cloudaloud网盘</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#667eea',
|
||||
secondary: '#764ba2',
|
||||
background: '#f8fafc'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientBG 15s ease infinite;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@keyframes gradientBG {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
.cloud-container {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cloud-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.cloud-header i {
|
||||
font-size: 48px;
|
||||
color: #667eea;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.cloud-header h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: #f1f5f9;
|
||||
padding: 12px 20px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 25px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 12px 24px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.upload-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.files-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.files-table th {
|
||||
background: #f8fafc;
|
||||
padding: 16px 12px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.files-table td {
|
||||
padding: 16px 12px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.files-table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.files-table tr:hover td {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: #eff6ff;
|
||||
border-radius: 8px;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.download {
|
||||
background: #ecfdf5;
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.download:hover {
|
||||
background: #d1fae5;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.delete {
|
||||
background: #fef2f2;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.delete:hover {
|
||||
background: #fee2e2;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
background: #fef2f2;
|
||||
color: #ef4444;
|
||||
border: 1px solid #fecaca;
|
||||
}
|
||||
|
||||
.logout-btn:hover {
|
||||
background: #fee2e2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="min-h-screen flex items-center justify-center p-4">
|
||||
<div class="cloud-container w-full max-w-6xl">
|
||||
<!-- Header -->
|
||||
<header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6">
|
||||
<div class="flex items-center space-x-4">
|
||||
<i class="fas fa-cloud text-primary text-2xl"></i>
|
||||
<span class="font-semibold text-gray-900 text-xl">Cloudaloud网盘</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<i class="fas fa-user text-gray-600"></i>
|
||||
<span class="text-sm text-gray-700">你好，pengshuaiReal</span>
|
||||
<button class="logout-btn rounded-md px-3 py-1.5 text-sm font-medium transition-colors">
|
||||
登出
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="p-6">
|
||||
<div class="cloud-header">
|
||||
<i class="fas fa-cloud"></i>
|
||||
<h1>云盘文件管理</h1>
|
||||
<p class="text-gray-600">管理您的云盘文件</p>
|
||||
</div>
|
||||
|
||||
<div class="user-info">
|
||||
<i class="fas fa-user-circle text-gray-600"></i>
|
||||
<span>欢迎，pengshuaiReal</span>
|
||||
<span>|</span>
|
||||
<span>存储空间：668.31 KB / 100 MB</span>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<button class="upload-btn">
|
||||
<i class="fas fa-upload"></i>
|
||||
<span>上传文件</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="files-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>文件名</th>
|
||||
<th>原始文件名</th>
|
||||
<th>大小</th>
|
||||
<th>类型</th>
|
||||
<th>修改时间</th>
|
||||
<th style="text-align: right;">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="file-name">
|
||||
<div class="file-icon">
|
||||
<i class="fas fa-file-code"></i>
|
||||
</div>
|
||||
<span>41e2439d-002d-47ed-89c3-360a04c3820f.py</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="file-original-name">debug_download_detailed.py</span></td>
|
||||
<td><span class="file-size">4.8 KB</span></td>
|
||||
<td><span class="file-type">X-PYTHON</span></td>
|
||||
<td><span class="file-date">2025/10/15 09:57:37</span></td>
|
||||
<td>
|
||||
<div class="action-buttons">
|
||||
<button class="action-btn download" title="下载文件">
|
||||
<i class="fas fa-download"></i>
|
||||
</button>
|
||||
<button class="action-btn delete" title="删除文件">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="file-name">
|
||||
<div class="file-icon">
|
||||
<i class="fas fa-file-alt"></i>
|
||||
</div>
|
||||
<span>0c0834bb-6313-4ae0-91c4-c3b7b123001f.txt</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="file-original-name">success_test.txt</span></td>
|
||||
<td><span class="file-size">160 Bytes</span></td>
|
||||
<td><span class="file-type">PLAIN</span></td>
|
||||
<td><span class="file-date">2025/10/15 09:19:19</span></td>
|
||||
<td>
|
||||
<div class="action-buttons">
|
||||
<button class="action-btn download" title="下载文件">
|
||||
<i class="fas fa-download"></i>
|
||||
</button>
|
||||
<button class="action-btn delete" title="删除文件">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="file-name">
|
||||
<div class="file-icon">
|
||||
<i class="fas fa-file-alt"></i>
|
||||
</div>
|
||||
<span>ed900fb4-2cbb-4e5c-abd8-4a4cfa32eb83.txt</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="file-original-name">test_upload.txt</span></td>
|
||||
<td><span class="file-size">210 Bytes</span></td>
|
||||
<td><span class="file-type">PLAIN</span></td>
|
||||
<td><span class="file-date">2025/10/15 09:19:24</span></td>
|
||||
<td>
|
||||
<div class="action-buttons">
|
||||
<button class="action-btn download" title="下载文件">
|
||||
<i class="fas fa-download"></i>
|
||||
</button>
|
||||
<button class="action-btn delete" title="删除文件">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="file-name">
|
||||
<div class="file-icon">
|
||||
<i class="fas fa-file-code"></i>
|
||||
</div>
|
||||
<span>08be0e5f-969c-4ed5-86c6-2d8470566a10.js</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="file-original-name">index.js</span></td>
|
||||
<td><span class="file-size">1.9 KB</span></td>
|
||||
<td><span class="file-type">JAVASCRIPT</span></td>
|
||||
<td><span class="file-date">2025/10/15 08:56:34</span></td>
|
||||
<td>
|
||||
<div class="action-buttons">
|
||||
<button class="action-btn download" title="下载文件">
|
||||
<i class="fas fa-download"></i>
|
||||
</button>
|
||||
<button class="action-btn delete" title="删除文件">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="file-name">
|
||||
<div class="file-icon">
|
||||
<i class="fas fa-file-code"></i>
|
||||
</div>
|
||||
<span>68ba13ca-7bee-4d16-bb1f-22e451ba5b83.json</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="file-original-name">package.json</span></td>
|
||||
<td><span class="file-size">1.15 KB</span></td>
|
||||
<td><span class="file-type">JSON</span></td>
|
||||
<td><span class="file-date">2025/10/15 08:56:33</span></td>
|
||||
<td>
|
||||
<div class="action-buttons">
|
||||
<button class="action-btn download" title="下载文件">
|
||||
<i class="fas fa-download"></i>
|
||||
</button>
|
||||
<button class="action-btn delete" title="删除文件">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="file-name">
|
||||
<div class="file-icon">
|
||||
<i class="fas fa-file-word"></i>
|
||||
</div>
|
||||
<span>4345f1f3-c7e8-449e-b69b-c65c7eb4279b.rtf</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="file-original-name">LICENSE-chs.rtf</span></td>
|
||||
<td><span class="file-size">183.66 KB</span></td>
|
||||
<td><span class="file-type">RTF</span></td>
|
||||
<td><span class="file-date">2025/10/15 08:56:33</span></td>
|
||||
<td>
|
||||
<div class="action-buttons">
|
||||
<button class="action-btn download" title="下载文件">
|
||||
<i class="fas fa-download"></i>
|
||||
</button>
|
||||
<button class="action-btn delete" title="删除文件">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="file-name">
|
||||
<div class="file-icon">
|
||||
<i class="fas fa-file-word"></i>
|
||||
</div>
|
||||
<span>f63509cc-ee0f-4350-9919-351e73fe166f.rtf</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="file-original-name">LICENSE-bul.rtf</span></td>
|
||||
<td><span class="file-size">476.44 KB</span></td>
|
||||
<td><span class="file-type">RTF</span></td>
|
||||
<td><span class="file-date">2025/10/15 08:56:33</span></td>
|
||||
<td>
|
||||
<div class="action-buttons">
|
||||
<button class="action-btn download" title="下载文件">
|
||||
<i class="fas fa-download"></i>
|
||||
</button>
|
||||
<button class="action-btn delete" title="删除文件">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 添加交互功能
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 下载按钮功能
|
||||
const downloadButtons = document.querySelectorAll('.download');
|
||||
downloadButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const row = this.closest('tr');
|
||||
const fileName = row.querySelector('.file-name span').textContent;
|
||||
alert(`开始下载文件: ${fileName}`);
|
||||
});
|
||||
});
|
||||
|
||||
// 删除按钮功能
|
||||
const deleteButtons = document.querySelectorAll('.delete');
|
||||
deleteButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const row = this.closest('tr');
|
||||
const fileName = row.querySelector('.file-name span').textContent;
|
||||
if (confirm(`确定要删除文件 "${fileName}" 吗？`)) {
|
||||
row.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
row.remove();
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 上传按钮功能
|
||||
const uploadButton = document.querySelector('.upload-btn');
|
||||
uploadButton.addEventListener('click', function() {
|
||||
alert('点击了上传文件按钮');
|
||||
});
|
||||
|
||||
// 登出按钮功能
|
||||
const logoutButton = document.querySelector('.logout-btn');
|
||||
logoutButton.addEventListener('click', function() {
|
||||
if (confirm('确定要退出登录吗？')) {
|
||||
alert('已退出登录');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -5,6 +5,7 @@
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>云盘应用</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
10
frontend/package-lock.json
generated
10
frontend/package-lock.json
generated
@@ -8,6 +8,7 @@
|
||||
"name": "cloud-drive-frontend",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^7.1.0",
|
||||
"@hookform/resolvers": "^3.3.2",
|
||||
"@radix-ui/react-avatar": "^1.0.4",
|
||||
"@radix-ui/react-dialog": "^1.0.5",
|
||||
@@ -900,6 +901,15 @@
|
||||
"integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-free": {
|
||||
"version": "7.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-7.1.0.tgz",
|
||||
"integrity": "sha512-+WxNld5ZCJHvPQCr/GnzCTVREyStrAJjisUPtUxG5ngDA8TMlPnKp6dddlTpai4+1GNmltAeuk1hJEkBohwZYA==",
|
||||
"license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@hookform/resolvers": {
|
||||
"version": "3.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.10.0.tgz",
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
"test:e2e": "playwright test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^7.1.0",
|
||||
"@hookform/resolvers": "^3.3.2",
|
||||
"@radix-ui/react-avatar": "^1.0.4",
|
||||
"@radix-ui/react-dialog": "^1.0.5",
|
||||
|
||||
@@ -4,8 +4,7 @@ import { Toaster } from 'sonner'
|
||||
|
||||
// Pages
|
||||
import HomePage from './pages/HomePage'
|
||||
import LoginPage from './pages/LoginPage'
|
||||
import RegisterPage from './pages/RegisterPage'
|
||||
import BeautifyLoginPage from './pages/BeautifyLoginPage'
|
||||
import CloudPage from './pages/CloudPage'
|
||||
|
||||
// Components
|
||||
@@ -28,10 +27,10 @@ function App() {
|
||||
<Routes>
|
||||
<Route path="/" element={<Layout />}>
|
||||
<Route index element={<HomePage />} />
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route path="/register" element={<RegisterPage />} />
|
||||
<Route path="/cloud" element={<CloudPage />} />
|
||||
</Route>
|
||||
<Route path="/login" element={<BeautifyLoginPage />} />
|
||||
<Route path="/register" element={<BeautifyLoginPage />} />
|
||||
</Routes>
|
||||
<Toaster />
|
||||
</div>
|
||||
|
||||
191
frontend/src/components/Header.css
Normal file
191
frontend/src/components/Header.css
Normal file
@@ -0,0 +1,191 @@
|
||||
.header-container {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: conic-gradient(
|
||||
transparent,
|
||||
rgba(168, 85, 247, 0.1),
|
||||
transparent 30%
|
||||
);
|
||||
animation: rotate 6s linear infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px 30px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.cloud-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
padding: 8px 16px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.user-info:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.user-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.user-greeting {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.logout-btn:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.logout-btn:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
color: #666;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.back-btn:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.header-content {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.cloud-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
padding: 6px 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.user-greeting {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,6 @@
|
||||
import { useNavigate, useLocation } from 'react-router-dom'
|
||||
import { User, LogOut, ArrowLeft } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { getUserInfoFromCookie, clearAuthCookies } from '@/utils/cookie'
|
||||
import { Cloud} from 'lucide-react'
|
||||
|
||||
export default function Header() {
|
||||
const navigate = useNavigate()
|
||||
const location = useLocation()
|
||||
@@ -18,25 +16,35 @@ export default function Header() {
|
||||
navigate('/login')
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
navigate(-1)
|
||||
}
|
||||
|
||||
return (
|
||||
<header className="h-14 bg-white border-b border-gray-200 flex items-center justify-between px-4">
|
||||
<header className="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Cloud className="h-12 w-12 text-primary mx-auto mb-4" />
|
||||
<span className="font-semibold text-gray-900">Cloudaloud网盘</span>
|
||||
<i className="fas fa-cloud text-primary text-2xl" style={{ color: '#667eea' }}></i>
|
||||
<span className="font-semibold text-gray-900 text-xl">Cloudaloud网盘</span>
|
||||
</div>
|
||||
|
||||
{userInfo && isCloudPage && (
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<User className="h-4 w-4 text-gray-600" />
|
||||
<i className="fas fa-user text-gray-600"></i>
|
||||
<span className="text-sm text-gray-700">你好，{userInfo.username}</span>
|
||||
<Button variant="ghost" size="sm" onClick={handleLogout}>
|
||||
<span className="h-4 w-4">登出</span>
|
||||
</Button>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="logout-btn rounded-md px-3 py-1.5 text-sm font-medium transition-colors"
|
||||
style={{
|
||||
background: '#fef2f2',
|
||||
color: '#ef4444',
|
||||
border: '1px solid #fecaca'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.target.style.background = '#fee2e2'
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.target.style.background = '#fef2f2'
|
||||
}}
|
||||
>
|
||||
登出
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
233
frontend/src/pages/BeautifyLoginPage.css
Normal file
233
frontend/src/pages/BeautifyLoginPage.css
Normal file
@@ -0,0 +1,233 @@
|
||||
.beautify-login-container {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientBG 15s ease infinite;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@keyframes gradientBG {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
.login-container {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
padding: 40px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: conic-gradient(
|
||||
transparent,
|
||||
rgba(168, 85, 247, 0.4),
|
||||
transparent 30%
|
||||
);
|
||||
animation: rotate 6s linear infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.logo i {
|
||||
font-size: 48px;
|
||||
color: #667eea;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.logo h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-top: 15px;
|
||||
color: #333;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.logo p {
|
||||
color: #666;
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 25px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-group i {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #999;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.input-group input {
|
||||
width: 100%;
|
||||
padding: 15px 15px 15px 45px;
|
||||
border: 2px solid #e1e5e9;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
transition: all 0.3s ease;
|
||||
background: #f8f9fa;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.input-group input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
background: white;
|
||||
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.remember-me {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.remember-me input {
|
||||
margin-right: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.forgot-password:hover {
|
||||
color: #764ba2;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.login-btn:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.login-btn:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.login-btn:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.divider {
|
||||
text-align: center;
|
||||
margin: 30px 0;
|
||||
position: relative;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.divider::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: #e1e5e9;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.divider span {
|
||||
background: white;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
|
||||
.signup-link {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.signup-link a {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.signup-link a:hover {
|
||||
color: #764ba2;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.login-container {
|
||||
padding: 30px 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.logo h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
348
frontend/src/pages/BeautifyLoginPage.tsx
Normal file
348
frontend/src/pages/BeautifyLoginPage.tsx
Normal file
@@ -0,0 +1,348 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { useNavigate, useLocation } from 'react-router-dom'
|
||||
import { toast } from 'sonner'
|
||||
import { authAPI } from '@/services/api'
|
||||
import { setUserInfoInCookie, setTokenInCookie } from '@/utils/cookie'
|
||||
import './BeautifyLoginPage.css'
|
||||
|
||||
const BeautifyLoginPage: React.FC = () => {
|
||||
const location = useLocation()
|
||||
const navigate = useNavigate()
|
||||
const [isLoginMode, setIsLoginMode] = useState(true)
|
||||
const [formData, setFormData] = useState({
|
||||
// 登录字段
|
||||
username: '',
|
||||
password: '',
|
||||
rememberMe: false,
|
||||
// 注册字段
|
||||
registerUsername: '',
|
||||
registerPassword: '',
|
||||
confirmPassword: '',
|
||||
email: ''
|
||||
})
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
|
||||
// 根据路由决定默认模式
|
||||
useEffect(() => {
|
||||
if (location.pathname === '/register') {
|
||||
setIsLoginMode(false)
|
||||
} else {
|
||||
setIsLoginMode(true)
|
||||
}
|
||||
}, [location.pathname])
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value, type, checked } = e.target
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: type === 'checkbox' ? checked : value
|
||||
}))
|
||||
}
|
||||
|
||||
const handleLoginSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
|
||||
if (!formData.username || !formData.password) {
|
||||
toast.error('请填写用户名和密码')
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
|
||||
try {
|
||||
const response = await authAPI.login({
|
||||
username: formData.username,
|
||||
password: formData.password
|
||||
})
|
||||
|
||||
if (response.success) {
|
||||
// 保存用户信息到cookie
|
||||
if (response.data?.user) {
|
||||
setUserInfoInCookie(response.data.user)
|
||||
}
|
||||
|
||||
// 保存JWT token到cookie
|
||||
if (response.data?.tokens?.access_token) {
|
||||
setTokenInCookie(response.data.tokens.access_token)
|
||||
// 同时也保存到localStorage作为备份
|
||||
localStorage.setItem('access_token', response.data.tokens.access_token)
|
||||
}
|
||||
if (response.data?.tokens?.refresh_token) {
|
||||
localStorage.setItem('refresh_token', response.data.tokens.refresh_token)
|
||||
}
|
||||
|
||||
if (formData.rememberMe) {
|
||||
localStorage.setItem('remember_user', formData.username)
|
||||
} else {
|
||||
localStorage.removeItem('remember_user')
|
||||
}
|
||||
|
||||
toast.success('登录成功！正在跳转...')
|
||||
setTimeout(() => {
|
||||
navigate('/cloud')
|
||||
}, 1000)
|
||||
} else {
|
||||
toast.error(response.detail?.message || '登录失败')
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Login error:', error)
|
||||
|
||||
// 尝试从错误响应中提取具体错误信息
|
||||
let errorMessage = '登录失败，请稍后重试'
|
||||
|
||||
if (error.response?.data) {
|
||||
const errorData = error.response.data
|
||||
if (errorData.detail?.message) {
|
||||
errorMessage = errorData.detail.message
|
||||
} else if (errorData.detail?.code) {
|
||||
// 根据错误码显示更友好的消息
|
||||
switch (errorData.detail.code) {
|
||||
case 'INVALID_CREDENTIALS':
|
||||
errorMessage = '用户名或密码错误'
|
||||
break
|
||||
case 'USER_NOT_FOUND':
|
||||
errorMessage = '用户不存在'
|
||||
break
|
||||
default:
|
||||
errorMessage = errorData.detail.message || '登录失败'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
toast.error(errorMessage)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRegisterSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
|
||||
// 基本验证 - 只有两个规则
|
||||
if (formData.registerPassword !== formData.confirmPassword) {
|
||||
toast.error('两次输入的密码不一致')
|
||||
return
|
||||
}
|
||||
|
||||
if (formData.registerPassword.length <= 5) {
|
||||
toast.error('密码长度必须大于5个字符')
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
|
||||
try {
|
||||
const response = await authAPI.register({
|
||||
username: formData.registerUsername,
|
||||
email: formData.email,
|
||||
password: formData.registerPassword,
|
||||
confirm_password: formData.confirmPassword
|
||||
})
|
||||
|
||||
if (response.success) {
|
||||
// 保存tokens到localStorage
|
||||
if (response.data?.tokens?.access_token) {
|
||||
localStorage.setItem('access_token', response.data.tokens.access_token)
|
||||
}
|
||||
if (response.data?.tokens?.refresh_token) {
|
||||
localStorage.setItem('refresh_token', response.data.tokens.refresh_token)
|
||||
}
|
||||
|
||||
toast.success('注册成功！正在跳转...')
|
||||
setTimeout(() => {
|
||||
navigate('/cloud')
|
||||
}, 1500)
|
||||
} else {
|
||||
// 处理API返回的错误
|
||||
const errorMessage = response.detail?.message || '注册失败'
|
||||
toast.error(errorMessage)
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Registration error:', error)
|
||||
|
||||
// 尝试从错误响应中提取具体错误信息
|
||||
let errorMessage = '注册失败，请稍后重试'
|
||||
|
||||
if (error.response?.data) {
|
||||
const errorData = error.response.data
|
||||
if (errorData.detail?.message) {
|
||||
errorMessage = errorData.detail.message
|
||||
} else if (errorData.detail?.code) {
|
||||
// 根据错误码显示更友好的消息
|
||||
switch (errorData.detail.code) {
|
||||
case 'USERNAME_EXISTS':
|
||||
errorMessage = '用户名已存在'
|
||||
break
|
||||
case 'CREATION_FAILED':
|
||||
errorMessage = '用户创建失败，请检查输入信息'
|
||||
break
|
||||
default:
|
||||
errorMessage = errorData.detail.message || '注册失败'
|
||||
}
|
||||
} else if (Array.isArray(errorData.detail)) {
|
||||
// 处理字段验证错误
|
||||
errorMessage = errorData.detail.map((err: any) => err.msg).join(', ')
|
||||
}
|
||||
}
|
||||
|
||||
toast.error(errorMessage)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const toggleMode = () => {
|
||||
setIsLoginMode(!isLoginMode)
|
||||
// 清空错误状态
|
||||
setIsLoading(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="beautify-login-container">
|
||||
<div className="login-container">
|
||||
<div className="logo">
|
||||
<i className={`fas ${isLoginMode ? 'fa-cloud' : 'fa-user-plus'}`}></i>
|
||||
<h1>{isLoginMode ? 'CloudStorage' : '用户注册'}</h1>
|
||||
<p>{isLoginMode ? '安全可靠的云端存储服务' : '创建您的云端存储账户'}</p>
|
||||
</div>
|
||||
|
||||
{isLoginMode ? (
|
||||
<form onSubmit={handleLoginSubmit}>
|
||||
<div className="input-group">
|
||||
<i className="fas fa-user"></i>
|
||||
<input
|
||||
type="text"
|
||||
name="username"
|
||||
placeholder="用户名或邮箱"
|
||||
value={formData.username}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="input-group">
|
||||
<i className="fas fa-lock"></i>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
placeholder="密码"
|
||||
value={formData.password}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="options">
|
||||
<label className="remember-me">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="rememberMe"
|
||||
checked={formData.rememberMe}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
记住我
|
||||
</label>
|
||||
<a href="#" className="forgot-password">忘记密码？</a>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="login-btn" disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<i className="fas fa-spinner fa-spin"></i>
|
||||
{' '}登录中...
|
||||
</>
|
||||
) : (
|
||||
'登录账户'
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={handleRegisterSubmit}>
|
||||
<div className="input-group">
|
||||
<i className="fas fa-user"></i>
|
||||
<input
|
||||
type="text"
|
||||
name="registerUsername"
|
||||
placeholder="账户名"
|
||||
value={formData.registerUsername}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="input-group">
|
||||
<i className="fas fa-lock"></i>
|
||||
<input
|
||||
type="password"
|
||||
name="registerPassword"
|
||||
placeholder="密码"
|
||||
value={formData.registerPassword}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="input-group">
|
||||
<i className="fas fa-lock"></i>
|
||||
<input
|
||||
type="password"
|
||||
name="confirmPassword"
|
||||
placeholder="确认密码"
|
||||
value={formData.confirmPassword}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="input-group">
|
||||
<i className="fas fa-envelope"></i>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="邮箱地址"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="login-btn" disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<i className="fas fa-spinner fa-spin"></i>
|
||||
{' '}注册中...
|
||||
</>
|
||||
) : (
|
||||
'注册账户'
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
<div className="divider">
|
||||
<span>{isLoginMode ? '新用户？' : '已有账户？'}</span>
|
||||
</div>
|
||||
|
||||
<div className="signup-link">
|
||||
{isLoginMode ? (
|
||||
<>
|
||||
还没有账户？
|
||||
<a href="#" onClick={(e) => { e.preventDefault(); toggleMode(); }}>
|
||||
立即注册
|
||||
</a>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
已有账户？
|
||||
<a href="#" onClick={(e) => { e.preventDefault(); toggleMode(); }}>
|
||||
立即登录
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BeautifyLoginPage
|
||||
338
frontend/src/pages/CloudPage.css
Normal file
338
frontend/src/pages/CloudPage.css
Normal file
@@ -0,0 +1,338 @@
|
||||
.cloud-page-container {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientBG 15s ease infinite;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@keyframes gradientBG {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
.cloud-main-container {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 新的云盘内容样式 */
|
||||
.cloud-content {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.cloud-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.cloud-header i {
|
||||
font-size: 48px;
|
||||
color: #667eea;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.cloud-header h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.cloud-header p {
|
||||
color: #666;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: #f1f5f9;
|
||||
padding: 12px 20px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 25px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.upload-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 12px 24px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.upload-btn:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.upload-btn:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.files-table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.files-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.files-table th {
|
||||
background: #f8fafc;
|
||||
padding: 16px 12px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.files-table td {
|
||||
padding: 16px 12px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.files-table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.files-table tr:hover td {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: #eff6ff;
|
||||
border-radius: 8px;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.file-icon.image {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.file-icon.video {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.file-icon.audio {
|
||||
background: rgba(168, 85, 247, 0.1);
|
||||
color: #a855f7;
|
||||
}
|
||||
|
||||
.file-icon.pdf {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.file-icon.archive {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.file-icon.default {
|
||||
background: rgba(107, 114, 128, 0.1);
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.file-original-name {
|
||||
color: #667eea;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.file-type {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.file-date {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.action-btn.download {
|
||||
background: #ecfdf5;
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.action-btn.download:hover {
|
||||
background: #d1fae5;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.action-btn.delete {
|
||||
background: #fef2f2;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.action-btn.delete:hover {
|
||||
background: #fee2e2;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.action-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.loading-state, .error-state, .empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.loading-state i, .error-state i, .empty-state i {
|
||||
font-size: 64px;
|
||||
margin-bottom: 20px;
|
||||
color: #667eea;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.loading-state h3, .error-state h3, .empty-state h3 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.retry-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.cloud-main-container {
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.cloud-header h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.files-table {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.files-table th,
|
||||
.files-table td {
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading spinner */
|
||||
.loading-spinner {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
border-top-color: white;
|
||||
animation: spin 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
@@ -2,17 +2,9 @@ import { useState, useEffect, useRef } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { authAPI, filesAPI } from '@/services/api'
|
||||
import { toast } from 'sonner'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table"
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Cloud, Upload, File, Folder, Download, Trash2, User } from 'lucide-react'
|
||||
import { getUserIdFromCookie, getUserInfoFromCookie } from '@/utils/cookie'
|
||||
import { Upload, File, Download, Trash2, LogOut, Cloud, User } from 'lucide-react'
|
||||
import { getUserIdFromCookie, getUserInfoFromCookie, clearAuthCookies } from '@/utils/cookie'
|
||||
import './CloudPage.css'
|
||||
|
||||
// Toast 显示时长常量（毫秒）
|
||||
const TOAST_DURATION = 3000 // 3秒，可根据需要修改
|
||||
@@ -232,6 +224,28 @@ export default function CloudPage() {
|
||||
}
|
||||
}
|
||||
|
||||
// 用户登出处理
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
// 调用登出API
|
||||
await authAPI.logout()
|
||||
toast.success('登出成功！')
|
||||
} catch (error: any) {
|
||||
console.error('Logout error:', error)
|
||||
// 即使API调用失败，也要清除本地数据
|
||||
toast.error('登出成功！')
|
||||
} finally {
|
||||
// 清除本地存储的用户信息
|
||||
clearAuthCookies()
|
||||
localStorage.removeItem('access_token')
|
||||
localStorage.removeItem('refresh_token')
|
||||
localStorage.removeItem('user')
|
||||
|
||||
// 跳转到登录页面
|
||||
navigate('/login')
|
||||
}
|
||||
}
|
||||
|
||||
// 组件加载时检查用户状态并获取文件列表
|
||||
useEffect(() => {
|
||||
// 检查用户是否已登录
|
||||
@@ -256,144 +270,163 @@ export default function CloudPage() {
|
||||
return new Date(dateString).toLocaleString('zh-CN')
|
||||
}
|
||||
|
||||
// 获取文件图标
|
||||
const getFileIcon = (mimeType: string) => {
|
||||
// 获取文件图标样式类
|
||||
const getFileIconClass = (mimeType: string) => {
|
||||
if (mimeType.startsWith('image/')) {
|
||||
return <File className="h-4 w-4 text-green-600" />
|
||||
return 'image'
|
||||
} else if (mimeType.startsWith('video/')) {
|
||||
return <File className="h-4 w-4 text-blue-600" />
|
||||
return 'video'
|
||||
} else if (mimeType.startsWith('audio/')) {
|
||||
return <File className="h-4 w-4 text-purple-600" />
|
||||
return 'audio'
|
||||
} else if (mimeType.includes('pdf')) {
|
||||
return <File className="h-4 w-4 text-red-600" />
|
||||
return 'pdf'
|
||||
} else if (mimeType.includes('zip') || mimeType.includes('rar')) {
|
||||
return <File className="h-4 w-4 text-yellow-600" />
|
||||
return 'archive'
|
||||
} else {
|
||||
return <File className="h-4 w-4 text-gray-600" />
|
||||
return 'default'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="mb-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">
|
||||
云盘文件管理
|
||||
</h1>
|
||||
<p className="text-gray-600">管理您的云盘文件</p>
|
||||
<div className="cloud-page-container">
|
||||
<div className="cloud-main-container">
|
||||
<div className="cloud-content">
|
||||
{/* 页面标题 */}
|
||||
<div className="cloud-header">
|
||||
<Cloud className="h-12 w-12 text-primary mx-auto mb-4" style={{ color: '#667eea' }} />
|
||||
<h1>云盘文件管理</h1>
|
||||
<p className="text-gray-600">管理您的云盘文件</p>
|
||||
</div>
|
||||
|
||||
{/* 用户信息 */}
|
||||
{userInfo && (
|
||||
<div className="user-info">
|
||||
<User className="h-4 w-4 text-gray-600" />
|
||||
<span>欢迎，{userInfo.username}</span>
|
||||
<span>|</span>
|
||||
<span>存储空间：{formatFileSize(userInfo.storage_used || 0)} / {formatFileSize(userInfo.storage_quota || 104857600)}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 上传按钮 */}
|
||||
<div className="upload-section">
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
onChange={handleFileUpload}
|
||||
className="hidden"
|
||||
disabled={uploading}
|
||||
/>
|
||||
<button
|
||||
onClick={handleUploadClick}
|
||||
disabled={uploading}
|
||||
className="upload-btn"
|
||||
>
|
||||
{uploading ? (
|
||||
<>
|
||||
<div className="loading-spinner"></div>
|
||||
<span>上传中...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Upload className="h-4 w-4" />
|
||||
<span>上传文件</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 文件列表 */}
|
||||
<div className="files-table-container">
|
||||
{loading ? (
|
||||
<div className="loading-state">
|
||||
<i className="fas fa-cloud"></i>
|
||||
<h3>加载中...</h3>
|
||||
<p>正在获取您的文件列表</p>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="error-state">
|
||||
<i className="fas fa-exclamation-triangle"></i>
|
||||
<h3>加载失败</h3>
|
||||
<p>{error}</p>
|
||||
<button onClick={fetchFiles} className="retry-btn">
|
||||
重新加载
|
||||
</button>
|
||||
</div>
|
||||
) : files.length === 0 ? (
|
||||
<div className="empty-state">
|
||||
<i className="fas fa-folder-open"></i>
|
||||
<h3>暂无文件</h3>
|
||||
<p>您的云盘还是空的，使用上方按钮上传第一个文件吧！</p>
|
||||
</div>
|
||||
) : (
|
||||
<table className="files-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>文件名</th>
|
||||
<th>原始文件名</th>
|
||||
<th>大小</th>
|
||||
<th>类型</th>
|
||||
<th>修改时间</th>
|
||||
<th style={{ textAlign: 'right' }}>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{files.map((file) => (
|
||||
<tr key={file.id}>
|
||||
<td>
|
||||
<div className="file-name">
|
||||
<div className={`file-icon ${getFileIconClass(file.mime_type)}`}>
|
||||
<File className="h-4 w-4" />
|
||||
</div>
|
||||
<span>{file.filename}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span className="file-original-name">{file.original_filename}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span className="file-size">{formatFileSize(file.file_size)}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span className="file-type">
|
||||
{file.mime_type.split('/')[1]?.toUpperCase() || 'FILE'}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span className="file-date">{formatDate(file.updated_at)}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div className="action-buttons">
|
||||
<button
|
||||
className="action-btn download"
|
||||
onClick={() => handleFileDownload(file)}
|
||||
title="下载文件"
|
||||
disabled={refreshingFileId === file.id}
|
||||
>
|
||||
{refreshingFileId === file.id ? (
|
||||
<div className="loading-spinner"></div>
|
||||
) : (
|
||||
<Download className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
className="action-btn delete"
|
||||
onClick={() => handleFileDelete(file)}
|
||||
title="删除文件"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 上传按钮 */}
|
||||
<div className="mb-6">
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
onChange={handleFileUpload}
|
||||
className="hidden"
|
||||
disabled={uploading}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
{/* 文件列表 */}
|
||||
<div className="bg-white rounded-lg border border-gray-200">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="text-center">
|
||||
<Cloud className="h-12 w-12 text-gray-400 mx-auto mb-4" />
|
||||
<p className="text-gray-600">加载中...</p>
|
||||
</div>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="text-center">
|
||||
<p className="text-red-600 mb-4">{error}</p>
|
||||
<Button onClick={fetchFiles} variant="outline">
|
||||
重新加载
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : files.length === 0 ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="text-center">
|
||||
<Cloud className="h-12 w-12 text-gray-400 mx-auto mb-4" />
|
||||
<p className="text-gray-600 mb-4">暂无文件，请上传</p>
|
||||
<Button
|
||||
onClick={handleUploadClick}
|
||||
disabled={uploading}
|
||||
className="flex items-center space-x-2 mx-auto"
|
||||
>
|
||||
<Upload className="h-4 w-4" />
|
||||
<span>{uploading ? '上传中...' : '上传文件'}</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>文件名</TableHead>
|
||||
<TableHead>文件中文名</TableHead>
|
||||
<TableHead>大小</TableHead>
|
||||
<TableHead>类型</TableHead>
|
||||
<TableHead>修改时间</TableHead>
|
||||
<TableHead className="text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{files.map((file) => (
|
||||
<TableRow key={file.id}>
|
||||
<TableCell className="font-medium">
|
||||
<div className="flex items-center space-x-2">
|
||||
{getFileIcon(file.mime_type)}
|
||||
<span>{file.filename}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="text-blue-600 font-medium">{file.original_filename}</span>
|
||||
</TableCell>
|
||||
<TableCell>{formatFileSize(file.file_size)}</TableCell>
|
||||
<TableCell>
|
||||
<span className="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">
|
||||
{file.mime_type.split('/')[1]?.toUpperCase() || 'FILE'}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-gray-600">
|
||||
{formatDate(file.updated_at)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex items-center justify-end space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleFileDownload(file)}
|
||||
title="下载文件"
|
||||
disabled={refreshingFileId === file.id}
|
||||
>
|
||||
{refreshingFileId === file.id ? (
|
||||
<div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600" />
|
||||
) : (
|
||||
<Download className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleFileDelete(file)}
|
||||
className="text-red-600 hover:text-red-700 hover:bg-red-50"
|
||||
title="删除文件"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user