通知与推荐功能，css样式优化
Change-Id: I33d934bfdca88b7a8e6742be2a3c7323d28ffbcf
diff --git a/src/components/Administer.css b/src/components/Administer.css
index 786e3dc..1fd5e0a 100644
--- a/src/components/Administer.css
+++ b/src/components/Administer.css
@@ -1,77 +1,19 @@
+/* Administer.css */
+
.administer-container {
- padding: 20px;
max-width: 1200px;
margin: 0 auto;
+ padding: 20px;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ color: #333;
}
-.search-container {
- margin-bottom: 20px;
- display: flex;
- gap: 10px;
-}
-
-.search-input {
- padding: 8px;
- border: 1px solid #ccc;
- border-radius: 4px;
- flex-grow: 1;
- max-width: 300px;
-}
-
-.search-button, .reset-button {
- padding: 8px 16px;
- background-color: #4CAF50;
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
-}
-
-.reset-button {
- background-color: #f44336;
-}
-
-.error-message {
- color: #f44336;
- margin-bottom: 15px;
-}
-
-.loading-message {
- color: #2196F3;
- margin-bottom: 15px;
-}
-
-.user-list-container {
- overflow-x: auto;
-}
-
-.user-table {
- width: 100%;
- border-collapse: collapse;
-}
-
-.user-table th, .user-table td {
- border: 1px solid #ddd;
- padding: 8px;
- text-align: left;
-}
-
-.user-table th {
- background-color: #f2f2f2;
-}
-
-.user-table tr:nth-child(even) {
- background-color: #f9f9f9;
-}
-
-.user-table tr:hover {
- background-color: #f1f1f1;
-}
-
-.authority-select {
- padding: 5px;
- border-radius: 4px;
- border: 1px solid #ccc;
+.administer-container h1 {
+ text-align: center;
+ color: #2c3e50;
+ margin-bottom: 30px;
+ font-size: 28px;
+ font-weight: 600;
}
/* 选项卡样式 */
@@ -87,28 +29,185 @@
border: none;
cursor: pointer;
font-size: 16px;
+ color: #555;
+ transition: all 0.3s ease;
border-bottom: 3px solid transparent;
+ margin-right: 5px;
+}
+
+.tab-button:hover {
+ color: #3498db;
}
.tab-button.active {
- border-bottom: 3px solid #1890ff;
- color: #1890ff;
+ color: #3498db;
+ border-bottom: 3px solid #3498db;
+ font-weight: 600;
}
-/* 折扣卡片样式 */
-.current-discount-card {
- background-color: #f5f5f5;
- padding: 15px;
- border-radius: 5px;
+/* 搜索区域 */
+.search-container {
+ display: flex;
margin-bottom: 20px;
+ gap: 10px;
}
-/* 折扣表单样式 */
-.add-discount-form {
+.search-input {
+ flex: 1;
+ padding: 10px 15px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ font-size: 14px;
+ transition: border 0.3s;
+}
+
+.search-input:focus {
+ outline: none;
+ border-color: #3498db;
+}
+
+.search-button, .reset-button {
+ padding: 10px 20px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+ transition: background-color 0.3s;
+}
+
+.search-button {
+ background-color: #3498db;
+ color: white;
+}
+
+.search-button:hover {
+ background-color: #2980b9;
+}
+
+.reset-button {
+ background-color: #f1f1f1;
+ color: #333;
+}
+
+.reset-button:hover {
+ background-color: #ddd;
+}
+
+/* 表格样式 */
+.user-table, .discount-table, .announcement-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-top: 20px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.user-table th,
+.discount-table th,
+.announcement-table th {
+ background-color: #3498db;
+ color: white;
+ padding: 12px 15px;
+ text-align: left;
+}
+
+.user-table td,
+.discount-table td,
+.announcement-table td {
+ padding: 12px 15px;
+ border-bottom: 1px solid #ddd;
+}
+
+.user-table tr:nth-child(even),
+.discount-table tr:nth-child(even),
+.announcement-table tr:nth-child(even) {
background-color: #f9f9f9;
+}
+
+.user-table tr:hover,
+.discount-table tr:hover,
+.announcement-table tr:hover {
+ background-color: #f1f1f1;
+}
+
+/* 权限选择框 */
+.authority-select {
+ padding: 8px 12px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ background-color: white;
+ cursor: pointer;
+}
+
+.authority-select:focus {
+ outline: none;
+ border-color: #3498db;
+}
+
+/* 错误消息 */
+.error-message {
+ color: #e74c3c;
+ background-color: #fadbd8;
+ padding: 10px 15px;
+ border-radius: 4px;
+ margin-bottom: 15px;
+ border-left: 4px solid #e74c3c;
+}
+
+/* 加载状态 */
+.loading-message {
+ color: #3498db;
+ text-align: center;
+ padding: 15px;
+ font-style: italic;
+}
+
+/* 折扣卡片 */
+.current-discount-section {
+ margin-bottom: 30px;
padding: 20px;
- border-radius: 5px;
- margin-bottom: 20px;
+ background-color: #f8f9fa;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.current-discount-section h3 {
+ margin-top: 0;
+ color: #2c3e50;
+ border-bottom: 1px solid #eee;
+ padding-bottom: 10px;
+}
+
+.current-discount-card {
+ background-color: white;
+ padding: 15px;
+ border-radius: 6px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ margin-top: 15px;
+}
+
+.current-discount-card p {
+ margin: 8px 0;
+}
+
+.current-discount-card strong {
+ color: #2c3e50;
+ margin-right: 10px;
+}
+
+/* 表单样式 */
+.add-discount-form, .announcement-form {
+ background-color: #f8f9fa;
+ padding: 20px;
+ border-radius: 8px;
+ margin-bottom: 30px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.add-discount-form h3, .announcement-form h3 {
+ margin-top: 0;
+ color: #2c3e50;
+ border-bottom: 1px solid #eee;
+ padding-bottom: 10px;
}
.form-group {
@@ -116,111 +215,97 @@
}
.form-group label {
- display: inline-block;
- width: 100px;
- margin-right: 10px;
+ display: block;
+ margin-bottom: 8px;
+ font-weight: 500;
+ color: #2c3e50;
}
-/* 折扣表格样式 */
-.discount-table {
+.form-group input[type="text"],
+.form-group textarea,
+.form-group select {
width: 100%;
- border-collapse: collapse;
-}
-
-.discount-table th, .discount-table td {
- padding: 10px;
+ padding: 10px 15px;
border: 1px solid #ddd;
- text-align: left;
+ border-radius: 4px;
+ font-size: 14px;
+ transition: border 0.3s;
}
-.discount-table th {
- background-color: #f2f2f2;
+.form-group textarea {
+ min-height: 100px;
+ resize: vertical;
}
-.delete-button {
- background-color: #ff4d4f;
- color: white;
- border: none;
- padding: 5px 10px;
- border-radius: 3px;
- cursor: pointer;
+.form-group input[type="text"]:focus,
+.form-group textarea:focus,
+.form-group select:focus {
+ outline: none;
+ border-color: #3498db;
}
-.delete-button:hover {
- background-color: #ff7875;
+/* 日期选择器样式 */
+.react-datepicker-wrapper {
+ width: 100%;
}
-.react-datepicker {
+.react-datepicker__input-container input {
+ width: 100%;
+ padding: 10px 15px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
font-size: 14px;
}
-.react-datepicker__time-container {
- width: 120px;
-}
-
-.react-datepicker-time__header {
- font-size: 13px;
-}
-
-.time-preview {
- margin: 10px 0;
- padding: 10px;
- background: #f5f5f5;
+/* 按钮样式 */
+button {
+ padding: 10px 20px;
+ background-color: #3498db;
+ color: white;
+ border: none;
border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+ transition: background-color 0.3s;
}
-/* 公告表单样式 */
-.announcement-form {
- padding: 20px;
- background: #f5f5f5;
- border-radius: 8px;
- margin-bottom: 20px;
+button:hover {
+ background-color: #2980b9;
}
-.announcement-form .form-group {
- margin-bottom: 15px;
+.delete-button {
+ background-color: #e74c3c;
}
-.announcement-form label {
- display: block;
- margin-bottom: 5px;
- font-weight: bold;
+.delete-button:hover {
+ background-color: #c0392b;
}
-.announcement-form input[type="text"],
-.announcement-form textarea {
- width: 100%;
- padding: 8px;
- border: 1px solid #ddd;
- border-radius: 4px;
-}
-
-.announcement-form textarea {
- min-height: 100px;
-}
-
-/* 公告列表样式 */
-.announcement-list-container {
- margin-top: 20px;
-}
-
-.announcement-table {
- width: 100%;
- border-collapse: collapse;
-}
-
-.announcement-table th,
-.announcement-table td {
- padding: 12px;
- text-align: left;
- border-bottom: 1px solid #ddd;
-}
-
-.announcement-table th {
- background-color: #f2f2f2;
- font-weight: bold;
-}
-
-.announcement-table tr:hover {
- background-color: #f9f9f9;
+/* 响应式调整 */
+@media (max-width: 768px) {
+ .administer-container {
+ padding: 15px;
+ }
+
+ .tab-container {
+ flex-wrap: wrap;
+ }
+
+ .tab-button {
+ padding: 8px 15px;
+ font-size: 14px;
+ }
+
+ .user-table, .discount-table, .announcement-table {
+ display: block;
+ overflow-x: auto;
+ }
+
+ .search-container {
+ flex-direction: column;
+ }
+
+ .search-button, .reset-button {
+ width: 100%;
+ }
}
\ No newline at end of file
diff --git a/src/components/Administer.jsx b/src/components/Administer.jsx
index 0f915e3..9cf8986 100644
--- a/src/components/Administer.jsx
+++ b/src/components/Administer.jsx
@@ -248,8 +248,7 @@
setError(null);
try {
const announcements = await getAnnouncements();
- // 确保总是设置为数组
- setAnnouncements(Array.isArray(announcements) ? announcements : []);
+ setAnnouncements(announcements);
} catch (err) {
setError('获取公告列表失败: ' + err.message);
console.error(err);
diff --git a/src/components/Administer.test.jsx b/src/components/Administer.test.jsx
index 598ed4e..2cb5bb0 100644
--- a/src/components/Administer.test.jsx
+++ b/src/components/Administer.test.jsx
@@ -1,32 +1,31 @@
import React from 'react';
-import { render, screen, waitFor, fireEvent, act } from '@testing-library/react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import '@testing-library/jest-dom';
-import axios from 'axios';
-import MockAdapter from 'axios-mock-adapter';
import Administer from './Administer';
-describe('Administer Component', () => {
- let mock;
+// 导入要模拟的API函数
+import {
+ getAllUsers,
+ searchUsers,
+ getAllDiscounts,
+ getCurrentDiscount
+} from '../api/administer';
+import { getAnnouncements } from '../api/announcement';
- beforeAll(() => {
- mock = new MockAdapter(axios);
+// 模拟API模块
+jest.mock('../api/administer');
+jest.mock('../api/announcement');
+
+describe('Administer Component', () => {
+ beforeEach(() => {
+ // 清除所有模拟的调用信息
+ jest.clearAllMocks();
localStorage.setItem('token', 'test-token');
});
- afterEach(() => {
- mock.reset();
- });
-
- afterAll(() => {
- mock.restore();
- });
-
test('renders user management tab by default', async () => {
- mock.onGet('/user/allUser').reply(200, {
- code: 200,
- data: { data: [] }
- });
+ getAllUsers.mockResolvedValue([]);
render(
<MemoryRouter>
@@ -53,10 +52,7 @@
}
];
- mock.onGet('/user/allUser').reply(200, {
- code: 200,
- data: { data: mockUsers }
- });
+ getAllUsers.mockResolvedValue(mockUsers);
render(
<MemoryRouter>
@@ -73,14 +69,17 @@
const mockUsers = [
{
username: 'searchuser',
- authority: 'USER'
+ authority: 'USER',
+ registTime: '2023-01-01',
+ lastLogin: '2023-05-01',
+ upload: 1000,
+ download: 500,
+ shareRate: 2.0,
+ magicPoints: 100
}
];
- mock.onGet('/user/searchUser').reply(200, {
- code: 200,
- data: { data: mockUsers }
- });
+ searchUsers.mockResolvedValue(mockUsers);
render(
<MemoryRouter>
@@ -99,15 +98,13 @@
});
test('switches between tabs', async () => {
- mock.onGet('/user/allUser').reply(200, {
- code: 200,
- data: { data: [] }
- });
-
- mock.onGet('/discount/all').reply(200, {
- code: 200,
- data: { data: [] }
- });
+ // 设置初始用户数据
+ getAllUsers.mockResolvedValue([]);
+ // 设置折扣数据
+ getAllDiscounts.mockResolvedValue([]);
+ getCurrentDiscount.mockResolvedValue(null);
+ // 设置公告数据
+ getAnnouncements.mockResolvedValue([]);
render(
<MemoryRouter>
@@ -115,10 +112,12 @@
</MemoryRouter>
);
+ // 切换到折扣管理标签
fireEvent.click(screen.getByText('折扣管理'));
await waitFor(() => {
expect(screen.getByText('添加新折扣')).toBeInTheDocument();
+ // 可以添加更多断言来验证折扣管理页面的内容
});
});
});
\ No newline at end of file
diff --git a/src/components/AnnouncementDetail.css b/src/components/AnnouncementDetail.css
index 5ca87c1..b6c600b 100644
--- a/src/components/AnnouncementDetail.css
+++ b/src/components/AnnouncementDetail.css
@@ -1,64 +1,93 @@
.announcement-container {
- max-width: 800px;
- margin: 0 auto;
- padding: 20px;
- }
-
- .back-button {
- background: none;
- border: none;
- color: #1890ff;
- font-size: 16px;
- cursor: pointer;
- margin-bottom: 20px;
+ max-width: 800px;
+ margin: 40px auto;
+ padding: 0 20px;
+}
+
+.back-button {
+ padding: 8px 16px;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+ color: white;
+ border: none;
+ border-radius: 6px;
+ font-weight: 600;
+ cursor: pointer;
+ margin-bottom: 20px;
+ transition: all 0.2s;
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+}
+
+.back-button:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 2px 8px rgba(30, 60, 114, 0.3);
+}
+
+.announcement-detail {
+ background: white;
+ padding: 30px;
+ border-radius: 8px;
+ box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
+}
+
+.announcement-header {
+ border-bottom: 1px solid #eee;
+ padding-bottom: 20px;
+ margin-bottom: 25px;
+}
+
+.announcement-header h1 {
+ margin: 0 0 15px 0;
+ font-size: 28px;
+ color: #1e3c72;
+ font-weight: 700;
+}
+
+.announcement-meta {
+ display: flex;
+ gap: 15px;
+ color: #666;
+ font-size: 14px;
+ align-items: center;
+}
+
+.announcement-content {
+ line-height: 1.8;
+ font-size: 16px;
+ color: #333;
+}
+
+.announcement-content p {
+ margin: 0 0 20px 0;
+}
+
+.error-message {
+ text-align: center;
+ padding: 50px;
+ color: #ff4d4f;
+ font-size: 16px;
+ background-color: #fff2f0;
+ border-radius: 8px;
+ border: 1px solid #ffccc7;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+ .announcement-container {
+ padding: 0 15px;
+ margin: 20px auto;
}
.announcement-detail {
- background: white;
- padding: 25px;
- border-radius: 8px;
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
- }
-
- .announcement-header {
- border-bottom: 1px solid #f0f0f0;
- padding-bottom: 15px;
- margin-bottom: 20px;
+ padding: 20px;
}
.announcement-header h1 {
- margin: 0 0 10px 0;
- font-size: 24px;
- }
-
- .announcement-meta {
- display: flex;
- gap: 15px;
- color: #666;
- font-size: 14px;
- align-items: center;
- }
-
- .category-badge {
- background: #e6f7ff;
- color: #1890ff;
- padding: 2px 8px;
- border-radius: 4px;
- font-size: 12px;
+ font-size: 22px;
}
.announcement-content {
- line-height: 1.8;
font-size: 15px;
}
-
- .announcement-content p {
- margin: 0 0 16px 0;
- }
-
- .error-message {
- text-align: center;
- padding: 50px;
- color: #ff4d4f;
- font-size: 16px;
- }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/AuthForm.css b/src/components/AuthForm.css
index 0348f50..b15cbee 100644
--- a/src/components/AuthForm.css
+++ b/src/components/AuthForm.css
@@ -1,113 +1,144 @@
/* src/components/AuthForm.css */
.auth-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- min-height: 100vh;
- background-color: #f5f5f5;
- padding: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+ padding: 20px;
}
.auth-title {
- color: #333;
- font-size: 2.5rem;
- margin-bottom: 2rem;
- text-align: center;
+ color: #1e3c72;
+ font-size: 2.5rem;
+ margin-bottom: 2rem;
+ text-align: center;
+ font-weight: 700;
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.auth-form-wrapper {
- width: 100%;
- max-width: 400px;
- background: white;
- padding: 2rem;
- border-radius: 8px;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ width: 100%;
+ max-width: 400px;
+ background: white;
+ padding: 2.5rem;
+ border-radius: 10px;
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.auth-form {
- display: flex;
- flex-direction: column;
- gap: 1rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1.2rem;
}
.auth-form h2 {
- color: #333;
- text-align: center;
- margin-bottom: 1.5rem;
+ color: #1e3c72;
+ text-align: center;
+ margin-bottom: 1.5rem;
+ font-size: 1.5rem;
+ font-weight: 600;
}
.form-group {
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
}
.form-group input {
- padding: 0.8rem;
- border: 1px solid #ddd;
- border-radius: 4px;
- font-size: 1rem;
- width: 100%;
- box-sizing: border-box; /* 确保padding不会影响宽度 */
- height: 42px; /* 固定高度 */
+ padding: 0.9rem 1rem;
+ border: 1px solid #ddd;
+ border-radius: 6px;
+ font-size: 1rem;
+ width: 100%;
+ box-sizing: border-box;
+ height: 46px;
+ transition: all 0.3s;
}
.form-group input:focus {
- outline: none;
- border-color: #007bff;
+ outline: none;
+ border-color: #1e3c72;
+ box-shadow: 0 0 0 2px rgba(30, 60, 114, 0.2);
}
.auth-button {
- padding: 0.8rem;
- background-color: #007bff;
- color: white;
- border: none;
- border-radius: 4px;
- font-size: 1rem;
- cursor: pointer;
- transition: background-color 0.3s;
- height: 42px; /* 与输入框高度一致 */
+ padding: 0.9rem;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+ color: white;
+ border: none;
+ border-radius: 6px;
+ font-size: 1rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s;
+ height: 46px;
+ margin-top: 0.5rem;
}
.auth-button:hover {
- background-color: #0056b3;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(30, 60, 114, 0.2);
}
.auth-button:disabled {
- background-color: #cccccc;
- cursor: not-allowed;
+ background: #cccccc;
+ transform: none;
+ box-shadow: none;
+ cursor: not-allowed;
}
.auth-switch {
- display: flex;
- justify-content: center;
- align-items: center;
- gap: 0.5rem;
- margin-top: 1rem;
- font-size: 0.9rem;
- color: #666;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 0.5rem;
+ margin-top: 1.5rem;
+ font-size: 0.9rem;
+ color: #666;
}
.switch-button {
- background: none;
- border: none;
- color: #007bff;
- cursor: pointer;
- text-decoration: underline;
- font-size: 0.9rem;
- padding: 0;
+ background: none;
+ border: none;
+ color: #1e3c72;
+ cursor: pointer;
+ font-size: 0.9rem;
+ font-weight: 600;
+ padding: 0;
+ transition: all 0.2s;
+ text-decoration: none;
}
.switch-button:hover {
- color: #0056b3;
+ color: #2a5298;
+ text-decoration: underline;
}
.error-message {
- color: #dc3545;
- background-color: #f8d7da;
- padding: 0.5rem;
- border-radius: 4px;
- text-align: center;
- margin-bottom: 1rem;
+ color: #e74c3c;
+ background-color: #fdecea;
+ padding: 0.8rem;
+ border-radius: 6px;
+ text-align: center;
+ margin-bottom: 1rem;
+ border: 1px solid #fadbd8;
+ font-size: 0.9rem;
+}
+
+/* 响应式设计 */
+@media (max-width: 480px) {
+ .auth-form-wrapper {
+ padding: 1.8rem;
+ }
+
+ .auth-title {
+ font-size: 2rem;
+ }
+
+ .auth-form h2 {
+ font-size: 1.3rem;
+ }
}
\ No newline at end of file
diff --git a/src/components/Dashboard.css b/src/components/Dashboard.css
index d3a5471..2882f5c 100644
--- a/src/components/Dashboard.css
+++ b/src/components/Dashboard.css
@@ -1,325 +1,457 @@
/* src/components/Dashboard.css */
.dashboard-container {
- display: flex;
- flex-direction: column;
- height: 100vh;
- background-color: #f5f5f5;
- }
-
- .top-bar {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 10px 20px;
- background-color: #fff;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- position: sticky;
- top: 0;
- z-index: 100;
- }
-
- .search-container {
- display: flex;
- flex-grow: 1;
- max-width: 600px;
- margin: 0 auto;
- }
-
- .search-input {
- flex-grow: 1;
- padding: 8px 15px;
- border: 1px solid #ddd;
- border-radius: 20px 0 0 20px;
- font-size: 16px;
- outline: none;
- }
-
- .search-button {
- padding: 8px 15px;
- background-color: #007bff;
- color: white;
- border: none;
- border-radius: 0 20px 20px 0;
- cursor: pointer;
- font-size: 16px;
- }
-
- .search-button:hover {
- background-color: #0056b3;
- }
-
- .user-info {
- display: flex;
- align-items: center;
- gap: 10px;
- }
-
- .user-avatar {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- object-fit: cover;
- }
-
- .username {
- font-weight: bold;
- }
-
- .logout-button {
- padding: 5px 10px;
- background-color: #f8f9fa;
- border: 1px solid #ddd;
- border-radius: 4px;
- cursor: pointer;
- margin-left: 10px;
- }
-
- .logout-button:hover {
- background-color: #e9ecef;
- }
-
- .nav-tabs {
- display: flex;
- background-color: #fff;
- border-bottom: 1px solid #ddd;
- padding: 0 20px;
- }
-
- .tab-button {
- padding: 12px 20px;
- background: none;
- border: none;
- border-bottom: 3px solid transparent;
- cursor: pointer;
- font-size: 16px;
- color: #666;
- }
-
- .tab-button:hover {
- color: #007bff;
- }
-
- .tab-button.active {
- color: #007bff;
- border-bottom-color: #007bff;
- font-weight: bold;
- }
-
- .content-area {
- flex-grow: 1;
- padding: 20px;
- background-color: #fff;
- margin: 20px;
- border-radius: 4px;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
- }
-
- .loading, .error {
- padding: 20px;
- text-align: center;
- font-size: 18px;
- }
-
- .error {
- color: #dc3545;
- }
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ background-color: #f8f9fa;
+ font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
-/* 公告区样式 */
- /* 轮播图样式 */
+/* 顶部栏样式 */
+.top-bar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px 30px;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ position: sticky;
+ top: 0;
+ z-index: 1000;
+}
+
+.platform-name h2 {
+ margin: 0;
+ color: white;
+ font-size: 24px;
+ font-weight: 700;
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.user-actions {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+}
+
+.admin-center-button {
+ padding: 8px 16px;
+ background-color: #ff7f50;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.admin-center-button:hover {
+ background-color: #ff6347;
+ transform: translateY(-1px);
+}
+
+.user-info {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ color: white;
+}
+
+.user-avatar {
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
+ object-fit: cover;
+ border: 2px solid rgba(255, 255, 255, 0.3);
+}
+
+.username {
+ font-weight: 600;
+ color: white !important;
+}
+
+.logout-button {
+ padding: 6px 12px;
+ background-color: transparent;
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ color: white;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.logout-button:hover {
+ background-color: rgba(255, 255, 255, 0.1);
+ border-color: rgba(255, 255, 255, 0.5);
+}
+
+/* 导航标签样式 */
+.nav-tabs {
+ display: flex;
+ background-color: white;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+ padding: 0 30px;
+}
+
+.tab-button {
+ padding: 14px 24px;
+ background: none;
+ border: none;
+ border-bottom: 3px solid transparent;
+ cursor: pointer;
+ font-size: 15px;
+ font-weight: 600;
+ color: #666;
+ transition: all 0.2s;
+ position: relative;
+}
+
+.tab-button:hover {
+ color: #1e3c72;
+}
+
+.tab-button.active {
+ color: #1e3c72;
+ border-bottom-color: #1e3c72;
+}
+
+.tab-button.active::after {
+ content: '';
+ position: absolute;
+ bottom: -3px;
+ left: 0;
+ right: 0;
+ height: 3px;
+ background-color: #1e3c72;
+}
+
+/* 内容区域样式 */
+.content-area {
+ flex-grow: 1;
+ padding: 25px 30px;
+ background-color: white;
+ margin: 20px;
+ border-radius: 8px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.section-search-container {
+ display: flex;
+ margin-bottom: 25px;
+ gap: 10px;
+}
+
+.section-search-input {
+ flex: 1;
+ padding: 10px 16px;
+ border: 1px solid #ddd;
+ border-radius: 6px;
+ font-size: 14px;
+ transition: all 0.2s;
+}
+
+.section-search-input:focus {
+ border-color: #1e3c72;
+ box-shadow: 0 0 0 2px rgba(30, 60, 114, 0.2);
+}
+
+.search-button, .reset-button {
+ padding: 10px 18px;
+ border: none;
+ border-radius: 6px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.search-button {
+ background-color: #1e3c72;
+ color: white;
+}
+
+.search-button:hover {
+ background-color: #2a5298;
+ transform: translateY(-1px);
+}
+
+.reset-button {
+ background-color: #f1f1f1;
+ color: #555;
+}
+
+.reset-button:hover {
+ background-color: #e0e0e0;
+}
+
+/* 轮播图样式 */
.carousel-container {
- position: relative;
- width: 100%;
- height: 200px;
- overflow: hidden;
- margin-bottom: 20px;
- border-radius: 4px;
- }
-
- .carousel-slide {
- position: absolute;
- width: 100%;
- height: 100%;
- opacity: 0;
- transition: opacity 1s ease-in-out;
- }
-
- .carousel-slide.active {
- opacity: 1;
- }
-
- .carousel-image {
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 24px;
- font-weight: bold;
- color: white;
- }
-
- .gray-bg {
- background-color: #666;
- }
-
- .carousel-dots {
- position: absolute;
- bottom: 15px;
- left: 0;
- right: 0;
- display: flex;
- justify-content: center;
- gap: 10px;
- }
-
- .dot {
- width: 12px;
- height: 12px;
- border-radius: 50%;
- background-color: rgba(255, 255, 255, 0.5);
- cursor: pointer;
- }
-
- .dot.active {
- background-color: white;
- }
-
- /* 公告网格样式 */
- .announcement-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
- gap: 20px;
- }
-
- .announcement-card {
- background-color: white;
- padding: 15px;
- border-radius: 4px;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
- transition: transform 0.2s, box-shadow 0.2s;
- }
-
- .announcement-card:hover {
- transform: translateY(-2px);
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
- }
-
- .announcement-card h3 {
- margin-top: 0;
- color: #007bff;
- border-bottom: 1px solid #eee;
- padding-bottom: 8px;
- }
-
- .announcement-card p {
- margin-bottom: 0;
- color: #666;
- line-height: 1.5;
- }
-/* 分享区样式 */
- /* 上传头部样式 */
+ position: relative;
+ width: 100%;
+ height: 200px;
+ overflow: hidden;
+ margin-bottom: 30px;
+ border-radius: 8px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.carousel-slide {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ transition: opacity 0.5s ease-in-out;
+}
+
+.carousel-slide.active {
+ opacity: 1;
+}
+
+.carousel-image {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+ padding: 30px;
+ color: white;
+ background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
+}
+
+.carousel-image h3 {
+ font-size: 28px;
+ margin: 0 0 10px 0;
+ text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+.carousel-image p {
+ margin: 5px 0;
+ font-size: 16px;
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.carousel-dots {
+ position: absolute;
+ bottom: 15px;
+ left: 0;
+ right: 0;
+ display: flex;
+ justify-content: center;
+ gap: 8px;
+}
+
+.dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background-color: rgba(255, 255, 255, 0.5);
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.dot.active {
+ background-color: white;
+ transform: scale(1.2);
+}
+
+/* 公告网格样式 */
+.announcement-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ gap: 20px;
+ margin-bottom: 30px;
+}
+
+.announcement-card {
+ background-color: white;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+ transition: all 0.2s;
+ border-left: 4px solid #1e3c72;
+ cursor: pointer;
+}
+
+.announcement-card:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+.announcement-card h3 {
+ margin: 0 0 12px 0;
+ color: #1e3c72;
+ font-size: 18px;
+ font-weight: 600;
+}
+
+.announcement-card p {
+ margin: 0 0 12px 0;
+ color: #555;
+ line-height: 1.5;
+ font-size: 14px;
+}
+
+.announcement-footer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: #888;
+ font-size: 13px;
+}
+
+/* 推荐区域样式 */
+.recommend-section {
+ margin-top: 40px;
+ padding-top: 20px;
+ border-top: 1px solid #eee;
+}
+
+.section-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+}
+
+.section-title {
+ margin: 0;
+ color: #1e3c72;
+ font-size: 20px;
+ font-weight: 600;
+}
+
+.refresh-btn {
+ padding: 8px 16px;
+ background-color: #f1f1f1;
+ border: none;
+ border-radius: 6px;
+ font-weight: 600;
+ color: #555;
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.refresh-btn:hover {
+ background-color: #e0e0e0;
+}
+
+.refresh-btn:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
+.recommend-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+ gap: 20px;
+}
+
+.recommend-card {
+ background-color: white;
+ border-radius: 8px;
+ overflow: hidden;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+ transition: all 0.2s;
+ cursor: pointer;
+}
+
+.recommend-card:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+.card-poster {
+ height: 120px;
+ background-color: #f5f5f5;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.poster-image {
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+ font-size: 36px;
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.card-info {
+ padding: 15px;
+}
+
+.card-title {
+ margin: 0 0 8px 0;
+ font-size: 16px;
+ font-weight: 600;
+ color: #333;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.card-meta {
+ margin: 0 0 5px 0;
+ font-size: 13px;
+ color: #666;
+}
+
+.card-subtitle {
+ margin: 0;
+ font-size: 13px;
+ color: #888;
+}
+
+.card-stats {
+ padding: 10px 15px;
+ border-top: 1px solid #eee;
+ font-size: 13px;
+ color: #666;
+}
+
+.no-recommendations {
+ grid-column: 1 / -1;
+ text-align: center;
+ padding: 30px;
+ color: #888;
+ font-size: 15px;
+}
+
+/* 上传按钮样式 */
.upload-header {
margin-bottom: 20px;
- display: flex;
- justify-content: flex-start;
}
.upload-btn {
padding: 10px 20px;
- background: #1890ff;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: white;
border: none;
- border-radius: 4px;
- font-size: 16px;
+ border-radius: 6px;
+ font-weight: 600;
cursor: pointer;
- transition: all 0.3s;
+ transition: all 0.2s;
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
}
.upload-btn:hover {
- background: #40a9ff;
+ transform: translateY(-1px);
+ box-shadow: 0 2px 8px rgba(30, 60, 114, 0.3);
}
-/* 弹窗样式 */
-.modal-overlay {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(0,0,0,0.5);
- display: flex;
- justify-content: center;
- align-items: center;
- z-index: 1000;
-}
-
-.upload-modal {
- background: white;
- padding: 25px;
- border-radius: 8px;
- width: 500px;
- max-width: 90%;
- position: relative;
-}
-
-.close-btn {
- position: absolute;
- top: 15px;
- right: 15px;
- background: none;
- border: none;
- font-size: 20px;
- cursor: pointer;
-}
-
-/* 表单样式 */
-.form-group {
- margin-bottom: 15px;
-}
-
-.form-group label {
- display: block;
- margin-bottom: 5px;
- font-weight: 500;
-}
-
-.form-group input[type="text"],
-.form-group select,
-.form-group textarea {
- width: 100%;
- padding: 8px;
- border: 1px solid #d9d9d9;
- border-radius: 4px;
-}
-
-.form-group textarea {
- min-height: 80px;
-}
-
-.form-actions {
- display: flex;
- justify-content: flex-end;
- gap: 10px;
- margin-top: 20px;
-}
-
-.cancel-btn {
- padding: 8px 15px;
- background: #f5f5f5;
- border: 1px solid #d9d9d9;
- border-radius: 4px;
- cursor: pointer;
-}
-
-.cancel-btn:hover {
- background: #e6e6e6;
-}
- /* 筛选区域 */
+/* 筛选区域样式 */
.filter-section {
- background: #f9f9f9;
- padding: 15px;
+ background-color: white;
+ padding: 15px 20px;
border-radius: 8px;
- margin-bottom: 20px;
+ margin-bottom: 25px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.filter-group {
@@ -327,60 +459,59 @@
}
.filter-group h4 {
- margin: 0 0 8px 0;
- font-size: 15px;
- color: #666;
+ margin: 0 0 10px 0;
+ font-size: 14px;
+ color: #555;
+ font-weight: 600;
}
-/* 筛选按钮 */
+.filter-options {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
.filter-btn {
padding: 6px 12px;
- margin-right: 8px;
- margin-bottom: 8px;
+ background-color: #f5f5f5;
+ color: #333; /* 改为黑字 */
border: 1px solid #ddd;
- background: white;
border-radius: 4px;
+ font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.filter-btn:hover {
- border-color: #1890ff;
- color: #1890ff;
+ border-color: #1e3c72;
+ color: #fbfbfc;
}
.filter-btn.active {
- background: #1890ff;
+ background-color: #1e3c72;
color: white;
- border-color: #1890ff;
+ border-color: #1e3c72;
}
-/* 确定按钮 */
.confirm-btn {
padding: 8px 20px;
- background: #1890ff;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: white;
border: none;
- border-radius: 4px;
+ border-radius: 6px;
+ font-weight: 600;
cursor: pointer;
- font-size: 14px;
- transition: opacity 0.3s;
+ transition: all 0.2s;
}
.confirm-btn:hover {
- background: #007bff;
+ transform: translateY(-1px);
+ box-shadow: 0 2px 8px rgba(30, 60, 114, 0.3);
}
-.confirm-btn:disabled {
- opacity: 0.5;
- cursor: not-allowed;
-}
-
-
-/* 资源列表 */
+/* 资源列表样式 */
.resource-list {
- display: flex;
- flex-direction: column;
+ display: grid;
gap: 15px;
}
@@ -389,99 +520,146 @@
align-items: center;
padding: 15px;
background-color: white;
- border-radius: 4px;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
- transition: transform 0.2s, box-shadow 0.2s;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+ transition: all 0.2s;
+ cursor: pointer;
}
.resource-item:hover {
- transform: translateY(-2px);
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ transform: translateY(-3px);
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.resource-poster {
margin-right: 15px;
+ flex-shrink: 0;
}
.poster-image {
- width: 60px;
- height: 80px;
- background-color: #666;
+ width: 80px;
+ height: 110px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+ font-size: 28px;
+ font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
- color: white;
- font-size: 24px;
- font-weight: bold;
border-radius: 4px;
}
.resource-info {
flex-grow: 1;
+ min-width: 0;
}
.resource-title {
- margin: 0 0 5px 0;
+ margin: 0 0 8px 0;
font-size: 16px;
- font-weight: bold;
+ font-weight: 600;
+ color: #333;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.resource-meta {
- margin: 0;
- font-size: 14px;
+ margin: 0 0 5px 0;
+ font-size: 13px;
color: #666;
}
+.resource-subtitle {
+ margin: 0;
+ font-size: 13px;
+ color: #888;
+}
+
.resource-stats {
- display: flex;
- flex-direction: column;
- align-items: flex-end;
margin-right: 20px;
- min-width: 150px;
+ text-align: right;
+ min-width: 120px;
}
.stat {
+ display: block;
font-size: 13px;
color: #666;
margin-bottom: 5px;
}
.download-btn {
- padding: 8px 15px;
- background-color: #28a745;
+ padding: 8px 16px;
+ background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
color: white;
border: none;
border-radius: 4px;
+ font-weight: 600;
cursor: pointer;
- font-size: 14px;
- transition: background-color 0.2s;
+ transition: all 0.2s;
+ white-space: nowrap;
}
.download-btn:hover {
- background-color: #218838;
-}
-/* 发帖按钮样式 */
-.post-header {
- margin-bottom: 20px;
- text-align: right;
+ transform: translateY(-1px);
+ box-shadow: 0 2px 8px rgba(46, 125, 50, 0.3);
}
-.create-post-btn {
- background-color: #1890ff;
+.delete-btn {
+ padding: 8px 16px;
+ background: linear-gradient(135deg, #ff5e62 0%, #ff2400 100%);
color: white;
border: none;
- padding: 8px 16px;
+ border-radius: 4px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.2s;
+ margin-left: 10px;
+ white-space: nowrap;
+}
+
+.delete-btn:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 2px 8px rgba(255, 94, 98, 0.3);
+}
+
+/* 分页样式 */
+.pagination {
+ display: flex;
+ justify-content: center;
+ margin: 30px 0 20px;
+ gap: 8px;
+}
+
+.pagination button {
+ padding: 8px 14px;
+ border: 1px solid #ddd;
+ background-color: white;
+ color: #333;
border-radius: 4px;
cursor: pointer;
+ transition: all 0.2s;
font-size: 14px;
- transition: background-color 0.3s;
}
-.create-post-btn:hover {
- background-color: #40a9ff;
+.pagination button:hover:not(.active):not(:disabled) {
+ border-color: #1e3c72;
+ color: #1e3c72;
}
-/* 弹窗样式 */
+.pagination button.active {
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+ color: white;
+ border-color: #1e3c72;
+}
+
+.pagination button:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+/* 修改后的模态框样式 */
.post-modal-overlay {
position: fixed;
top: 0;
@@ -492,429 +670,197 @@
display: flex;
justify-content: center;
align-items: center;
- z-index: 1000;
+ z-index: 9999; /* 确保在最上层 */
}
-.post-modal {
+.upload-modal,
+.post-modal,
+.download-modal {
background-color: white;
- padding: 24px;
+ padding: 25px;
border-radius: 8px;
width: 500px;
- max-width: 90%;
+ max-width: calc(100% - 40px);
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
position: relative;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ margin: 20px auto; /* 添加一些外边距 */
+ max-height: 90vh; /* 限制最大高度 */
+ overflow-y: auto; /* 允许内容滚动 */
}
-.post-modal h3 {
- margin-top: 0;
- margin-bottom: 20px;
- font-size: 18px;
- color: #333;
+/* 针对移动端的调整 */
+@media (max-width: 576px) {
+ .post-modal {
+ padding: 20px 15px;
+ width: 100%;
+ margin: 10px;
+ }
}
+/* 确保模态框关闭按钮在最上层 */
.modal-close-btn {
position: absolute;
- top: 16px;
- right: 16px;
+ top: 15px;
+ right: 15px;
background: none;
border: none;
- font-size: 20px;
+ font-size: 22px;
+ color: #888;
cursor: pointer;
- color: #999;
+ transition: all 0.2s;
+ z-index: 1;
}
.modal-close-btn:hover {
- color: #666;
+ color: #555;
+ transform: rotate(90deg);
}
/* 表单样式 */
.form-group {
- margin-bottom: 16px;
+ margin-bottom: 18px;
}
.form-group label {
display: block;
margin-bottom: 8px;
- font-weight: 500;
- color: #333;
+ font-weight: 600;
+ color: #555;
+ font-size: 14px;
}
.form-group input[type="text"],
+.form-group input[type="file"],
+.form-group select,
.form-group textarea {
width: 100%;
- padding: 8px 12px;
- border: 1px solid #d9d9d9;
- border-radius: 4px;
+ padding: 10px 12px;
+ border: 1px solid #ddd;
+ border-radius: 6px;
font-size: 14px;
+ transition: all 0.2s;
+}
+
+.form-group input[type="text"]:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+ border-color: #1e3c72;
+ box-shadow: 0 0 0 2px rgba(30, 60, 114, 0.2);
}
.form-group textarea {
- min-height: 120px;
+ min-height: 100px;
resize: vertical;
}
-.upload-image-btn {
- display: flex;
- align-items: center;
-}
-
-.upload-image-btn label {
- background-color: #f5f5f5;
- padding: 8px 16px;
- border-radius: 4px;
- cursor: pointer;
- border: 1px dashed #d9d9d9;
- margin-right: 10px;
- transition: all 0.3s;
-}
-
-.upload-image-btn label:hover {
- border-color: #1890ff;
- color: #1890ff;
-}
-
-.image-name {
- font-size: 14px;
- color: #666;
-}
-
-/* 按钮样式 */
.form-actions {
display: flex;
justify-content: flex-end;
- margin-top: 24px;
+ gap: 12px;
+ margin-top: 25px;
}
.cancel-btn {
+ padding: 10px 18px;
background-color: #f5f5f5;
- color: #333;
+ color: #555;
border: none;
- padding: 8px 16px;
- border-radius: 4px;
+ border-radius: 6px;
+ font-weight: 600;
cursor: pointer;
- margin-right: 10px;
- transition: background-color 0.3s;
+ transition: all 0.2s;
}
.cancel-btn:hover {
- background-color: #e6e6e6;
+ background-color: #e0e0e0;
}
-.submit-btn {
- background-color: #1890ff;
+.submit-btn, .confirm-btn {
+ padding: 10px 18px;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: white;
border: none;
- padding: 8px 16px;
- border-radius: 4px;
+ border-radius: 6px;
+ font-weight: 600;
cursor: pointer;
- transition: background-color 0.3s;
+ transition: all 0.2s;
}
-.submit-btn:hover {
- background-color: #40a9ff;
+.submit-btn:hover, .confirm-btn:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 2px 8px rgba(30, 60, 114, 0.3);
}
-.pagination {
- display: flex;
- justify-content: center;
- margin: 20px 0;
- gap: 5px;
-}
-
-.pagination button {
- padding: 5px 10px;
- border: 1px solid #ddd;
- background: white;
- cursor: pointer;
-}
-
-.pagination button.active {
- background: #1890ff;
- color: white;
- border-color: #1890ff;
-}
-
-.pagination button:disabled {
- opacity: 0.5;
- cursor: not-allowed;
-}
-
-.filter-section {
- position: sticky;
- top: 0;
- background: white;
- z-index: 100;
- padding: 15px;
- box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-}
-
-.admin-center-btn {
- padding: 5px 10px;
- margin-right: 10px;
- background-color: #ff5722;
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- font-size: 14px;
-}
-
-.admin-center-btn:hover {
- background-color: #e64a19;
-}
-
-/* 区域搜索容器样式 */
-.section-search-container {
- display: flex;
- margin-bottom: 20px;
- gap: 10px;
-}
-
-.section-search-input {
- flex: 1;
- padding: 10px 15px;
- border: 1px solid #ddd;
- border-radius: 4px;
- font-size: 1rem;
-}
-
-.section-search-button {
- padding: 10px 20px;
- background-color: #007bff;
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- transition: background-color 0.3s;
-}
-
-.section-search-button:hover {
- background-color: #0056b3;
-}
-
-/* 分享区顶部操作栏 */
-.share-top-actions {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 20px;
- gap: 20px;
-}
-
-/* 上传按钮样式 */
-.upload-btn {
- padding: 10px 20px;
- background-color: #28a745;
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- transition: background-color 0.3s;
- white-space: nowrap;
-}
-
-.upload-btn:hover {
- background-color: #218838;
-}
-
-/* 下载模态框样式 */
-.modal-overlay {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(0, 0, 0, 0.5);
- z-index: 1000;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.download-modal {
- background: white;
- padding: 20px;
- border-radius: 8px;
- width: 500px;
- max-width: 90%;
- position: relative;
-}
-
-.download-modal .close-btn {
- position: absolute;
- top: 10px;
- right: 10px;
- background: none;
- border: none;
- font-size: 20px;
- cursor: pointer;
-}
-
-.download-modal .form-group {
- margin-bottom: 15px;
-}
-
-.download-modal .form-group label {
- display: block;
- margin-bottom: 5px;
-}
-
-.download-modal .form-group input {
- width: 100%;
- padding: 8px;
- border: 1px solid #ddd;
- border-radius: 4px;
-}
-
+/* 进度条样式 */
.progress-container {
- margin: 15px 0;
- background: #f0f0f0;
- border-radius: 4px;
- height: 20px;
- overflow: hidden;
+ height: 10px;
+ background-color: #f0f0f0;
+ border-radius: 5px;
+ margin: 15px 0;
+ overflow: hidden;
}
.progress-bar {
- height: 100%;
- background: #1890ff;
- transition: width 0.3s;
- color: white;
- text-align: center;
- font-size: 12px;
- line-height: 20px;
+ height: 100%;
+ background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
+ transition: width 0.3s;
+ border-radius: 5px;
}
-.modal-actions {
- display: flex;
- justify-content: flex-end;
- gap: 10px;
- margin-top: 20px;
-}
-
-.modal-actions button {
- padding: 8px 16px;
- border-radius: 4px;
- cursor: pointer;
-}
-
-.modal-actions button:first-child {
- background: #f5f5f5;
- border: 1px solid #d9d9d9;
-}
-
-.modal-actions button:last-child {
- background: #1890ff;
- color: white;
- border: none;
-}
-
-.modal-actions button:disabled {
- background: #d9d9d9;
- cursor: not-allowed;
- opacity: 0.7;
-}
-
-/* 在Dashboard.css中添加以下样式 */
-
-.resource-actions {
- display: flex;
- gap: 10px;
- margin-left: auto;
-}
-
-.delete-btn {
- padding: 8px 15px;
- background-color: #ff4d4f;
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- transition: background-color 0.3s;
-}
-
-.delete-btn:hover {
- background-color: #ff7875;
-}
-
-.delete-btn:disabled {
- background-color: #d9d9d9;
- cursor: not-allowed;
-}
-
-.carousel-image {
- padding: 1rem;
- background: linear-gradient(to right, #f7b733, #fc4a1a);
- color: white;
- border-radius: 10px;
- height: 180px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- font-size: 18px;
- transition: all 0.5s ease-in-out;
-}
-
-.carousel-image h3 {
- font-size: 22px;
- margin: 0;
-}
-
-.carousel-image p {
- margin: 4px 0;
-}
-
-
-/* 平台名称样式 */
-.platform-name {
- flex: 1;
- display: flex;
- align-items: center;
- padding-left: 20px;
-}
-
-.platform-name h2 {
- margin: 0;
- color: #333;
- font-size: 24px;
- font-weight: bold;
-}
-
-/* 分区搜索框样式 */
-.section-search-container {
- padding: 10px 20px;
- margin-bottom: 20px;
-}
-
-.section-search-input {
- width: 100%;
- padding: 8px 15px;
- border: 1px solid #ddd;
- border-radius: 20px;
- font-size: 14px;
- outline: none;
-}
-
-.section-search-input:focus {
- border-color: #1890ff;
-}
-
-.no-results {
+/* 加载和错误提示 */
+.loading {
text-align: center;
- padding: 20px;
- color: #888;
+ padding: 30px;
+ color: #666;
font-size: 16px;
}
-.reset-button {
- padding: 8px 15px;
- background-color: #f0f0f0;
- border: 1px solid #ddd;
- border-radius: 4px;
- cursor: pointer;
- transition: background-color 0.3s;
+.error {
+ text-align: center;
+ padding: 20px;
+ color: #e74c3c;
+ font-size: 16px;
+ background-color: #fdecea;
+ border-radius: 6px;
+ margin: 20px 0;
}
-.reset-button:hover {
- background-color: #e0e0e0;
+/* 响应式调整 */
+@media (max-width: 768px) {
+ .top-bar {
+ padding: 10px 15px;
+ }
+
+ .nav-tabs {
+ padding: 0 15px;
+ overflow-x: auto;
+ white-space: nowrap;
+ -webkit-overflow-scrolling: touch;
+ }
+
+ .content-area {
+ padding: 15px;
+ margin: 10px;
+ }
+
+ .announcement-grid, .recommend-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .resource-item {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .resource-poster {
+ margin-right: 0;
+ margin-bottom: 15px;
+ }
+
+ .resource-stats {
+ margin-right: 0;
+ margin-top: 10px;
+ text-align: left;
+ width: 100%;
+ }
}
\ No newline at end of file
diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx
index 61111f3..e393fcd 100644
--- a/src/components/Dashboard.jsx
+++ b/src/components/Dashboard.jsx
@@ -72,6 +72,9 @@
const [recommendations, setRecommendations] = useState([]);
const [recommendLoading, setRecommendLoading] = useState(false);
const [recommendError, setRecommendError] = useState(null);
+ const [isRecommend, setIsRecommend] = useState(true);
+ const [needNewRecommend, setNeedNewRecommend] = useState(false);
+
@@ -101,18 +104,28 @@
}
};
+ // 修改 useEffect 钩子
useEffect(() => {
if (activeTab === 'announcement') {
fetchAnnouncements();
fetchDiscountsForCarousel();
- fetchRecommendations();
+
+ // 只在需要时获取推荐
+ if (isRecommend || needNewRecommend) {
+ fetchRecommendations();
+ }
}
- }, [activeTab]);
+ }, [activeTab, isRecommend, needNewRecommend]);
+
+ // 添加刷新推荐的功能
+ const handleRefreshRecommendations = () => {
+ setNeedNewRecommend(true);
+ };
const fetchDiscountsForCarousel = async () => {
try {
const all = await getAllDiscounts();
- console.log("返回的折扣数据：", all);
+ // console.log("返回的折扣数据：", all);
const now = new Date();
// ⚠️ 使用 Date.parse 确保兼容 ISO 格式
@@ -353,19 +366,10 @@
setIsDownloading(true);
setDownloadProgress(0);
- try {
- // 标准化路径
- const cleanPath = downloadPath
- .replace(/\\/g, '/') // 统一使用正斜杠
- .replace(/\/+/g, '/') // 去除多余斜杠
- .trim();
-
- // 确保路径以斜杠结尾
- const finalPath = cleanPath.endsWith('/') ? cleanPath : cleanPath + '/';
-
+ try {
// 发起下载请求
- await downloadTorrent(selectedTorrent.id, finalPath);
-
+ await downloadTorrent(selectedTorrent.id, downloadPath);
+ message.success("下载任务已提交");
// 开始轮询进度
const interval = setInterval(async () => {
try {
@@ -374,7 +378,7 @@
if (progresses) {
// 使用完整的 torrent 文件路径作为键
- const torrentPath = selectedTorrent.filePath.replace(/\\/g, '/');
+ const torrentPath = selectedTorrent.downloadPath.replace(/\\/g, '/');
const torrentHash = selectedTorrent.hash;
// 查找匹配的进度
let foundProgress = null;
@@ -404,7 +408,7 @@
} catch (error) {
console.error('获取进度失败:', error);
// 如果获取进度失败但文件已存在，也视为完成
- const filePath = `${finalPath}${selectedTorrent.torrentName || 'downloaded_file'}`;
+ const filePath = `${downloadPath}${selectedTorrent.torrentName || 'downloaded_file'}`;
try {
const exists = await checkFileExists(filePath);
if (exists) {
@@ -640,24 +644,37 @@
}
};
- const fetchRecommendations = async () => {
- try {
- setRecommendLoading(true);
- const response = await getRecommendations(5);
- if (response.code === 200) {
- setRecommendations(response.data || []);
+ // 修改 fetchRecommendations 函数
+const fetchRecommendations = async () => {
+ try {
+ setRecommendLoading(true);
+ const response = await getRecommendations(5);
+
+ if (Array.isArray(response)) {
+ setRecommendations(response);
- // 标记这些推荐为已显示
- response.data.forEach(torrent => {
- markRecommendationShown(torrent.id);
- });
+ if (response.length === 0) {
+ console.warn('暂无推荐内容');
+ } else {
+ // 标记这些推荐为已显示
+ response.forEach(torrent => {
+ markRecommendationShown(torrent.id);
+ });
}
- } catch (error) {
- setRecommendError(error.message || '获取推荐失败');
- } finally {
- setRecommendLoading(false);
+
+ // 获取成功后重置标志
+ setIsRecommend(false);
+ setNeedNewRecommend(false);
+ } else {
+ console.warn('返回格式异常:', response);
+ setRecommendations([]);
}
- };
+ } catch (error) {
+ setRecommendError(error.message || '获取推荐失败');
+ } finally {
+ setRecommendLoading(false);
+ }
+};
useEffect(() => {
@@ -798,7 +815,7 @@
try {
setLoading(true);
const backendData = await getUserInfo(); // 调用修改后的方法
- console.log('后端返回的用户数据:', backendData); // 调试用
+ // console.log('后端返回的用户数据:', backendData); // 调试用
setUserInfo({
name: backendData.username || '演示用户',
@@ -902,11 +919,20 @@
</div>
{/* 新增的为你推荐区域 */}
<div className="recommend-section">
- <h2 className="section-title">为你推荐</h2>
+ <div className="section-header">
+ <h2 className="section-title">为你推荐</h2>
+ <button
+ className="refresh-btn"
+ onClick={handleRefreshRecommendations}
+ disabled={recommendLoading}
+ >
+ {recommendLoading ? '刷新中...' : '刷新推荐'}
+ </button>
+ </div>
{recommendLoading && <div className="loading">加载推荐中...</div>}
{recommendError && <div className="error">{recommendError}</div>}
-
+
<div className="recommend-grid">
{recommendations.map(torrent => (
<div
@@ -1225,11 +1251,11 @@
case 'request':
return (
<div className="content-area" data-testid="request-section">
- {/* 求助区搜索框 */}
+ {/* 求种区搜索框 */}
<div className="section-search-container">
<input
type="text"
- placeholder="搜索求助..."
+ placeholder="搜索求种..."
value={requestSearch}
onChange={(e) => setRequestSearch(e.target.value)}
className="section-search-input"
diff --git a/src/components/HelpDetail.css b/src/components/HelpDetail.css
index 34e1363..6a0dae8 100644
--- a/src/components/HelpDetail.css
+++ b/src/components/HelpDetail.css
@@ -1,337 +1,360 @@
-/* HelpDetail.css */
+/* HelpDetail.css - 个性化版本 */
.help-detail-container {
- max-width: 800px;
- margin: 0 auto;
- padding: 20px;
- }
-
- .back-button {
- background: none;
- border: none;
- color: #1890ff;
- cursor: pointer;
- font-size: 16px;
- margin-bottom: 20px;
- padding: 5px 0;
- }
-
- .help-post {
- background: #fff;
- border-radius: 8px;
- padding: 20px;
- margin-bottom: 20px;
- box-shadow: 0 1px 3px rgba(0,0,0,0.1);
- }
-
- .help-post.solved {
- border-left: 4px solid #52c41a;
- }
-
- .post-header {
- display: flex;
- align-items: center;
- margin-bottom: 15px;
- position: relative;
- }
-
- .post-avatar {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- margin-right: 10px;
- }
-
- .post-meta {
- display: flex;
- flex-direction: column;
- }
-
- .post-author {
- font-weight: bold;
- }
-
- .post-date {
- color: #888;
- font-size: 14px;
- }
-
- .solved-badge {
- position: absolute;
- right: 0;
- top: 0;
- background: #52c41a;
- color: white;
- padding: 2px 8px;
- border-radius: 4px;
- font-size: 12px;
- }
-
- .post-title {
- font-size: 20px;
- margin: 0 0 15px;
- }
-
- .post-content {
- line-height: 1.6;
- margin-bottom: 15px;
- }
-
- .post-actions {
- display: flex;
- gap: 15px;
- }
-
- .like-button, .favorite-button, .solve-button {
- padding: 5px 15px;
- border-radius: 4px;
- border: 1px solid #ddd;
- background: #f5f5f5;
- cursor: pointer;
- }
-
- .like-button.liked {
- background: #e6f7ff;
- border-color: #91d5ff;
- color: #1890ff;
- }
-
- .favorite-button.favorited {
- background: #fff7e6;
- border-color: #ffd591;
- color: #fa8c16;
- }
-
- .solve-button.solved {
- background: #f6ffed;
- border-color: #b7eb8f;
- color: #52c41a;
- }
-
- .comments-section {
- background: #fff;
- border-radius: 8px;
- padding: 20px;
- box-shadow: 0 1px 3px rgba(0,0,0,0.1);
- }
-
- .comment-form {
- margin-bottom: 20px;
- }
-
- .comment-form textarea {
- width: 100%;
- padding: 10px;
- border-radius: 4px;
- border: 1px solid #ddd;
- resize: vertical;
- min-height: 80px;
- margin-bottom: 10px;
- }
-
- .image-upload {
- margin-bottom: 10px;
- }
-
- .upload-button {
- background: #f5f5f5;
- border: 1px dashed #d9d9d9;
- border-radius: 4px;
- padding: 8px 16px;
- cursor: pointer;
- margin-bottom: 10px;
- }
-
- .image-preview {
- display: flex;
- flex-wrap: wrap;
- gap: 10px;
- }
-
- .preview-item {
- position: relative;
- width: 100px;
- height: 100px;
- }
-
- .preview-item img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- border-radius: 4px;
- }
-
- .remove-image {
- position: absolute;
- top: -8px;
- right: -8px;
- width: 20px;
- height: 20px;
- background: #ff4d4f;
- color: white;
- border: none;
- border-radius: 50%;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 12px;
- }
-
- .submit-button {
- background: #1890ff;
- color: white;
- border: none;
- border-radius: 4px;
- padding: 8px 16px;
- cursor: pointer;
- }
-
- .comment-list {
- margin-top: 20px;
- }
-
- .comment-item {
- display: flex;
- padding: 15px 0;
- border-bottom: 1px solid #f0f0f0;
- }
-
- .comment-item:last-child {
- border-bottom: none;
- }
-
- .comment-avatar {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- margin-right: 15px;
- flex-shrink: 0;
- }
-
- .comment-content {
- flex-grow: 1;
- }
-
- .comment-header {
- display: flex;
- justify-content: space-between;
- margin-bottom: 8px;
- }
-
- .comment-author {
- font-weight: bold;
- }
-
- .comment-date {
- color: #888;
- font-size: 14px;
- }
-
- .comment-text {
- line-height: 1.6;
- margin-bottom: 8px;
- }
-
- .comment-images {
- display: flex;
- gap: 10px;
- margin-bottom: 10px;
- }
-
- .comment-image {
- max-width: 200px;
- max-height: 150px;
- border-radius: 4px;
- }
-
- .comment-actions {
- margin-top: 10px;
- }
-
- .reply-form {
- margin-top: 10px;
- display: flex;
- gap: 10px;
- }
-
- .reply-form textarea {
- flex-grow: 1;
- padding: 8px;
- border-radius: 4px;
- border: 1px solid #ddd;
- resize: vertical;
- min-height: 40px;
- }
-
- .submit-reply {
- background: #f5f5f5;
- border: 1px solid #d9d9d9;
- border-radius: 4px;
- padding: 0 15px;
- cursor: pointer;
- align-self: flex-end;
- margin-bottom: 5px;
- }
-
- .reply-list {
- margin-top: 10px;
- padding-left: 15px;
- border-left: 2px solid #f0f0f0;
- }
-
- .reply-item {
- display: flex;
- margin-top: 10px;
- }
-
- .reply-avatar {
- width: 30px;
- height: 30px;
- border-radius: 50%;
- margin-right: 10px;
- }
-
- .reply-content {
- flex-grow: 1;
- }
-
- .reply-header {
- display: flex;
- gap: 10px;
- margin-bottom: 5px;
- }
-
- .reply-author {
- font-weight: bold;
- font-size: 14px;
- }
-
- .reply-date {
- color: #888;
- font-size: 12px;
- }
-
- .reply-text {
- font-size: 14px;
- line-height: 1.5;
- }
-
- /* 评论项样式 */
-.comment-item {
- display: flex;
- margin-bottom: 20px;
- padding: 15px;
- background: #fff;
- border-radius: 8px;
- box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 20px;
+ font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
-.comment-avatar {
- width: 40px;
- height: 40px;
+/* 返回按钮 - 渐变风格 */
+.back-button {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 16px;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+ color: white;
+ border: none;
+ border-radius: 6px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s;
+ margin-bottom: 25px;
+ box-shadow: 0 2px 8px rgba(30, 60, 114, 0.2);
+}
+
+.back-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
+}
+
+.back-button::before {
+ content: "←";
+}
+
+/* 帖子卡片 - 3D悬浮效果 */
+.help-post {
+ background: white;
+ border-radius: 12px;
+ padding: 25px;
+ margin-bottom: 30px;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+ transition: transform 0.3s, box-shadow 0.3s;
+ position: relative;
+ overflow: hidden;
+}
+
+.help-post:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
+}
+
+.help-post.solved::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 5px;
+ height: 100%;
+ background: linear-gradient(to bottom, #52c41a, #a0d911);
+}
+
+/* 帖子头部 - 圆形头像+渐变背景 */
+.post-header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px;
+ position: relative;
+}
+
+.post-avatar {
+ width: 50px;
+ height: 50px;
border-radius: 50%;
margin-right: 15px;
object-fit: cover;
+ border: 3px solid rgba(30, 60, 114, 0.2);
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: bold;
+ font-size: 20px;
+}
+
+.post-meta {
+ flex: 1;
+}
+
+.post-author {
+ font-weight: 700;
+ color: #1e3c72;
+ font-size: 18px;
+}
+
+.post-date {
+ color: #666;
+ font-size: 14px;
+ margin-top: 3px;
+}
+
+/* 已解决徽章 - 闪光效果 */
+.solved-badge {
+ background: linear-gradient(135deg, #52c41a 0%, #a0d911 100%);
+ color: white;
+ padding: 4px 12px;
+ border-radius: 20px;
+ font-size: 14px;
+ font-weight: 600;
+ position: absolute;
+ right: 0;
+ top: 0;
+ box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
+ animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+ 0% { box-shadow: 0 0 0 0 rgba(82, 196, 26, 0.4); }
+ 70% { box-shadow: 0 0 0 10px rgba(82, 196, 26, 0); }
+ 100% { box-shadow: 0 0 0 0 rgba(82, 196, 26, 0); }
+}
+
+/* 删除按钮 - 危险色 */
+.delete-button {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ padding: 6px 12px;
+ background: linear-gradient(135deg, #ff5e62 0%, #ff2400 100%);
+ color: white;
+ border: none;
+ border-radius: 4px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s;
+}
+
+.delete-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(255, 94, 98, 0.3);
+}
+
+/* 帖子标题 - 渐变文字 */
+.post-title {
+ font-size: 28px;
+ margin: 0 0 20px;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ font-weight: 800;
+}
+
+/* 帖子内容 - 更好的阅读体验 */
+.post-content {
+ line-height: 1.8;
+ color: #333;
+ font-size: 16px;
+ margin-bottom: 25px;
+}
+
+.post-content p {
+ margin-bottom: 15px;
+}
+
+/* 图片容器 - 圆角+阴影 */
+.post-image-container, .comment-image-container {
+ margin: 20px 0;
+ border-radius: 8px;
+ overflow: hidden;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s;
+}
+
+.post-image-container:hover, .comment-image-container:hover {
+ transform: scale(1.02);
+}
+
+.post-image, .comment-image {
+ width: 100%;
+ height: auto;
+ max-height: 500px;
+ object-fit: contain;
+ display: block;
+}
+
+/* 帖子操作按钮 - 悬浮效果 */
+.post-actions {
+ display: flex;
+ gap: 15px;
+ margin-top: 25px;
+}
+
+.like-button, .solve-button {
+ padding: 10px 20px;
+ border: none;
+ border-radius: 6px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.like-button {
+ background: linear-gradient(135deg, #f6f7f9 0%, #e9ebee 100%);
+ color: #666;
+}
+
+.like-button:hover {
+ background: linear-gradient(135deg, #ebedf0 0%, #d8dadf 100%);
+ transform: translateY(-2px);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.like-button.liked {
+ background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
+ color: #1890ff;
+}
+
+.solve-button {
+ background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%);
+ color: #52c41a;
+}
+
+.solve-button:hover {
+ background: linear-gradient(135deg, #e6ffd1 0%, #b7eb8f 100%);
+ transform: translateY(-2px);
+ box-shadow: 0 4px 8px rgba(82, 196, 26, 0.2);
+}
+
+.solve-button.solved {
+ background: linear-gradient(135deg, #52c41a 0%, #a0d911 100%);
+ color: white;
+}
+
+/* 评论区域 */
+.comments-section {
+ background: white;
+ border-radius: 12px;
+ padding: 25px;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+}
+
+.comments-section h2 {
+ font-size: 22px;
+ color: #1e3c72;
+ margin-bottom: 20px;
+ padding-bottom: 10px;
+ border-bottom: 2px solid #f0f2f5;
+}
+
+/* 评论表单 - 现代设计 */
+.comment-form {
+ margin-bottom: 30px;
+}
+
+.comment-form textarea {
+ width: 100%;
+ padding: 15px;
+ border: 2px solid #f0f2f5;
+ border-radius: 8px;
+ resize: vertical;
+ min-height: 100px;
+ margin-bottom: 15px;
+ font-size: 15px;
+ transition: all 0.3s;
+}
+
+.comment-form textarea:focus {
+ border-color: #1e3c72;
+ box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.2);
+ outline: none;
+}
+
+.comment-form button[type="submit"] {
+ padding: 12px 24px;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+ color: white;
+ border: none;
+ border-radius: 6px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s;
+}
+
+.comment-form button[type="submit"]:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
+}
+
+/* 图片上传按钮 - 现代风格 */
+.upload-image-btn {
+ position: relative;
+ margin-bottom: 15px;
+}
+
+.upload-image-btn input[type="file"] {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ border: 0;
+}
+
+.upload-image-btn label {
+ display: inline-block;
+ padding: 8px 16px;
+ background: #f0f2f5;
+ border-radius: 6px;
+ color: #666;
+ font-size: 14px;
+ cursor: pointer;
+ transition: all 0.3s;
+}
+
+.upload-image-btn label:hover {
+ background: #e4e6eb;
+}
+
+/* 评论列表 - 卡片式设计 */
+.comment-list {
+ margin-top: 25px;
+}
+
+.comment-item {
+ display: flex;
+ padding: 20px;
+ margin-bottom: 20px;
+ background: #f9fafc;
+ border-radius: 10px;
+ transition: all 0.3s;
+ position: relative;
+}
+
+.comment-item:hover {
+ background: #f0f4f8;
+ transform: translateX(5px);
+}
+
+.comment-avatar {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ margin-right: 15px;
+ object-fit: cover;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: bold;
+ font-size: 20px;
+ flex-shrink: 0;
}
.comment-content {
@@ -340,163 +363,66 @@
.comment-header {
display: flex;
+ justify-content: space-between;
align-items: center;
- margin-bottom: 8px;
+ margin-bottom: 10px;
}
-.comment-author {
- font-weight: bold;
- margin-right: 10px;
- color: #333;
+.comment-user {
+ font-weight: 700;
+ color: #1e3c72;
}
-.comment-date {
- font-size: 12px;
- color: #999;
+.reply-to {
+ color: #666;
+ font-size: 14px;
+ margin-left: 10px;
+}
+
+.comment-time {
+ color: #888;
+ font-size: 13px;
}
.comment-text {
- margin-bottom: 10px;
- line-height: 1.5;
+ line-height: 1.7;
color: #333;
+ margin-bottom: 15px;
}
.comment-actions {
display: flex;
- align-items: center;
- margin-top: 10px;
+ gap: 15px;
}
-.like-button {
- background: none;
- border: none;
- cursor: pointer;
- color: #666;
- font-size: 14px;
- padding: 4px 8px;
- display: flex;
- align-items: center;
-}
-
-.like-button.liked {
- color: #1877f2;
-}
-
-.like-button:hover {
- text-decoration: underline;
-}
-
-/* 回复控制按钮 */
-.reply-controls {
- margin: 10px 0;
-}
-
-.toggle-replies-btn {
+.comment-actions button {
background: none;
border: none;
color: #666;
- cursor: pointer;
font-size: 14px;
- padding: 4px 8px;
-}
-
-.toggle-replies-btn:hover {
- color: #333;
- text-decoration: underline;
-}
-
-.toggle-replies-btn:disabled {
- color: #ccc;
- cursor: not-allowed;
-}
-
-/* 回复表单 */
-.reply-form {
- margin-top: 10px;
- width: 100%;
-}
-
-.reply-form textarea {
- width: 100%;
- padding: 8px;
- border: 1px solid #ddd;
- border-radius: 4px;
- resize: vertical;
- min-height: 60px;
- margin-bottom: 8px;
-}
-
-.submit-reply {
- background-color: #f0f2f5;
- border: none;
- border-radius: 4px;
- padding: 6px 12px;
cursor: pointer;
- color: #333;
-}
-
-.submit-reply:hover {
- background-color: #e4e6eb;
-}
-
-/* 回复列表 */
-.reply-list {
- margin-left: 55px; /* 头像宽度 + 边距 */
- border-left: 2px solid #eee;
- padding-left: 15px;
- margin-top: 15px;
-}
-
-.reply-item {
- display: flex;
- margin-bottom: 15px;
- padding: 12px;
- background: #f9f9f9;
- border-radius: 6px;
-}
-
-.reply-avatar {
- width: 32px;
- height: 32px;
- border-radius: 50%;
- margin-right: 10px;
- object-fit: cover;
-}
-
-.reply-content {
- flex: 1;
-}
-
-.reply-header {
+ transition: all 0.3s;
+ padding: 5px 10px;
+ border-radius: 4px;
display: flex;
align-items: center;
- margin-bottom: 5px;
+ gap: 5px;
}
-.reply-author {
- font-weight: bold;
- margin-right: 8px;
- font-size: 14px;
- color: #333;
+.comment-actions button:hover {
+ color: #1e3c72;
+ background: rgba(30, 60, 114, 0.1);
}
-.reply-date {
- font-size: 12px;
- color: #999;
+.delete-comment-btn {
+ color: #ff4d4f !important;
}
-.reply-text {
- font-size: 14px;
- line-height: 1.4;
- color: #333;
- margin-bottom: 5px;
+.delete-comment-btn:hover {
+ background: rgba(255, 77, 79, 0.1) !important;
}
-.reply-actions {
- margin-top: 5px;
-}
-
-/* 回复弹窗样式 */
+/* 回复弹窗 - 现代化设计 */
.reply-modal-overlay {
position: fixed;
top: 0;
@@ -508,79 +434,130 @@
justify-content: center;
align-items: center;
z-index: 1000;
+ backdrop-filter: blur(5px);
}
.reply-modal {
background: white;
- padding: 20px;
- border-radius: 8px;
+ padding: 25px;
+ border-radius: 12px;
width: 500px;
max-width: 90%;
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+ position: relative;
}
-.reply-modal h3 {
- margin-top: 0;
- margin-bottom: 15px;
+.modal-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+}
+
+.modal-header h3 {
+ margin: 0;
+ color: #1e3c72;
+ font-size: 20px;
+}
+
+.close-modal {
+ background: none;
+ border: none;
+ font-size: 24px;
+ color: #666;
+ cursor: pointer;
+ transition: all 0.3s;
+}
+
+.close-modal:hover {
+ color: #1e3c72;
+ transform: rotate(90deg);
}
.reply-modal textarea {
width: 100%;
- padding: 10px;
- border: 1px solid #ddd;
- border-radius: 4px;
+ padding: 15px;
+ border: 2px solid #f0f2f5;
+ border-radius: 8px;
resize: vertical;
- min-height: 100px;
+ min-height: 120px;
margin-bottom: 15px;
+ font-size: 15px;
+ transition: all 0.3s;
+}
+
+.reply-modal textarea:focus {
+ border-color: #1e3c72;
+ box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.2);
+ outline: none;
}
.modal-actions {
display: flex;
justify-content: flex-end;
- gap: 10px;
+ gap: 15px;
}
-.cancel-button {
+.cancel-btn {
+ padding: 10px 20px;
background: #f5f5f5;
- border: 1px solid #d9d9d9;
- border-radius: 4px;
- padding: 8px 16px;
+ color: #666;
+ border: none;
+ border-radius: 6px;
+ font-weight: 600;
cursor: pointer;
+ transition: all 0.3s;
}
-.submit-button {
- background: #1890ff;
+.cancel-btn:hover {
+ background: #e0e0e0;
+}
+
+.submit-btn {
+ padding: 10px 20px;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: white;
border: none;
- border-radius: 4px;
- padding: 8px 16px;
+ border-radius: 6px;
+ font-weight: 600;
cursor: pointer;
+ transition: all 0.3s;
}
-.post-image-container {
- width: 100%;
- max-width: 500px; /* 最大宽度 */
- margin: 10px 0;
+.submit-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
}
-.post-image {
- width: 100%;
- height: auto;
- max-height: 400px; /* 最大高度 */
- object-fit: contain; /* 保持比例完整显示图片 */
- border-radius: 4px;
+/* 响应式设计 */
+@media (max-width: 768px) {
+ .help-detail-container {
+ padding: 15px;
+ }
+
+ .post-title {
+ font-size: 24px;
+ }
+
+ .post-actions {
+ flex-direction: column;
+ }
+
+ .comment-item {
+ flex-direction: column;
+ }
+
+ .comment-avatar {
+ margin-bottom: 15px;
+ }
}
-.comment-image-container {
- width: 100%;
- max-width: 500px; /* 最大宽度 */
- margin: 10px 0;
+/* 动画效果 */
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(10px); }
+ to { opacity: 1; transform: translateY(0); }
}
-.comment-image {
- width: 100%;
- height: auto;
- max-height: 400px; /* 最大高度 */
- object-fit: contain; /* 保持比例完整显示图片 */
- border-radius: 4px;
-}
-
+.help-post, .comments-section {
+ animation: fadeIn 0.5s ease-out forwards;
+}
\ No newline at end of file
diff --git a/src/components/HelpDetail.jsx b/src/components/HelpDetail.jsx
index 1e35aec..e654200 100644
--- a/src/components/HelpDetail.jsx
+++ b/src/components/HelpDetail.jsx
@@ -324,7 +324,7 @@
return (
<div className="help-detail-container">
<button className="back-button" onClick={handleBack}>
- ← 返回求助区
+ 返回求助区
</button>
<div className={`help-post ${post.isSolved ? 'solved' : ''}`}>
diff --git a/src/components/Personal/ActionCard.jsx b/src/components/Personal/ActionCard.jsx
index 7d3cd4f..0a62b1b 100644
--- a/src/components/Personal/ActionCard.jsx
+++ b/src/components/Personal/ActionCard.jsx
@@ -1,23 +1,23 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+// import React from 'react';
+// import PropTypes from 'prop-types';
-const ActionCard = ({ title, subtitle, icon, onClick }) => {
- return (
- <div className="action-card" onClick={onClick}>
- {icon && <div className="action-icon">{icon}</div>}
- <div className="action-content">
- <h3>{title}</h3>
- <p>{subtitle}</p>
- </div>
- </div>
- );
-};
+// const ActionCard = ({ title, subtitle, icon, onClick }) => {
+// return (
+// <div className="action-card" onClick={onClick}>
+// {icon && <div className="action-icon">{icon}</div>}
+// <div className="action-content">
+// <h3>{title}</h3>
+// <p>{subtitle}</p>
+// </div>
+// </div>
+// );
+// };
-ActionCard.propTypes = {
- title: PropTypes.string.isRequired,
- subtitle: PropTypes.string,
- icon: PropTypes.node,
- onClick: PropTypes.func
-};
+// ActionCard.propTypes = {
+// title: PropTypes.string.isRequired,
+// subtitle: PropTypes.string,
+// icon: PropTypes.node,
+// onClick: PropTypes.func
+// };
-export default ActionCard;
\ No newline at end of file
+// export default ActionCard;
\ No newline at end of file
diff --git a/src/components/Personal/Exchange.jsx b/src/components/Personal/Exchange.jsx
index 1e5b2e8..f6766ae 100644
--- a/src/components/Personal/Exchange.jsx
+++ b/src/components/Personal/Exchange.jsx
@@ -88,7 +88,7 @@
return (
<div className="subpage-container">
<button className="back-button" onClick={handleBack}>
- ← 返回个人中心
+ 返回个人中心
</button>
<div className="error">错误: {error}</div>
</div>
@@ -98,7 +98,7 @@
return (
<div className="subpage-container">
<button className="back-button" onClick={handleBack}>
- ← 返回个人中心
+ 返回个人中心
</button>
<h2 className="page-title">兑换区</h2>
diff --git a/src/components/Personal/Exchange.test.jsx b/src/components/Personal/Exchange.test.jsx
index 20fe641..31abe48 100644
--- a/src/components/Personal/Exchange.test.jsx
+++ b/src/components/Personal/Exchange.test.jsx
@@ -125,7 +125,7 @@
);
await waitFor(() => {
- const backButton = screen.getByText(/← 返回个人中心/);
+ const backButton = screen.getByText(/返回个人中心/);
fireEvent.click(backButton);
expect(mockNavigate).toHaveBeenCalledWith('/personal', {
diff --git a/src/components/Personal/Notice.jsx b/src/components/Personal/Notice.jsx
index 55bc955..05198f9 100644
--- a/src/components/Personal/Notice.jsx
+++ b/src/components/Personal/Notice.jsx
@@ -1,57 +1,106 @@
-import React from 'react';
-import { useNavigate,useLocation } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { notificationApi } from '../../api/notification';
import './personalSubpage.css';
const Notice = ({ onLogout }) => {
const navigate = useNavigate();
const location = useLocation();
- // 模拟数据
- const [notices] = React.useState([
- {
- id: 1,
- title: '积分奖励到账',
- content: '您上传的资源《盗梦空间》获得100积分奖励',
- date: '2023-10-20',
- read: false
- },
- {
- id: 2,
- title: '系统通知',
- content: '服务器将于今晚2:00-4:00进行维护',
- date: '2023-10-18',
- read: true
+ const [notices, setNotices] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ // 获取当前用户ID（根据你的实际应用获取方式）
+ const userId = localStorage.getItem('username') || 'default-user-id';
+
+ // 获取通知列表
+ const fetchNotifications = async () => {
+ try {
+ setLoading(true);
+ const response = await notificationApi.getNotifications(userId);
+ setNotices(response.data.notifications || []);
+ } catch (err) {
+ setError('获取通知失败，请稍后重试');
+ console.error(err);
+ } finally {
+ setLoading(false);
}
- ]);
+ };
+
+ useEffect(() => {
+ fetchNotifications();
+ }, [userId]);
const handleBack = () => {
- // 返回个人中心，并携带来源标记
navigate('/personal', {
state: {
- fromSubpage: true, // 标记来自子页面
- dashboardTab: location.state?.dashboardTab // 保留Dashboard的标签页状态
+ fromSubpage: true,
+ dashboardTab: location.state?.dashboardTab
},
- replace: true // 替换当前历史记录
+ replace: true
});
};
+ // 标记为已读处理
+ const handleMarkAsRead = async (id) => {
+ try {
+ const result = await notificationApi.markNotificationAsRead(id);
+
+ if (result.success) {
+ // 使用后端返回的更新后通知替换本地状态
+ setNotices(prevNotices =>
+ prevNotices.map(notice =>
+ notice.id === id ? result.notification : notice
+ )
+ );
+ } else {
+ setError(result.message || '标记为已读失败');
+ }
+ } catch (err) {
+ console.error('标记为已读失败:', err);
+ setError('标记为已读失败，请稍后重试');
+ }
+ };
+
+ const handleItemClick = (notice) => {
+ if (!notice.isRead) {
+ handleMarkAsRead(notice.id);
+ }
+ // 这里可以添加其他点击逻辑，比如展开详情等
+ };
+
return (
<div className="subpage-container">
- <button className="back-button" onClick={(handleBack)}>
- ← 返回个人中心
+ <button className="back-button" onClick={handleBack}>
+ 返回个人中心
</button>
<h2 className="page-title">消息通知</h2>
+ {loading && <div className="loading-message">加载中...</div>}
+ {error && <div className="error-message">{error}</div>}
+
<div className="notice-list">
- {notices.map(notice => (
- <div key={notice.id} className={`list-item ${!notice.read ? 'unread' : ''}`}>
- <div className="notice-header">
- <h3>{notice.title}</h3>
- <span className="notice-date">{notice.date}</span>
+ {notices.length === 0 && !loading ? (
+ <div className="empty-notice">暂无通知</div>
+ ) : (
+ notices.map(notice => (
+ <div
+ key={notice.id}
+ className={`list-item ${!notice.isRead ? 'unread' : ''}`}
+ onClick={() => handleItemClick(notice)}
+ >
+ <div className="notice-header">
+ <h3>{notice.title}</h3>
+ <span className="notice-date">
+ {new Date(notice.date).toLocaleDateString()}
+ {!notice.isRead && <span className="unread-badge">未读</span>}
+ </span>
+ </div>
+ <p className="notice-content">{notice.content}</p>
</div>
- <p className="notice-content">{notice.content}</p>
- </div>
- ))}
+ ))
+ )}
</div>
</div>
);
diff --git a/src/components/Personal/Personal.css b/src/components/Personal/Personal.css
index 28a1adb..69006d2 100644
--- a/src/components/Personal/Personal.css
+++ b/src/components/Personal/Personal.css
@@ -1,217 +1,95 @@
-/* Personal.css */
+/* Personal.css - 现代化设计 */
.personal-container {
- max-width: 800px;
- margin: 0 auto;
- padding: 20px;
- }
-
- .back-button {
- background: none;
- border: none;
- color: #1890ff;
- cursor: pointer;
- font-size: 16px;
- margin-bottom: 20px;
- padding: 5px 0;
- }
-
- .profile-card {
- background: #fff;
- border-radius: 8px;
- padding: 20px;
- margin-bottom: 20px;
- box-shadow: 0 1px 3px rgba(0,0,0,0.1);
- }
-
- .profile-header {
- display: flex;
- align-items: center;
- margin-bottom: 20px;
- }
-
- .profile-avatar {
- width: 80px;
- height: 80px;
- border-radius: 50%;
- margin-right: 20px;
- object-fit: cover;
- }
-
- .profile-info {
- flex-grow: 1;
- }
-
- .username {
- font-size: 24px;
- margin: 0 0 5px;
- }
-
- .user-meta {
- display: flex;
- gap: 15px;
- color: #666;
- font-size: 14px;
- }
-
- .stats-grid {
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- gap: 15px;
- }
-
- .stat-item {
- background: #f5f5f5;
- border-radius: 6px;
- padding: 15px;
- text-align: center;
- }
-
- .stat-label {
- font-size: 14px;
- color: #666;
- margin-bottom: 5px;
- }
-
- .stat-value {
- font-size: 18px;
- font-weight: bold;
- }
-
- .quota-card {
- background: #fff;
- border-radius: 8px;
- padding: 20px;
- margin-bottom: 20px;
- box-shadow: 0 1px 3px rgba(0,0,0,0.1);
- }
-
- .quota-card h3 {
- margin-top: 0;
- margin-bottom: 15px;
- }
-
- .quota-info {
- display: flex;
- justify-content: space-between;
- margin-bottom: 10px;
- }
-
- .quota-used {
- color: #1890ff;
- }
-
- .quota-remaining {
- color: #52c41a;
- }
-
- .progress-bar {
- height: 10px;
- background: #f0f0f0;
- border-radius: 5px;
- margin-bottom: 10px;
- overflow: hidden;
- }
-
- .progress-fill {
- height: 100%;
- background: #1890ff;
- border-radius: 5px;
- transition: width 0.3s ease;
- }
-
- .quota-total {
- text-align: right;
- color: #666;
- font-size: 14px;
- }
-
- .action-cards {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 15px;
- }
-
- .action-card {
- background: #fff;
- border-radius: 8px;
- padding: 20px;
- box-shadow: 0 1px 3px rgba(0,0,0,0.1);
- cursor: pointer;
- transition: transform 0.2s ease;
- }
-
- .action-card:hover {
- transform: translateY(-3px);
- box-shadow: 0 4px 8px rgba(0,0,0,0.1);
- }
-
- .action-card h3 {
- margin-top: 0;
- color: #1890ff;
- }
-
- .action-card p {
- color: #666;
- margin-bottom: 0;
- }
-
- .subpage-container {
- margin-top: 20px;
- border-top: 1px solid #f0f0f0;
- padding-top: 20px;
- }
-
-
- /* Personal.css */
-/* ... 其他已有样式 ... */
-
-/* 下载进度卡片样式 */
-.progress-card {
- background: #fff;
- border-radius: 8px;
- padding: 20px;
- margin-bottom: 20px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ max-width: 1000px;
+ margin: 0 auto;
+ padding: 25px;
+ font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+ animation: fadeIn 0.5s ease-out forwards;
}
-.download-task {
- margin-bottom: 15px;
+/* 返回按钮 - 渐变风格 */
+.back-button {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 16px;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+ color: white;
+ border: none;
+ border-radius: 6px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s;
+ margin-bottom: 30px;
+ box-shadow: 0 2px 8px rgba(30, 60, 114, 0.2);
}
-.task-info {
- display: flex;
- justify-content: space-between;
- margin-bottom: 5px;
+.back-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
}
-.task-id {
- font-size: 14px;
- color: #666;
+.back-button::before {
+ content: "←";
}
-.task-progress {
- font-size: 14px;
- font-weight: bold;
- color: #1890ff;
-}
-
-.progress-bar {
- height: 8px;
- background: #f0f0f0;
- border-radius: 4px;
+/* 用户资料卡片 - 3D效果 */
+.profile-card {
+ background: white;
+ border-radius: 12px;
+ padding: 25px;
+ margin-bottom: 25px;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+ transition: transform 0.3s, box-shadow 0.3s;
+ position: relative;
overflow: hidden;
}
-.progress-fill {
- height: 100%;
- background: #1890ff;
- border-radius: 4px;
- transition: width 0.3s ease;
+.profile-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}
+.profile-header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 25px;
+}
+
+.profile-avatar {
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+ margin-right: 25px;
+ object-fit: cover;
+ border: 4px solid rgba(30, 60, 114, 0.1);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s;
+}
+
+.profile-avatar:hover {
+ transform: scale(1.05);
+}
+
+.username {
+ font-size: 28px;
+ margin: 0 0 10px;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ font-weight: 800;
+}
+
+.user-meta {
+ display: flex;
+ gap: 20px;
+}
.user-meta span {
- margin-right: 15px;
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ font-size: 15px;
color: #666;
}
@@ -219,3 +97,221 @@
color: #ff9800;
font-weight: bold;
}
+
+/* 统计数据网格 - 卡片式设计 */
+.stats-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 20px;
+}
+
+.stat-item {
+ background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
+ border-radius: 10px;
+ padding: 20px;
+ text-align: center;
+ transition: transform 0.3s;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+}
+
+.stat-item:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+}
+
+.stat-label {
+ font-size: 15px;
+ color: #666;
+ margin-bottom: 10px;
+}
+
+.stat-value {
+ font-size: 22px;
+ font-weight: 700;
+ color: #1e3c72;
+}
+
+/* 下载额度卡片 - 渐变色 */
+.quota-card {
+ background: white;
+ border-radius: 12px;
+ padding: 25px;
+ margin-bottom: 25px;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+}
+
+.quota-card h3 {
+ margin-top: 0;
+ margin-bottom: 20px;
+ color: #1e3c72;
+ font-size: 20px;
+}
+
+.quota-info {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 15px;
+ font-size: 15px;
+}
+
+.quota-used {
+ color: #ff4d4f;
+ font-weight: 600;
+}
+
+.quota-remaining {
+ color: #52c41a;
+ font-weight: 600;
+}
+
+.progress-bar {
+ height: 12px;
+ background: #f0f2f5;
+ border-radius: 6px;
+ margin-bottom: 15px;
+ overflow: hidden;
+}
+
+.progress-fill {
+ height: 100%;
+ border-radius: 6px;
+ transition: width 0.5s ease;
+}
+
+.quota-total {
+ text-align: right;
+ color: #666;
+ font-size: 14px;
+}
+
+/* 下载进度卡片 */
+.progress-card {
+ background: white;
+ border-radius: 12px;
+ padding: 25px;
+ margin-bottom: 25px;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+}
+
+.progress-card h3 {
+ margin-top: 0;
+ margin-bottom: 20px;
+ color: #1e3c72;
+ font-size: 20px;
+}
+
+.download-task {
+ margin-bottom: 20px;
+}
+
+.task-info {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 8px;
+}
+
+.task-id {
+ font-size: 15px;
+ color: #666;
+}
+
+.task-progress {
+ font-size: 15px;
+ font-weight: 600;
+ color: #1890ff;
+}
+
+/* 功能卡片区 - 网格布局 */
+.action-cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 20px;
+ margin-bottom: 30px;
+}
+
+.action-card {
+ background: white;
+ border-radius: 12px;
+ padding: 25px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+ cursor: pointer;
+ transition: all 0.3s;
+ border: 1px solid rgba(30, 60, 114, 0.1);
+ text-align: center;
+}
+
+.action-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+ border-color: rgba(30, 60, 114, 0.2);
+}
+
+.action-card h3 {
+ margin-top: 0;
+ margin-bottom: 15px;
+ color: #1e3c72;
+ font-size: 20px;
+}
+
+.action-card p {
+ color: #666;
+ margin-bottom: 0;
+ font-size: 15px;
+}
+
+/* 子页面容器 */
+.subpage-container {
+ margin-top: 30px;
+ border-top: 2px solid #f0f2f5;
+ padding-top: 30px;
+}
+
+/* 加载和错误状态 */
+.loading, .error {
+ text-align: center;
+ padding: 50px;
+ font-size: 18px;
+ background: white;
+ border-radius: 12px;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+ margin: 20px 0;
+}
+
+.error {
+ color: #ff4d4f;
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(10px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+ .personal-container {
+ padding: 15px;
+ }
+
+ .profile-header {
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .profile-avatar {
+ margin-right: 0;
+ margin-bottom: 15px;
+ }
+
+ .user-meta {
+ justify-content: center;
+ }
+
+ .stats-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .action-cards {
+ grid-template-columns: 1fr;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Personal/Personal.jsx b/src/components/Personal/Personal.jsx
index 8c60baf..8199b4b 100644
--- a/src/components/Personal/Personal.jsx
+++ b/src/components/Personal/Personal.jsx
@@ -141,7 +141,7 @@
<div className="personal-container">
{/* 返回按钮 */}
<button className="back-button" onClick={handleBack}>
- ← 返回
+ 返回
</button>
{/* 用户基本信息卡片 */}
diff --git a/src/components/Personal/Setting.jsx b/src/components/Personal/Setting.jsx
index 9ba07e8..5b6f730 100644
--- a/src/components/Personal/Setting.jsx
+++ b/src/components/Personal/Setting.jsx
@@ -87,7 +87,7 @@
return (
<div className="subpage-container">
<button className="back-button" onClick={handleBack}>
- ← 返回个人中心
+ 返回个人中心
</button>
<h2 className="page-title">个人设置</h2>
diff --git a/src/components/Personal/Setting.test.jsx b/src/components/Personal/Setting.test.jsx
index e8b1cc0..02011be 100644
--- a/src/components/Personal/Setting.test.jsx
+++ b/src/components/Personal/Setting.test.jsx
@@ -149,7 +149,7 @@
</MemoryRouter>
);
- const backButton = screen.getByText(/← 返回个人中心/);
+ const backButton = screen.getByText(/返回个人中心/);
fireEvent.click(backButton);
expect(mockNavigate).toHaveBeenCalledWith('/personal', {
diff --git a/src/components/Personal/Upload.jsx b/src/components/Personal/Upload.jsx
index 2d91b30..336f721 100644
--- a/src/components/Personal/Upload.jsx
+++ b/src/components/Personal/Upload.jsx
@@ -112,7 +112,7 @@
return (
<div className="subpage-container">
<button className="back-button" onClick={handleBack}>
- ← 返回个人中心
+ 返回个人中心
</button>
<h2 className="page-title">上传记录</h2>
diff --git a/src/components/Personal/personalSubpage.css b/src/components/Personal/personalSubpage.css
index 2ba8687..ff587e2 100644
--- a/src/components/Personal/personalSubpage.css
+++ b/src/components/Personal/personalSubpage.css
@@ -1,336 +1,553 @@
+/* personalSubpage.css - 现代化设计 */
+
/* 上传记录表格样式 */
.uploads-table {
width: 100%;
- border-collapse: collapse;
- margin-top: 20px;
+ border-collapse: separate;
+ border-spacing: 0;
+ margin-top: 25px;
+ background: white;
+ border-radius: 12px;
+ overflow: hidden;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.uploads-table th, .uploads-table td {
- padding: 12px 15px;
+ padding: 15px;
text-align: left;
- border-bottom: 1px solid #e0e0e0;
+ border-bottom: 1px solid #f0f2f5;
}
.uploads-table th {
- background-color: #f5f5f5;
+ background-color: #1e3c72;
+ color: white;
font-weight: 600;
+ text-transform: uppercase;
+ font-size: 14px;
}
-.list-item:hover {
- background-color: #f9f9f9;
+.uploads-table tr:last-child td {
+ border-bottom: none;
+}
+
+.uploads-table tr:hover td {
+ background-color: #f9fafc;
}
/* 操作按钮样式 */
.action-btn {
- padding: 6px 12px;
+ padding: 8px 16px;
border: none;
- border-radius: 4px;
+ border-radius: 6px;
cursor: pointer;
font-size: 14px;
- transition: background-color 0.2s;
+ font-weight: 600;
+ transition: all 0.3s;
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
}
.delete-btn {
- background-color: #ff4d4f;
+ background: linear-gradient(135deg, #ff4d4f 0%, #f5222d 100%);
color: white;
}
.delete-btn:hover {
- background-color: #ff7875;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
}
/* 分页控件样式 */
.pagination {
- margin-top: 20px;
+ margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
- gap: 15px;
-}
-
-.pagination button {
- padding: 6px 12px;
- border: 1px solid #d9d9d9;
- background-color: #fff;
- border-radius: 4px;
- cursor: pointer;
-}
-
-.pagination button:disabled {
- color: #d9d9d9;
- cursor: not-allowed;
-}
-
-.pagination button:not(:disabled):hover {
- border-color: #1890ff;
- color: #1890ff;
-}
-
-/* 分页控件样式 */
-.pagination {
- margin-top: 20px;
- display: flex;
- justify-content: center;
- align-items: center;
- gap: 8px;
+ gap: 10px;
flex-wrap: wrap;
}
.page-nav, .page-number {
- padding: 6px 12px;
+ padding: 8px 16px;
border: 1px solid #d9d9d9;
- background-color: #fff;
- border-radius: 4px;
+ background-color: white;
+ color:#333;
+ border-radius: 6px;
cursor: pointer;
- min-width: 32px;
+ min-width: 40px;
text-align: center;
+ transition: all 0.3s;
+ font-weight: 600;
}
.page-nav:disabled, .page-number:disabled {
- color: #d9d9d9;
+ color: #070202;
cursor: not-allowed;
}
.page-nav:not(:disabled):hover,
.page-number:not(:disabled):hover {
- border-color: #1890ff;
- color: #1890ff;
+ border-color: #1e3c72;
+ color: #1e3c72;
+ transform: translateY(-2px);
}
.page-number.active {
- background-color: #1890ff;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: white;
- border-color: #1890ff;
+ border-color: #1e3c72;
}
.ellipsis {
- padding: 0 8px;
+ padding: 0 12px;
}
.page-info {
display: flex;
align-items: center;
- gap: 8px;
- margin-left: 15px;
+ gap: 10px;
+ margin-left: 20px;
}
.page-info input {
- width: 50px;
- padding: 4px;
+ width: 60px;
+ padding: 8px;
border: 1px solid #d9d9d9;
- border-radius: 4px;
+ border-radius: 6px;
text-align: center;
+ font-weight: 600;
}
.page-info input:focus {
outline: none;
- border-color: #1890ff;
-}
-
-/* 调整表格列宽 */
-.uploads-table th:nth-child(1),
-.uploads-table td:nth-child(1) {
- width: 30%;
-}
-
-.uploads-table th:nth-child(2),
-.uploads-table td:nth-child(2) {
- width: 15%;
-}
-
-.uploads-table th:nth-child(3),
-.uploads-table td:nth-child(3) {
- width: 20%;
-}
-
-.uploads-table th:nth-child(4),
-.uploads-table td:nth-child(4) {
- width: 15%;
- text-align: center;
-}
-
-.uploads-table th:nth-child(5),
-.uploads-table td:nth-child(5) {
- width: 20%;
- text-align: center;
+ border-color: #1e3c72;
+ box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.2);
}
/* 兑换区样式 */
.exchange-section {
- margin-top: 20px;
- padding: 20px;
- background-color: #f9f9f9;
- border-radius: 8px;
+ margin-top: 30px;
+ padding: 25px;
+ background: white;
+ border-radius: 12px;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.exchange-card {
- margin-bottom: 20px;
- padding: 15px;
- background-color: white;
- border-radius: 6px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ margin-bottom: 25px;
+ padding: 20px;
+ background: #f9fafc;
+ border-radius: 10px;
+ border: 1px solid #f0f2f5;
+ transition: all 0.3s;
+}
+
+.exchange-card:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.exchange-card h4 {
margin-top: 0;
- color: #333;
+ color: #1e3c72;
+ font-size: 18px;
}
.exchange-card p {
color: #666;
- margin-bottom: 15px;
+ margin-bottom: 20px;
+ font-size: 15px;
}
.exchange-btn {
- padding: 8px 16px;
- background-color: #1890ff;
+ padding: 10px 20px;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: white;
border: none;
- border-radius: 4px;
+ border-radius: 6px;
cursor: pointer;
- transition: background-color 0.3s;
+ font-weight: 600;
+ transition: all 0.3s;
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
}
.exchange-btn:hover {
- background-color: #40a9ff;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
}
.exchange-btn:disabled {
- background-color: #d9d9d9;
+ background: #d9d9d9;
cursor: not-allowed;
+ transform: none;
+ box-shadow: none;
}
.exchange-input-group {
display: flex;
- gap: 10px;
- margin-top: 10px;
+ gap: 15px;
+ margin-top: 15px;
}
.exchange-input-group input {
flex: 1;
- padding: 8px;
+ padding: 10px;
border: 1px solid #d9d9d9;
- border-radius: 4px;
+ border-radius: 6px;
+ font-size: 15px;
+}
+
+.exchange-input-group input:focus {
+ outline: none;
+ border-color: #1e3c72;
+ box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.2);
}
.invite-code-list {
- margin-top: 20px;
+ margin-top: 25px;
}
.invite-code-list ul {
list-style: none;
padding: 0;
+ margin: 0;
}
.invite-code-list li {
display: flex;
justify-content: space-between;
- padding: 10px;
- border-bottom: 1px solid #eee;
+ align-items: center;
+ padding: 15px;
+ border-bottom: 1px solid #f0f2f5;
+ transition: all 0.3s;
+}
+
+.invite-code-list li:hover {
+ background-color: #f9fafc;
}
.invite-code-list .code {
font-family: monospace;
+ font-size: 16px;
+ color: #1e3c72;
}
.invite-code-list .status {
- padding: 2px 6px;
- border-radius: 3px;
- font-size: 12px;
+ padding: 4px 12px;
+ border-radius: 20px;
+ font-size: 13px;
+ font-weight: 600;
}
.invite-code-list .status.available {
- background-color: #f6ffed;
- color: #52c41a;
- border: 1px solid #b7eb8f;
+ background: linear-gradient(135deg, #52c41a 0%, #a0d911 100%);
+ color: white;
}
.invite-code-list .status.used {
+ background: linear-gradient(135deg, #ff4d4f 0%, #f5222d 100%);
+ color: white;
+}
+
+/* 设置页面样式 */
+.setting-section {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 25px;
+ background: white;
+ border-radius: 12px;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+}
+
+.user-info-card, .password-form-card {
+ background: #f9fafc;
+ border-radius: 10px;
+ padding: 25px;
+ margin-bottom: 25px;
+ border: 1px solid #f0f2f5;
+}
+
+.info-item {
+ display: flex;
+ margin-bottom: 15px;
+ align-items: center;
+}
+
+.info-item label {
+ font-weight: 600;
+ width: 150px;
+ color: #1e3c72;
+}
+
+.info-item span {
+ flex: 1;
+ color: #333;
+}
+
+.info-note {
+ color: #666;
+ font-size: 14px;
+ margin-top: 15px;
+ line-height: 1.6;
+}
+
+.form-group {
+ margin-bottom: 20px;
+}
+
+.form-group label {
+ display: block;
+ margin-bottom: 8px;
+ font-weight: 600;
+ color: #1e3c72;
+}
+
+.form-group input {
+ width: 100%;
+ padding: 12px;
+ border: 1px solid #d9d9d9;
+ border-radius: 6px;
+ box-sizing: border-box;
+ font-size: 15px;
+ transition: all 0.3s;
+}
+
+.form-group input:focus {
+ outline: none;
+ border-color: #1e3c72;
+ box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.2);
+}
+
+.submit-button {
+ padding: 12px 24px;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+ color: white;
+ border: none;
+ border-radius: 6px;
+ cursor: pointer;
+ font-size: 16px;
+ font-weight: 600;
+ transition: all 0.3s;
+}
+
+.submit-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
+}
+
+.submit-button:disabled {
+ background: #d9d9d9;
+ cursor: not-allowed;
+ transform: none;
+ box-shadow: none;
+}
+
+.error-message {
+ color: #ff4d4f;
+ margin-bottom: 20px;
+ padding: 10px;
+ background: #fff2f0;
+ border-radius: 6px;
+ border: 1px solid #ffccc7;
+}
+
+.success-message {
+ color: #52c41a;
+ margin-bottom: 20px;
+ padding: 10px;
+ background: #f6ffed;
+ border-radius: 6px;
+ border: 1px solid #b7eb8f;
+}
+
+.subpage-container {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 25px;
+ animation: fadeIn 0.5s ease-out forwards;
+}
+
+.back-button {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 16px;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+ color: white;
+ border: none;
+ border-radius: 6px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s;
+ margin-bottom: 30px;
+ box-shadow: 0 2px 8px rgba(30, 60, 114, 0.2);
+}
+
+.back-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
+}
+
+.back-button::before {
+ content: "←";
+}
+
+.page-title {
+ font-size: 24px;
+ margin: 0 0 25px;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ font-weight: 800;
+ padding-bottom: 10px;
+ border-bottom: 2px solid #f0f2f5;
+}
+
+.loading-message, .error-message {
+ padding: 15px;
+ border-radius: 8px;
+ margin-bottom: 20px;
+ text-align: center;
+}
+
+.loading-message {
+ background-color: #f5f5f5;
+ color: #666;
+}
+
+.error-message {
background-color: #fff2f0;
color: #ff4d4f;
border: 1px solid #ffccc7;
}
-
-/* personalSubpage.css 中添加以下样式 */
-
-.setting-section {
- max-width: 600px;
- margin: 0 auto;
- padding: 20px;
+.notice-list {
+ background: white;
+ border-radius: 12px;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+ overflow: hidden;
}
-.user-info-card, .password-form-card {
- background: #fff;
- border-radius: 8px;
- padding: 20px;
- margin-bottom: 20px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.info-item {
- display: flex;
- margin-bottom: 10px;
-}
-
-.info-item label {
- font-weight: bold;
- width: 100px;
-}
-
-.info-item span {
- flex: 1;
-}
-
-.info-note {
+.empty-notice {
+ text-align: center;
+ padding: 50px 20px;
color: #666;
- font-size: 0.9em;
- margin-top: 10px;
-}
-
-.form-group {
- margin-bottom: 15px;
-}
-
-.form-group label {
- display: block;
- margin-bottom: 5px;
- font-weight: bold;
-}
-
-.form-group input {
- width: 100%;
- padding: 8px;
- border: 1px solid #ddd;
- border-radius: 4px;
- box-sizing: border-box;
-}
-
-.submit-button {
- background-color: #4CAF50;
- color: white;
- padding: 10px 15px;
- border: none;
- border-radius: 4px;
- cursor: pointer;
font-size: 16px;
}
-.submit-button:hover {
- background-color: #45a049;
+.list-item {
+ padding: 20px;
+ border-bottom: 1px solid #f0f2f5;
+ transition: all 0.3s;
+ cursor: pointer;
}
-.submit-button:disabled {
- background-color: #cccccc;
- cursor: not-allowed;
+.list-item:last-child {
+ border-bottom: none;
}
-.error-message {
- color: #f44336;
- margin-bottom: 15px;
+.list-item:hover {
+ background-color: #f9fafc;
+ transform: translateX(5px);
}
-.success-message {
- color: #4CAF50;
- margin-bottom: 15px;
+.list-item.unread {
+ background-color: #f0f7ff;
+}
+
+.notice-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 10px;
+}
+
+.notice-header h3 {
+ margin: 0;
+ font-size: 18px;
+ color: #1e3c72;
+ font-weight: 600;
+}
+
+.notice-date {
+ font-size: 14px;
+ color: #888;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.unread-badge {
+ background: #ff4d4f;
+ color: white;
+ font-size: 12px;
+ padding: 2px 8px;
+ border-radius: 10px;
+ font-weight: 500;
+}
+
+.notice-content {
+ margin: 0;
+ color: #333;
+ line-height: 1.6;
+ font-size: 15px;
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(10px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+ .uploads-table {
+ display: block;
+ overflow-x: auto;
+ }
+
+ .exchange-input-group {
+ flex-direction: column;
+ }
+
+ .info-item {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .info-item label {
+ width: 100%;
+ margin-bottom: 5px;
+ }
+
+ .pagination {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .page-info {
+ margin-left: 0;
+ margin-top: 15px;
+ }
+ .subpage-container {
+ padding: 15px;
+ }
+
+ .notice-header {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 5px;
+ }
+
+ .list-item:hover {
+ transform: none;
+ }
}
\ No newline at end of file
diff --git a/src/components/RequestDetail.css b/src/components/RequestDetail.css
index 0d47b71..6d544c9 100644
--- a/src/components/RequestDetail.css
+++ b/src/components/RequestDetail.css
@@ -1,213 +1,425 @@
-/* RequestDetail.css */
+/* RequestDetail.css - 个性化版本 */
.request-detail-container {
- max-width: 800px;
- margin: 0 auto;
- padding: 20px;
- }
-
- .back-button {
- background: none;
- border: none;
- color: #1890ff;
- cursor: pointer;
- font-size: 16px;
- margin-bottom: 20px;
- padding: 5px 0;
- }
-
- .request-post {
- background: #fff;
- border-radius: 8px;
- padding: 20px;
- margin-bottom: 20px;
- box-shadow: 0 1px 3px rgba(0,0,0,0.1);
- }
-
- .post-header {
- display: flex;
- align-items: center;
- margin-bottom: 15px;
- }
-
- .post-avatar {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- margin-right: 10px;
- }
-
- .post-meta {
- display: flex;
- flex-direction: column;
- }
-
- .post-author {
- font-weight: bold;
- }
-
- .post-date {
- color: #888;
- font-size: 14px;
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 20px;
+ font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+/* 返回按钮 - 渐变风格 */
+.back-button {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 16px;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+ color: white;
+ border: none;
+ border-radius: 6px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s;
+ margin-bottom: 25px;
+ box-shadow: 0 2px 8px rgba(30, 60, 114, 0.2);
+}
+
+.back-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
+}
+
+.back-button::before {
+ content: "←";
+}
+
+/* 求种帖子卡片 - 3D悬浮效果 */
+.request-post {
+ background: white;
+ border-radius: 12px;
+ padding: 25px;
+ margin-bottom: 30px;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+ transition: transform 0.3s, box-shadow 0.3s;
+ position: relative;
+ overflow: hidden;
+}
+
+.request-post:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
+}
+
+/* 帖子头部 - 圆形头像+渐变背景 */
+.post-header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px;
+ position: relative;
+}
+
+.post-avatar {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ margin-right: 15px;
+ object-fit: cover;
+ border: 3px solid rgba(30, 60, 114, 0.2);
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: bold;
+ font-size: 20px;
+}
+
+.post-meta {
+ flex: 1;
+}
+
+.post-author {
+ font-weight: 700;
+ color: #1e3c72;
+ font-size: 18px;
+}
+
+.post-date {
+ color: #666;
+ font-size: 14px;
+ margin-top: 3px;
+}
+
+/* 帖子标题 - 渐变文字 */
+.post-title {
+ font-size: 28px;
+ margin: 0 0 20px;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ font-weight: 800;
+}
+
+/* 帖子内容 - 更好的阅读体验 */
+.post-content {
+ line-height: 1.8;
+ color: #333;
+ font-size: 16px;
+ margin-bottom: 25px;
+}
+
+.post-content p {
+ margin-bottom: 15px;
+}
+
+/* 图片容器 - 圆角+阴影 */
+.post-image-container {
+ margin: 20px 0;
+ border-radius: 8px;
+ overflow: hidden;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s;
+}
+
+.post-image-container:hover {
+ transform: scale(1.02);
+}
+
+.post-image {
+ width: 100%;
+ height: auto;
+ max-height: 500px;
+ object-fit: contain;
+ display: block;
+}
+
+/* 帖子操作按钮 - 悬浮效果 */
+.post-actions {
+ display: flex;
+ gap: 15px;
+ margin-top: 25px;
+}
+
+.like-button, .favorite-button {
+ padding: 10px 20px;
+ border: none;
+ border-radius: 6px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.like-button {
+ background: linear-gradient(135deg, #f6f7f9 0%, #e9ebee 100%);
+ color: #666;
+}
+
+.like-button:hover {
+ background: linear-gradient(135deg, #ebedf0 0%, #d8dadf 100%);
+ transform: translateY(-2px);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.like-button.liked {
+ background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
+ color: #1890ff;
+}
+
+.favorite-button {
+ background: linear-gradient(135deg, #fff7e6 0%, #ffe7ba 100%);
+ color: #fa8c16;
+}
+
+.favorite-button:hover {
+ background: linear-gradient(135deg, #ffefd1 0%, #ffd591 100%);
+ transform: translateY(-2px);
+ box-shadow: 0 4px 8px rgba(250, 140, 22, 0.2);
+}
+
+.favorite-button.favorited {
+ background: linear-gradient(135deg, #fa8c16 0%, #ffc53d 100%);
+ color: white;
+}
+
+/* 评论区域 */
+.comments-section {
+ background: white;
+ border-radius: 12px;
+ padding: 25px;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+}
+
+.comments-section h2 {
+ font-size: 22px;
+ color: #1e3c72;
+ margin-bottom: 20px;
+ padding-bottom: 10px;
+ border-bottom: 2px solid #f0f2f5;
+}
+
+/* 评论表单 - 现代设计 */
+.comment-form {
+ margin-bottom: 30px;
+}
+
+.comment-form textarea {
+ width: 100%;
+ padding: 15px;
+ border: 2px solid #f0f2f5;
+ border-radius: 8px;
+ resize: vertical;
+ min-height: 100px;
+ margin-bottom: 15px;
+ font-size: 15px;
+ transition: all 0.3s;
+}
+
+.comment-form textarea:focus {
+ border-color: #1e3c72;
+ box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.2);
+ outline: none;
+}
+
+.form-actions {
+ display: flex;
+ gap: 15px;
+}
+
+.submit-comment {
+ padding: 12px 24px;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+ color: white;
+ border: none;
+ border-radius: 6px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s;
+}
+
+.submit-comment:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
+}
+
+.submit-torrent {
+ padding: 12px 24px;
+ background: linear-gradient(135deg, #52c41a 0%, #a0d911 100%);
+ color: white;
+ border: none;
+ border-radius: 6px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s;
+}
+
+.submit-torrent:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
+}
+
+/* 评论列表 - 卡片式设计 */
+.comment-list {
+ margin-top: 25px;
+}
+
+.comment-item {
+ display: flex;
+ padding: 20px;
+ margin-bottom: 20px;
+ background: #f9fafc;
+ border-radius: 10px;
+ transition: all 0.3s;
+}
+
+.comment-item:hover {
+ background: #f0f4f8;
+ transform: translateX(5px);
+}
+
+.comment-avatar {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ margin-right: 15px;
+ object-fit: cover;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: bold;
+ font-size: 20px;
+ flex-shrink: 0;
+}
+
+.comment-content {
+ flex-grow: 1;
+}
+
+.comment-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 10px;
+}
+
+.comment-author {
+ font-weight: 700;
+ color: #1e3c72;
+}
+
+.comment-date {
+ color: #888;
+ font-size: 13px;
+}
+
+.comment-text {
+ line-height: 1.7;
+ color: #333;
+ margin-bottom: 15px;
+}
+
+/* 种子评论特殊样式 */
+.torrent-comment {
+ display: flex;
+ align-items: center;
+ padding: 15px;
+ background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
+ border-radius: 8px;
+ margin-bottom: 15px;
+ transition: all 0.3s;
+}
+
+.torrent-comment:hover {
+ background: linear-gradient(135deg, #d0e8ff 0%, #a0d0ff 100%);
+}
+
+.torrent-title {
+ color: #1e3c72;
+ font-weight: 600;
+ flex-grow: 1;
+}
+
+.torrent-size {
+ color: #666;
+ font-size: 14px;
+ margin: 0 15px;
+}
+
+.download-torrent {
+ padding: 8px 16px;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+ color: white;
+ border: none;
+ border-radius: 6px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s;
+}
+
+.download-torrent:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
+}
+
+.comment-like {
+ background: none;
+ border: none;
+ color: #666;
+ cursor: pointer;
+ font-size: 14px;
+ padding: 5px 10px;
+ border-radius: 4px;
+ transition: all 0.3s;
+ display: flex;
+ align-items: center;
+ gap: 5px;
+}
+
+.comment-like:hover {
+ color: #1e3c72;
+ background: rgba(30, 60, 114, 0.1);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+ .request-detail-container {
+ padding: 15px;
}
.post-title {
- font-size: 20px;
- margin: 0 0 15px;
- }
-
- .post-content {
- line-height: 1.6;
- margin-bottom: 15px;
+ font-size: 24px;
}
.post-actions {
- display: flex;
- gap: 15px;
+ flex-direction: column;
}
- .like-button, .favorite-button {
- padding: 5px 15px;
- border-radius: 4px;
- border: 1px solid #ddd;
- background: #f5f5f5;
- cursor: pointer;
- }
-
- .like-button.liked {
- background: #e6f7ff;
- border-color: #91d5ff;
- color: #1890ff;
- }
-
- .favorite-button.favorited {
- background: #fff7e6;
- border-color: #ffd591;
- color: #fa8c16;
- }
-
- .comments-section {
- background: #fff;
- border-radius: 8px;
- padding: 20px;
- box-shadow: 0 1px 3px rgba(0,0,0,0.1);
- }
-
- .comment-form {
- margin-bottom: 20px;
- }
-
- .comment-form textarea {
- width: 100%;
- padding: 10px;
- border-radius: 4px;
- border: 1px solid #ddd;
- resize: vertical;
- min-height: 80px;
- margin-bottom: 10px;
- }
-
- .form-actions {
- display: flex;
- gap: 10px;
- }
-
- .submit-comment, .submit-torrent {
- padding: 8px 16px;
- border-radius: 4px;
- border: none;
- cursor: pointer;
- }
-
- .submit-comment {
- background: #1890ff;
- color: white;
- }
-
- .submit-torrent {
- background: #52c41a;
- color: white;
- }
-
- .comment-list {
- margin-top: 20px;
- }
-
- .comment-item {
- display: flex;
- padding: 15px 0;
- border-bottom: 1px solid #f0f0f0;
- }
-
- .comment-item:last-child {
- border-bottom: none;
+ .comment-item, .torrent-comment {
+ flex-direction: column;
}
.comment-avatar {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- margin-right: 15px;
- flex-shrink: 0;
- }
-
- .comment-content {
- flex-grow: 1;
- }
-
- .comment-header {
- display: flex;
- justify-content: space-between;
- margin-bottom: 8px;
- }
-
- .comment-author {
- font-weight: bold;
- }
-
- .comment-date {
- color: #888;
- font-size: 14px;
- }
-
- .comment-text {
- line-height: 1.6;
- margin-bottom: 8px;
+ margin-bottom: 15px;
}
.torrent-comment {
- display: flex;
- align-items: center;
- margin-bottom: 8px;
- padding: 8px;
- background: #f0f8ff;
- border-radius: 4px;
- }
-
- .torrent-title {
- color: #1890ff;
- flex-grow: 1;
+ align-items: flex-start;
}
.torrent-size {
- color: #666;
- margin: 0 15px;
- font-size: 14px;
+ margin: 10px 0;
}
-
- .download-torrent {
- background: #1890ff;
- color: white;
- border: none;
- border-radius: 4px;
- padding: 5px 10px;
- cursor: pointer;
- }
-
- .comment-like {
- background: none;
- border: none;
- color: #666;
- cursor: pointer;
- font-size: 14px;
- padding: 0;
- }
\ No newline at end of file
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(10px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+.request-post, .comments-section {
+ animation: fadeIn 0.5s ease-out forwards;
+}
\ No newline at end of file
diff --git a/src/components/RequestDetail.jsx b/src/components/RequestDetail.jsx
index c138419..d5ecdf7 100644
--- a/src/components/RequestDetail.jsx
+++ b/src/components/RequestDetail.jsx
@@ -324,7 +324,7 @@
return (
<div className="request-detail-container">
<button className="back-button" onClick={handleBack}>
- ← 返回求助区
+ 返回求种区
</button>
<div className={`request-post ${post.isSolved ? 'solved' : ''}`}>
diff --git a/src/components/TorrentDetail.css b/src/components/TorrentDetail.css
index f2b1ad2..ec708ee 100644
--- a/src/components/TorrentDetail.css
+++ b/src/components/TorrentDetail.css
@@ -1,30 +1,54 @@
-/* 基础布局样式 */
+/* 基础布局样式 - 现代化设计 */
.torrent-detail-container {
max-width: 1000px;
margin: 0 auto;
- padding: 20px;
+ padding: 25px;
+ font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
color: #333;
+ animation: fadeIn 0.5s ease-out forwards;
}
+/* 返回按钮 - 渐变风格 */
.back-button {
- background: none;
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 16px;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+ color: white;
border: none;
- color: #3498db;
- font-size: 16px;
+ border-radius: 6px;
+ font-weight: 600;
cursor: pointer;
- margin-bottom: 20px;
- padding: 5px 10px;
+ transition: all 0.3s;
+ margin-bottom: 30px;
+ box-shadow: 0 2px 8px rgba(30, 60, 114, 0.2);
}
.back-button:hover {
- text-decoration: underline;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
}
-/* 种子信息区域 */
+.back-button::before {
+ content: "←";
+}
+
+/* 种子信息区域 - 卡片式设计 */
.torrent-main {
display: flex;
gap: 30px;
margin-bottom: 40px;
+ background: white;
+ border-radius: 12px;
+ padding: 30px;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+ transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.torrent-main:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}
.torrent-cover {
@@ -34,42 +58,57 @@
.cover-placeholder {
width: 100%;
height: 450px;
- background-color: #eee;
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 72px;
- color: #999;
- border-radius: 5px;
+ color: #1e3c72;
+ border-radius: 8px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s;
+}
+
+.cover-placeholder:hover {
+ transform: scale(1.02);
}
.torrent-info {
flex: 1;
}
+/* 标题样式 - 渐变文字 */
.torrent-title {
- font-size: 28px;
+ font-size: 32px;
margin-bottom: 20px;
- color: #222;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ font-weight: 800;
}
+/* 上传者信息 - 圆形头像 */
.uploader-info {
display: flex;
align-items: center;
gap: 15px;
- margin-bottom: 20px;
+ margin-bottom: 25px;
+ position: relative;
}
.uploader-avatar {
- width: 40px;
- height: 40px;
+ width: 50px;
+ height: 50px;
border-radius: 50%;
- background-color: #3498db;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
+ font-size: 20px;
+ flex-shrink: 0;
+ border: 3px solid rgba(30, 60, 114, 0.2);
}
.uploader-details {
@@ -77,142 +116,188 @@
}
.uploader-name {
- font-weight: bold;
+ font-weight: 700;
+ color: #1e3c72;
+ font-size: 18px;
}
.upload-time {
font-size: 14px;
color: #777;
+ margin-top: 3px;
}
+/* 种子元信息 - 网格布局 */
.torrent-meta {
- margin-bottom: 20px;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ gap: 15px;
+ margin-bottom: 25px;
+ padding: 15px;
+ background: #f9fafc;
+ border-radius: 8px;
}
.torrent-meta p {
- margin: 5px 0;
+ margin: 0;
+ font-size: 15px;
}
+.torrent-meta strong {
+ color: #1e3c72;
+ margin-right: 8px;
+}
+
+/* 描述区域 - 更好的阅读体验 */
.torrent-description {
margin-bottom: 30px;
- line-height: 1.6;
+ line-height: 1.8;
+ font-size: 16px;
+ padding: 15px;
+ background: #f9fafc;
+ border-radius: 8px;
}
+.torrent-description h3 {
+ color: #1e3c72;
+ margin-top: 0;
+ margin-bottom: 15px;
+ font-size: 20px;
+}
+
+/* 交互按钮 - 现代化设计 */
.interaction-buttons {
display: flex;
gap: 15px;
+ margin-top: 25px;
}
.interaction-buttons button {
- padding: 8px 15px;
+ padding: 12px 24px;
border: none;
- border-radius: 4px;
+ border-radius: 6px;
cursor: pointer;
- font-size: 14px;
- transition: background-color 0.2s;
+ font-size: 15px;
+ font-weight: 600;
+ transition: all 0.3s;
+ display: flex;
+ align-items: center;
+ gap: 8px;
}
.like-button {
- background-color: #f0f0f0;
+ background: linear-gradient(135deg, #f6f7f9 0%, #e9ebee 100%);
+ color: #666;
}
.like-button:hover {
- background-color: #e0e0e0;
+ background: linear-gradient(135deg, #ebedf0 0%, #d8dadf 100%);
+ transform: translateY(-2px);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.download-button {
- background-color: #3498db;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: white;
}
.download-button:hover {
- background-color: #2980b9;
+ background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%);
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
}
-/* 评论区域样式 */
+/* 评论区域 - 卡片式设计 */
.comments-section {
- margin-top: 40px;
+ background: white;
+ border-radius: 12px;
+ padding: 30px;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+ margin-top: 30px;
}
.comments-section h2 {
- font-size: 22px;
+ font-size: 24px;
+ color: #1e3c72;
margin-bottom: 20px;
padding-bottom: 10px;
- border-bottom: 1px solid #eee;
+ border-bottom: 2px solid #f0f2f5;
}
+/* 评论表单 - 现代化设计 */
.comment-form {
margin-bottom: 30px;
}
.comment-form textarea {
width: 100%;
- padding: 10px;
- border: 1px solid #ddd;
- border-radius: 4px;
- margin-bottom: 10px;
+ padding: 15px;
+ border: 2px solid #f0f2f5;
+ border-radius: 8px;
resize: vertical;
- min-height: 80px;
+ min-height: 100px;
+ margin-bottom: 15px;
+ font-size: 15px;
+ transition: all 0.3s;
+}
+
+.comment-form textarea:focus {
+ border-color: #1e3c72;
+ box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.2);
+ outline: none;
}
.comment-form button {
- background-color: #3498db;
+ padding: 12px 24px;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: white;
border: none;
- padding: 8px 15px;
- border-radius: 4px;
+ border-radius: 6px;
+ font-weight: 600;
cursor: pointer;
+ transition: all 0.3s;
}
.comment-form button:hover {
- background-color: #2980b9;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
}
+/* 评论列表 - 现代化设计 */
.comment-list {
- margin-top: 20px;
+ margin-top: 25px;
}
-/* 评论项统一样式 */
.comment-container {
- margin-bottom: 15px;
+ margin-bottom: 20px;
}
.comment-item {
display: flex;
gap: 15px;
- padding: 12px;
- background: #fff;
- border-radius: 8px;
- border: 1px solid #eaeaea;
+ padding: 20px;
+ background: #f9fafc;
+ border-radius: 10px;
+ transition: all 0.3s;
}
-/* 副评论统一缩进 */
-.comment-container.is-reply {
- margin-left: 40px;
- position: relative;
-}
-
-/* 副评论连接线 */
-.comment-container.is-reply:before {
- content: "";
- position: absolute;
- left: -20px;
- top: 20px;
- width: 15px;
- height: 1px;
- background: #ddd;
+.comment-item:hover {
+ background: #f0f4f8;
+ transform: translateX(5px);
}
.comment-avatar {
- flex: 0 0 40px;
- height: 40px;
+ width: 50px;
+ height: 50px;
border-radius: 50%;
- background-color: #e74c3c;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
+ font-size: 20px;
+ flex-shrink: 0;
}
.comment-content {
@@ -220,28 +305,29 @@
}
.comment-header {
- margin-bottom: 8px;
+ margin-bottom: 10px;
}
.comment-user {
- font-weight: bold;
+ font-weight: 700;
+ color: #1e3c72;
margin-right: 10px;
}
.reply-to {
color: #666;
font-size: 14px;
- margin: 0 5px;
}
.comment-time {
font-size: 14px;
- color: #777;
+ color: #888;
}
.comment-text {
- margin-bottom: 10px;
- line-height: 1.5;
+ margin-bottom: 15px;
+ line-height: 1.7;
+ color: #333;
}
.comment-actions {
@@ -252,180 +338,106 @@
.comment-actions button {
background: none;
border: none;
- color: #3498db;
+ color: #666;
cursor: pointer;
font-size: 14px;
- padding: 0;
+ padding: 5px 10px;
+ border-radius: 4px;
+ transition: all 0.3s;
+ display: flex;
+ align-items: center;
+ gap: 5px;
}
.comment-actions button:hover {
- text-decoration: underline;
+ color: #1e3c72;
+ background: rgba(30, 60, 114, 0.1);
}
-/* 回复列表容器 */
-.replies-container {
- margin-top: 15px;
+/* 副评论样式 */
+.comment-container.is-reply {
+ margin-left: 60px;
+ position: relative;
}
-/* 副评论背景色 */
+.comment-container.is-reply:before {
+ content: "";
+ position: absolute;
+ left: -30px;
+ top: 30px;
+ width: 20px;
+ height: 1px;
+ background: #ddd;
+}
+
.comment-container.is-reply .comment-item {
- background: #f9f9f9;
+ background: #f5f7fa;
}
/* 回复表单样式 */
.reply-form {
+ margin-left: 65px;
margin-top: 15px;
-}
-
-.reply-form textarea {
- width: 100%;
- padding: 8px;
- border: 1px solid #ddd;
- border-radius: 4px;
- margin-bottom: 10px;
- resize: vertical;
- min-height: 60px;
-}
-
-.reply-actions {
- display: flex;
- gap: 10px;
- justify-content: flex-end;
-}
-
-.reply-actions button {
- padding: 5px 10px;
- border: none;
- border-radius: 3px;
- cursor: pointer;
- font-size: 13px;
-}
-
-.reply-actions button[type="button"] {
- background-color: #f0f0f0;
-}
-
-.reply-actions button[type="submit"] {
- background-color: #3498db;
- color: white;
-}
-
-/* 加载和错误状态 */
-.loading {
- text-align: center;
- padding: 50px;
- font-size: 18px;
-}
-
-.error {
- color: #e74c3c;
- text-align: center;
- padding: 50px;
- font-size: 18px;
-}
-/* 回复表单样式 */
-.reply-form {
- margin-left: 50px;
- margin-top: 10px;
- background: #f5f5f5;
- padding: 10px;
- border-radius: 4px;
-}
-
-.reply-form textarea {
- width: 100%;
- padding: 8px;
- border: 1px solid #ddd;
- border-radius: 4px;
- resize: vertical;
-}
-
-.reply-form-buttons {
- display: flex;
- gap: 10px;
- margin-top: 8px;
-}
-
-.reply-form-buttons button {
- padding: 5px 10px;
- border: none;
- border-radius: 4px;
- cursor: pointer;
-}
-
-.reply-form-buttons button[type="submit"] {
- background-color: #1890ff;
- color: white;
-}
-
-.reply-form-buttons .cancel-reply {
- background-color: #f5f5f5;
- border: 1px solid #d9d9d9;
-}
-
-.comment-list {
- margin-top: 20px;
- border-top: 1px solid #eee;
- padding-top: 20px;
-}
-
-.reply-form {
- margin-left: 50px;
- margin-top: 10px;
margin-bottom: 15px;
- background: #f9f9f9;
- padding: 12px;
- border-radius: 6px;
+ background: #f5f7fa;
+ padding: 15px;
+ border-radius: 8px;
border: 1px solid #eee;
}
-.reply-form.nested-reply {
- margin-left: 80px;
-}
-
.reply-form textarea {
width: 100%;
- padding: 10px;
+ padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
resize: vertical;
- min-height: 60px;
+ min-height: 80px;
font-family: inherit;
font-size: 14px;
+ transition: all 0.3s;
+}
+
+.reply-form textarea:focus {
+ border-color: #1e3c72;
+ box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.2);
+ outline: none;
}
.reply-form-buttons {
display: flex;
gap: 10px;
margin-top: 10px;
+ justify-content: flex-end;
}
.reply-form-buttons button {
- padding: 6px 12px;
- border-radius: 4px;
+ padding: 8px 16px;
+ border-radius: 6px;
cursor: pointer;
- font-size: 13px;
- transition: all 0.2s;
+ font-size: 14px;
+ font-weight: 600;
+ transition: all 0.3s;
}
.reply-form-buttons button[type="submit"] {
- background-color: #1890ff;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: white;
border: none;
}
.reply-form-buttons button[type="submit"]:hover {
- background-color: #40a9ff;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 8px rgba(30, 60, 114, 0.2);
}
.reply-form-buttons .cancel-reply {
- background-color: #f5f5f5;
+ background: #f5f5f5;
border: 1px solid #d9d9d9;
color: #666;
}
.reply-form-buttons .cancel-reply:hover {
- background-color: #e8e8e8;
+ background: #e8e8e8;
}
/* 回复弹窗样式 */
@@ -435,82 +447,155 @@
left: 0;
right: 0;
bottom: 0;
- background-color: rgba(0, 0, 0, 0.5);
+ background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
+ backdrop-filter: blur(5px);
}
.reply-modal {
background: white;
- border-radius: 8px;
- width: 90%;
- max-width: 500px;
- padding: 20px;
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ padding: 25px;
+ border-radius: 12px;
+ width: 500px;
+ max-width: 90%;
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
- margin-bottom: 15px;
+ margin-bottom: 20px;
}
.modal-header h3 {
margin: 0;
- font-size: 18px;
+ color: #1e3c72;
+ font-size: 20px;
}
.close-modal {
background: none;
border: none;
font-size: 24px;
- cursor: pointer;
color: #666;
+ cursor: pointer;
+ transition: all 0.3s;
+}
+
+.close-modal:hover {
+ color: #1e3c72;
+ transform: rotate(90deg);
}
.reply-modal textarea {
width: 100%;
- padding: 12px;
- border: 1px solid #ddd;
- border-radius: 4px;
+ padding: 15px;
+ border: 2px solid #f0f2f5;
+ border-radius: 8px;
resize: vertical;
- min-height: 120px;
- font-size: 14px;
- margin-bottom: 15px;
+ min-height: 150px;
+ margin-bottom: 20px;
+ font-size: 15px;
+ transition: all 0.3s;
+}
+
+.reply-modal textarea:focus {
+ border-color: #1e3c72;
+ box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.2);
+ outline: none;
}
.modal-actions {
display: flex;
justify-content: flex-end;
- gap: 10px;
-}
-
-.modal-actions button {
- padding: 8px 16px;
- border-radius: 4px;
- cursor: pointer;
- font-size: 14px;
+ gap: 15px;
}
.cancel-btn {
+ padding: 10px 20px;
background: #f5f5f5;
- border: 1px solid #d9d9d9;
color: #666;
+ border: none;
+ border-radius: 6px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s;
}
.cancel-btn:hover {
- background: #e8e8e8;
+ background: #e0e0e0;
}
.submit-btn {
- background: #1890ff;
+ padding: 10px 20px;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: white;
border: none;
+ border-radius: 6px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s;
}
.submit-btn:hover {
- background: #40a9ff;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
}
+
+/* 加载和错误状态 */
+.loading, .error {
+ text-align: center;
+ padding: 50px;
+ font-size: 18px;
+ background: white;
+ border-radius: 12px;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+ margin: 20px 0;
+}
+
+.error {
+ color: #ff4d4f;
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(10px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+ .torrent-detail-container {
+ padding: 15px;
+ }
+
+ .torrent-main {
+ flex-direction: column;
+ padding: 20px;
+ }
+
+ .torrent-cover {
+ flex: 1 1 100%;
+ margin-bottom: 20px;
+ }
+
+ .torrent-title {
+ font-size: 24px;
+ }
+
+ .torrent-meta {
+ grid-template-columns: 1fr;
+ }
+
+ .comment-container.is-reply {
+ margin-left: 30px;
+ }
+
+ .reply-form {
+ margin-left: 45px;
+ }
+}
\ No newline at end of file
diff --git a/src/components/TorrentDetail.jsx b/src/components/TorrentDetail.jsx
index e743506..fe5b475 100644
--- a/src/components/TorrentDetail.jsx
+++ b/src/components/TorrentDetail.jsx
@@ -241,7 +241,7 @@
return (
<div className="torrent-detail-container">
<button className="back-button" onClick={handleBack}>
- ← 返回资源区
+ 返回资源区
</button>
<div className="torrent-main">