forked from quant-speed-AI/Scoring-System
创赢未来评分系统 - 初始化提交（移除大文件）
This commit is contained in:
爽哒哒
24
frontend/.gitignore
vendored
Normal file
24
frontend/.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
29
frontend/Dockerfile
Normal file
29
frontend/Dockerfile
Normal file
@@ -0,0 +1,29 @@
|
||||
# Use an official Node runtime as a parent image
|
||||
FROM node:22-alpine
|
||||
|
||||
# Set working directory
|
||||
WORKDIR /app
|
||||
|
||||
# Install build dependencies for native modules
|
||||
RUN apk add --no-cache autoconf automake libtool make g++ zlib-dev nasm python3
|
||||
|
||||
# Install dependencies
|
||||
COPY package.json package-lock.json* ./
|
||||
RUN npm install --registry=https://registry.npmmirror.com
|
||||
|
||||
# 复制项目文件
|
||||
COPY . .
|
||||
|
||||
# 接收构建参数
|
||||
ARG VITE_API_URL=/api
|
||||
# 设置环境变量供构建时使用
|
||||
ENV VITE_API_URL=$VITE_API_URL
|
||||
|
||||
# 构建生产环境代码
|
||||
RUN npm run build
|
||||
|
||||
# 暴露应用运行的端口
|
||||
EXPOSE 15173
|
||||
|
||||
# 启动应用 (Preview 模式)
|
||||
CMD ["npm", "run", "preview", "--", "--host", "0.0.0.0", "--port", "15173"]
|
||||
16
frontend/README.md
Normal file
16
frontend/README.md
Normal file
@@ -0,0 +1,16 @@
|
||||
# React + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
||||
29
frontend/eslint.config.js
Normal file
29
frontend/eslint.config.js
Normal file
@@ -0,0 +1,29 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{js,jsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
reactHooks.configs.flat.recommended,
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
ecmaFeatures: { jsx: true },
|
||||
sourceType: 'module',
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
|
||||
},
|
||||
},
|
||||
])
|
||||
13
frontend/index.html
Normal file
13
frontend/index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/logo.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>评分系统</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
57
frontend/package.json
Normal file
57
frontend/package.json
Normal file
@@ -0,0 +1,57 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-three/drei": "^10.7.7",
|
||||
"@react-three/fiber": "^9.5.0",
|
||||
"@uiw/react-md-editor": "^4.0.11",
|
||||
"antd": "^6.2.2",
|
||||
"axios": "^1.13.4",
|
||||
"framer-motion": "^12.29.2",
|
||||
"github-markdown-css": "^5.9.0",
|
||||
"jszip": "^3.10.1",
|
||||
"qrcode.react": "^4.2.0",
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-markdown": "^10.1.0",
|
||||
"react-router-dom": "^7.13.0",
|
||||
"react-syntax-highlighter": "^16.1.0",
|
||||
"rehype-katex": "^7.0.1",
|
||||
"rehype-raw": "^7.0.0",
|
||||
"remark-gfm": "^4.0.1",
|
||||
"remark-math": "^6.0.0",
|
||||
"three": "^0.182.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@ant-design/icons": "^6.1.0",
|
||||
"@eslint/js": "^9.39.1",
|
||||
"@storybook/addon-essentials": "^8.6.4",
|
||||
"@storybook/addon-interactions": "^8.6.4",
|
||||
"@storybook/blocks": "^8.6.4",
|
||||
"@storybook/react": "^8.6.4",
|
||||
"@storybook/react-vite": "^8.6.4",
|
||||
"@storybook/test": "^8.6.4",
|
||||
"@tanstack/react-query": "^5.90.21",
|
||||
"@types/react": "^19.2.5",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^5.1.1",
|
||||
"canvas-confetti": "^1.9.4",
|
||||
"classnames": "^2.5.1",
|
||||
"eslint": "^9.39.1",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.4.24",
|
||||
"globals": "^16.5.0",
|
||||
"less": "^4.5.1",
|
||||
"storybook": "^8.6.4",
|
||||
"vite": "^6.0.0",
|
||||
"vite-plugin-imagemin": "^0.6.1"
|
||||
}
|
||||
}
|
||||
BIN
frontend/public/logo.png
Normal file
BIN
frontend/public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
frontend/public/shouye.png
Normal file
BIN
frontend/public/shouye.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 209 KiB |
1
frontend/public/vite.svg
Normal file
1
frontend/public/vite.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
41
frontend/src/App.css
Normal file
41
frontend/src/App.css
Normal file
@@ -0,0 +1,41 @@
|
||||
#root {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
69
frontend/src/App.jsx
Normal file
69
frontend/src/App.jsx
Normal file
@@ -0,0 +1,69 @@
|
||||
|
||||
import React from 'react'
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { App as AntdApp } from 'antd';
|
||||
import { AuthProvider } from './context/AuthContext';
|
||||
import Layout from './components/Layout';
|
||||
import Home from './pages/Home';
|
||||
import ProductDetail from './pages/ProductDetail';
|
||||
import Payment from './pages/Payment';
|
||||
import AIServices from './pages/AIServices';
|
||||
import ServiceDetail from './pages/ServiceDetail';
|
||||
import VCCourses from './pages/VCCourses';
|
||||
import VCCourseDetail from './pages/VCCourseDetail';
|
||||
import MyOrders from './pages/MyOrders';
|
||||
import ForumList from './pages/ForumList';
|
||||
import ForumDetail from './pages/ForumDetail';
|
||||
import Activities from './pages/Activities';
|
||||
import ActivityDetail from './pages/activity/Detail';
|
||||
import CompetitionList from './components/competition/CompetitionList';
|
||||
import CompetitionDetail from './components/competition/CompetitionDetail';
|
||||
import ProjectDetail from './components/competition/ProjectDetail';
|
||||
import 'antd/dist/reset.css';
|
||||
import './App.css';
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
function JudgeLoginRedirect() {
|
||||
React.useEffect(() => {
|
||||
window.location.replace('/judge/login/');
|
||||
}, []);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<AntdApp>
|
||||
<AuthProvider>
|
||||
<BrowserRouter>
|
||||
<Layout>
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/services" element={<AIServices />} />
|
||||
<Route path="/services/:id" element={<ServiceDetail />} />
|
||||
<Route path="/courses" element={<VCCourses />} />
|
||||
<Route path="/courses/:id" element={<VCCourseDetail />} />
|
||||
<Route path="/forum" element={<ForumList />} />
|
||||
<Route path="/forum/:id" element={<ForumDetail />} />
|
||||
<Route path="/competitions" element={<CompetitionList />} />
|
||||
<Route path="/competitions/:id" element={<CompetitionDetail />} />
|
||||
<Route path="/projects/:id" element={<ProjectDetail />} />
|
||||
<Route path="/activities" element={<Activities />} />
|
||||
<Route path="/activity/:id" element={<ActivityDetail />} />
|
||||
<Route path="/my-orders" element={<MyOrders />} />
|
||||
<Route path="/product/:id" element={<ProductDetail />} />
|
||||
<Route path="/payment/:orderId" element={<Payment />} />
|
||||
<Route path="/judge-login" element={<JudgeLoginRedirect />} />
|
||||
</Routes>
|
||||
</Layout>
|
||||
</BrowserRouter>
|
||||
</AuthProvider>
|
||||
</AntdApp>
|
||||
</QueryClientProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
53
frontend/src/animation.js
Normal file
53
frontend/src/animation.js
Normal file
@@ -0,0 +1,53 @@
|
||||
|
||||
// Framer Motion Animation Variants
|
||||
|
||||
export const fadeInUp = {
|
||||
hidden: { opacity: 0, y: 30 },
|
||||
visible: (custom = 0) => ({
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: custom * 0.08,
|
||||
duration: 0.6,
|
||||
ease: [0.22, 1, 0.36, 1], // Custom easing
|
||||
},
|
||||
}),
|
||||
};
|
||||
|
||||
export const staggerContainer = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const hoverScale = {
|
||||
hover: {
|
||||
scale: 1.03,
|
||||
boxShadow: "0px 10px 20px rgba(0, 0, 0, 0.2)",
|
||||
transition: { duration: 0.3 },
|
||||
},
|
||||
};
|
||||
|
||||
export const pageTransition = {
|
||||
initial: { opacity: 0, x: 20 },
|
||||
animate: { opacity: 1, x: 0 },
|
||||
exit: { opacity: 0, x: -20 },
|
||||
transition: { duration: 0.3 },
|
||||
};
|
||||
|
||||
export const buttonTap = {
|
||||
scale: 0.95,
|
||||
};
|
||||
|
||||
export const imageFadeIn = {
|
||||
hidden: { opacity: 0, scale: 1.1 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
transition: { duration: 0.5 }
|
||||
},
|
||||
};
|
||||
102
frontend/src/api.js
Normal file
102
frontend/src/api.js
Normal file
@@ -0,0 +1,102 @@
|
||||
import axios from 'axios';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_URL || 'http://localhost:8000/api',
|
||||
timeout: 8000, // 增加超时时间到 10秒
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
}
|
||||
});
|
||||
|
||||
// 请求拦截器：自动附加 Token
|
||||
api.interceptors.request.use((config) => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
}, (error) => {
|
||||
return Promise.reject(error);
|
||||
});
|
||||
|
||||
export const getConfigs = () => api.get('/configs/');
|
||||
export const createOrder = (data) => api.post('/orders/', data);
|
||||
export const nativePay = (data) => api.post('/pay/', data);
|
||||
export const getOrder = (id) => api.get(`/orders/${id}/`);
|
||||
export const queryOrderStatus = (id) => api.get(`/orders/${id}/query_status/`);
|
||||
export const initiatePayment = (orderId) => api.post(`/orders/${orderId}/initiate_payment/`);
|
||||
export const confirmPayment = (orderId) => api.post(`/orders/${orderId}/confirm_payment/`);
|
||||
|
||||
export const getServices = () => api.get('/services/');
|
||||
export const getServiceDetail = (id) => api.get(`/services/${id}/`);
|
||||
export const createServiceOrder = (data) => api.post('/service-orders/', data);
|
||||
export const getVCCourses = () => api.get('/courses/');
|
||||
export const getVCCourseDetail = (id) => api.get(`/courses/${id}/`, { params: { _t: Date.now() } });
|
||||
export const enrollCourse = (data) => api.post('/course-enrollments/', data);
|
||||
|
||||
export const sendSms = (data) => api.post('/auth/send-sms/', data);
|
||||
export const queryMyOrders = (data) => api.post('/orders/my_orders/', data);
|
||||
export const phoneLogin = (data) => api.post('/auth/phone-login/', data);
|
||||
export const getUserInfo = () => api.get('/users/me/');
|
||||
export const updateUserInfo = (data) => api.post('/wechat/update/', data);
|
||||
export const uploadUserAvatar = (data) => {
|
||||
// 使用 axios 直接请求外部接口，避免 base URL 和拦截器干扰
|
||||
return axios.post('https://data.tangledup-ai.com/upload?folder=uploads/market/avator', data, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Community / Forum API
|
||||
export const getTopics = (params) => api.get('/community/topics/', { params });
|
||||
export const getTopicDetail = (id) => api.get(`/community/topics/${id}/`);
|
||||
export const likeTopic = (id) => api.post(`/community/topics/${id}/like/`);
|
||||
export const createTopic = (data) => api.post('/community/topics/', data);
|
||||
export const updateTopic = (id, data) => api.patch(`/community/topics/${id}/`, data);
|
||||
export const getReplies = (params) => api.get('/community/replies/', { params });
|
||||
export const likeReply = (id) => api.post(`/community/replies/${id}/like/`);
|
||||
export const createReply = (data) => api.post('/community/replies/', data);
|
||||
export const uploadMedia = (data) => {
|
||||
return api.post('/community/media/', data, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
}
|
||||
});
|
||||
};
|
||||
export const getStarUsers = () => api.get('/users/stars/');
|
||||
export const getMyPaidItems = () => api.get('/users/paid-items/');
|
||||
export const getAnnouncements = () => api.get('/community/announcements/');
|
||||
export const getActivities = () => api.get('/community/activities/');
|
||||
export const getActivityDetail = (id) => api.get(`/community/activities/${id}/`);
|
||||
export const signUpActivity = (id, data) => api.post(`/community/activities/${id}/signup/`, data);
|
||||
export const getMySignups = () => api.get('/community/activities/my_signups/');
|
||||
|
||||
// Competition API
|
||||
export const getCompetitions = (params) => api.get('/competition/competitions/', { params });
|
||||
export const getCompetitionDetail = (id) => api.get(`/competition/competitions/${id}/`);
|
||||
export const enrollCompetition = (id, data) => api.post(`/competition/competitions/${id}/enroll/`, data);
|
||||
export const getMyCompetitionEnrollment = (id) => api.get(`/competition/competitions/${id}/my_enrollment/`);
|
||||
|
||||
export const getProjects = (params) => api.get('/competition/projects/', { params });
|
||||
export const getProjectDetail = (id) => api.get(`/competition/projects/${id}/`);
|
||||
export const createProject = (data) => api.post('/competition/projects/', data);
|
||||
export const updateProject = (id, data) => api.patch(`/competition/projects/${id}/`, data);
|
||||
export const submitProject = (id) => api.post(`/competition/projects/${id}/submit/`);
|
||||
|
||||
export const uploadProjectFile = (data) => {
|
||||
return api.post('/competition/files/', data, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const createScore = (data) => api.post('/competition/scores/', data);
|
||||
export const createComment = (data) => api.post('/competition/comments/', data);
|
||||
export const getComments = (params) => api.get('/competition/comments/', { params });
|
||||
|
||||
// Homepage Config API
|
||||
export const getHomePageConfig = () => api.get('/competition/homepage-config/');
|
||||
|
||||
export default api;
|
||||
1
frontend/src/assets/react.svg
Normal file
1
frontend/src/assets/react.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
48
frontend/src/components/CodeBlock.jsx
Normal file
48
frontend/src/components/CodeBlock.jsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
||||
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
||||
import { CopyOutlined, CheckOutlined } from '@ant-design/icons';
|
||||
import { Button, Tooltip } from 'antd';
|
||||
|
||||
const CodeBlock = ({ language, children, ...props }) => {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const handleCopy = () => {
|
||||
navigator.clipboard.writeText(String(children).replace(/\n$/, ''));
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ position: 'relative', margin: '1em 0' }}>
|
||||
<Tooltip title={copied ? "已复制" : "复制代码"}>
|
||||
<Button
|
||||
type="text"
|
||||
icon={copied ? <CheckOutlined style={{ color: '#52c41a' }} /> : <CopyOutlined style={{ color: '#fff' }} />}
|
||||
size="small"
|
||||
onClick={handleCopy}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 8,
|
||||
right: 8,
|
||||
zIndex: 1,
|
||||
color: '#fff',
|
||||
background: 'rgba(255, 255, 255, 0.1)',
|
||||
border: 'none',
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
<SyntaxHighlighter
|
||||
style={vscDarkPlus}
|
||||
language={language}
|
||||
PreTag="div"
|
||||
customStyle={{ margin: 0, borderRadius: 8, padding: '1.5em 1em 1em 1em' }}
|
||||
{...props}
|
||||
>
|
||||
{String(children).replace(/\n$/, '')}
|
||||
</SyntaxHighlighter>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodeBlock;
|
||||
286
frontend/src/components/CreateTopicModal.jsx
Normal file
286
frontend/src/components/CreateTopicModal.jsx
Normal file
@@ -0,0 +1,286 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Modal, Form, Input, Button, message, Upload, Select } from 'antd';
|
||||
import { UploadOutlined } from '@ant-design/icons';
|
||||
import { createTopic, updateTopic, uploadMedia, getMyPaidItems } from '../api';
|
||||
import MDEditor from '@uiw/react-md-editor';
|
||||
import rehypeKatex from 'rehype-katex';
|
||||
import remarkMath from 'remark-math';
|
||||
import 'katex/dist/katex.css';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
const CreateTopicModal = ({ visible, onClose, onSuccess, initialValues, isEditMode, topicId }) => {
|
||||
const [form] = Form.useForm();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [paidItems, setPaidItems] = useState({ configs: [], courses: [], services: [] });
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [mediaIds, setMediaIds] = useState([]);
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const [mediaList, setMediaList] = useState([]); // Store uploaded media details for preview
|
||||
const [content, setContent] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (visible) {
|
||||
fetchPaidItems();
|
||||
if (isEditMode && initialValues) {
|
||||
// Edit Mode: Populate form with initial values
|
||||
form.setFieldsValue({
|
||||
title: initialValues.title,
|
||||
category: initialValues.category,
|
||||
});
|
||||
setContent(initialValues.content);
|
||||
form.setFieldValue('content', initialValues.content);
|
||||
|
||||
// Handle related item
|
||||
let relatedVal = null;
|
||||
if (initialValues.related_product) relatedVal = `config_${initialValues.related_product.id || initialValues.related_product}`;
|
||||
else if (initialValues.related_course) relatedVal = `course_${initialValues.related_course.id || initialValues.related_course}`;
|
||||
else if (initialValues.related_service) relatedVal = `service_${initialValues.related_service.id || initialValues.related_service}`;
|
||||
|
||||
if (relatedVal) form.setFieldValue('related_item', relatedVal);
|
||||
|
||||
// Note: We start with empty *new* media IDs.
|
||||
// Existing media is embedded in content or stored in DB, we don't need to re-upload or track them here unless we want to delete them (which is complex).
|
||||
// For now, we just allow adding NEW media.
|
||||
setMediaIds([]);
|
||||
setMediaList([]);
|
||||
} else {
|
||||
// Create Mode: Reset form
|
||||
setMediaIds([]);
|
||||
setMediaList([]);
|
||||
setContent("");
|
||||
form.resetFields();
|
||||
form.setFieldsValue({ content: "", category: 'discussion' });
|
||||
}
|
||||
}
|
||||
}, [visible, isEditMode, initialValues, form]);
|
||||
|
||||
const fetchPaidItems = async () => {
|
||||
try {
|
||||
const res = await getMyPaidItems();
|
||||
setPaidItems(res.data);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch paid items", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpload = async (file) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
// 默认为 image，如果需要支持视频需根据 file.type 判断
|
||||
formData.append('media_type', file.type.startsWith('video') ? 'video' : 'image');
|
||||
|
||||
setUploading(true);
|
||||
try {
|
||||
const res = await uploadMedia(formData);
|
||||
// 记录上传的媒体 ID
|
||||
if (res.data.id) {
|
||||
setMediaIds(prev => [...prev, res.data.id]);
|
||||
}
|
||||
|
||||
// 确保 URL 是完整的
|
||||
// 由于后端现在是转发到外部OSS，返回的URL通常是完整的，但也可能是相对的，这里统一处理
|
||||
let url = res.data.file;
|
||||
|
||||
// 处理反斜杠问题（防止 Windows 路径风格影响 URL）
|
||||
if (url) {
|
||||
url = url.replace(/\\/g, '/');
|
||||
}
|
||||
|
||||
if (url && !url.startsWith('http')) {
|
||||
// 如果返回的是相对路径，拼接 API URL 或 Base URL
|
||||
const baseURL = import.meta.env.VITE_API_URL || 'http://localhost:8000';
|
||||
// 移除 baseURL 末尾的 /api 或 /
|
||||
const host = baseURL.replace(/\/api\/?$/, '');
|
||||
// 确保 url 以 / 开头
|
||||
if (!url.startsWith('/')) url = '/' + url;
|
||||
url = `${host}${url}`;
|
||||
}
|
||||
|
||||
// 清理 URL 中的双斜杠 (除协议头外)
|
||||
url = url.replace(/([^:]\/)\/+/g, '$1');
|
||||
|
||||
// Add to media list for preview
|
||||
setMediaList(prev => [...prev, {
|
||||
id: res.data.id,
|
||||
url: url,
|
||||
type: file.type.startsWith('video') ? 'video' : 'image',
|
||||
name: file.name
|
||||
}]);
|
||||
|
||||
// 插入到编辑器
|
||||
const insertText = file.type.startsWith('video')
|
||||
? `\n<video src="${url}" controls width="100%"></video>\n`
|
||||
: `\n\n`;
|
||||
|
||||
const newContent = content + insertText;
|
||||
setContent(newContent);
|
||||
form.setFieldsValue({ content: newContent });
|
||||
|
||||
message.success('上传成功');
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error('上传失败');
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
return false; // 阻止默认上传行为
|
||||
};
|
||||
|
||||
const handleSubmit = async (values) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// 处理关联项目 ID (select value format: "type_id")
|
||||
const relatedValue = values.related_item;
|
||||
// Use content state instead of form value to ensure consistency
|
||||
const payload = { ...values, content: content, media_ids: mediaIds };
|
||||
delete payload.related_item;
|
||||
|
||||
if (relatedValue) {
|
||||
const [type, id] = relatedValue.split('_');
|
||||
if (type === 'config') payload.related_product = id;
|
||||
if (type === 'course') payload.related_course = id;
|
||||
if (type === 'service') payload.related_service = id;
|
||||
} else {
|
||||
// If cleared, set to null
|
||||
payload.related_product = null;
|
||||
payload.related_course = null;
|
||||
payload.related_service = null;
|
||||
}
|
||||
|
||||
if (isEditMode && topicId) {
|
||||
await updateTopic(topicId, payload);
|
||||
message.success('修改成功');
|
||||
} else {
|
||||
const res = await createTopic(payload);
|
||||
const topic = res.data || res;
|
||||
if (topic.status === 'pending') {
|
||||
message.info('提交成功，请等待管理员审核');
|
||||
} else {
|
||||
message.success('发布成功!');
|
||||
}
|
||||
}
|
||||
|
||||
form.resetFields();
|
||||
if (onSuccess) onSuccess();
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error((isEditMode ? '修改' : '发布') + '失败: ' + (error.response?.data?.detail || '网络错误'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={isEditMode ? "编辑帖子" : "发布新帖"}
|
||||
open={visible}
|
||||
onCancel={onClose}
|
||||
footer={null}
|
||||
destroyOnHidden
|
||||
width={1000}
|
||||
centered
|
||||
maskClosable={false}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleSubmit}
|
||||
initialValues={{ category: 'discussion' }}
|
||||
>
|
||||
<Form.Item
|
||||
name="title"
|
||||
label="标题"
|
||||
rules={[{ required: true, message: '请输入标题' }, { max: 100, message: '标题最多100字' }]}
|
||||
>
|
||||
<Input placeholder="请输入清晰的问题或讨论标题" size="large" />
|
||||
</Form.Item>
|
||||
|
||||
<div style={{ display: 'flex', gap: 20 }}>
|
||||
<Form.Item
|
||||
name="category"
|
||||
label="分类"
|
||||
style={{ width: 200 }}
|
||||
rules={[{ required: true, message: '请选择分类' }]}
|
||||
>
|
||||
<Select>
|
||||
<Option value="discussion">技术讨论</Option>
|
||||
<Option value="help">求助问答</Option>
|
||||
<Option value="share">经验分享</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="related_item"
|
||||
label="关联已购项目 (可选)"
|
||||
style={{ flex: 1 }}
|
||||
tooltip="关联已购项目可获得“认证用户”标识"
|
||||
>
|
||||
<Select placeholder="选择关联项目..." allowClear>
|
||||
<Select.OptGroup label="硬件产品">
|
||||
{paidItems.configs.map(i => (
|
||||
<Option key={`config_${i.id}`} value={`config_${i.id}`}>{i.name}</Option>
|
||||
))}
|
||||
</Select.OptGroup>
|
||||
<Select.OptGroup label="VC 课程">
|
||||
{paidItems.courses.map(i => (
|
||||
<Option key={`course_${i.id}`} value={`course_${i.id}`}>{i.title}</Option>
|
||||
))}
|
||||
</Select.OptGroup>
|
||||
<Select.OptGroup label="AI 服务">
|
||||
{paidItems.services.map(i => (
|
||||
<Option key={`service_${i.id}`} value={`service_${i.id}`}>{i.title}</Option>
|
||||
))}
|
||||
</Select.OptGroup>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</div>
|
||||
|
||||
<Form.Item
|
||||
name="content"
|
||||
label="内容 (支持 Markdown 与 LaTeX 公式)"
|
||||
rules={[{ required: true, message: '请输入内容' }]}
|
||||
>
|
||||
<div data-color-mode="light">
|
||||
<div style={{ marginBottom: 10 }}>
|
||||
<Upload
|
||||
beforeUpload={handleUpload}
|
||||
showUploadList={false}
|
||||
accept="image/*,video/*"
|
||||
>
|
||||
<Button icon={<UploadOutlined />} loading={uploading} size="small">
|
||||
插入图片/视频
|
||||
</Button>
|
||||
</Upload>
|
||||
</div>
|
||||
|
||||
<MDEditor
|
||||
value={content}
|
||||
onChange={(val) => {
|
||||
setContent(val);
|
||||
form.setFieldsValue({ content: val });
|
||||
}}
|
||||
height={400}
|
||||
previewOptions={{
|
||||
rehypePlugins: [[rehypeKatex]],
|
||||
remarkPlugins: [[remarkMath]],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10 }}>
|
||||
<Button onClick={onClose}>取消</Button>
|
||||
<Button type="primary" htmlType="submit" loading={loading} size="large">
|
||||
{isEditMode ? "保存修改" : "立即发布"}
|
||||
</Button>
|
||||
</div>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateTopicModal;
|
||||
296
frontend/src/components/Layout.jsx
Normal file
296
frontend/src/components/Layout.jsx
Normal file
@@ -0,0 +1,296 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Layout as AntLayout, Menu, ConfigProvider, theme, Drawer, Button, Avatar, Dropdown } from 'antd';
|
||||
import { HomeOutlined, MenuOutlined, TrophyOutlined, CalendarOutlined, BookOutlined, UserOutlined, LogoutOutlined, WechatOutlined } from '@ant-design/icons';
|
||||
import { useNavigate, useLocation, useSearchParams } from 'react-router-dom';
|
||||
import ParticleBackground from './ParticleBackground';
|
||||
import LoginModal from './LoginModal';
|
||||
import ProfileModal from './ProfileModal';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
|
||||
const { Header, Content, Footer } = AntLayout;
|
||||
|
||||
const Layout = ({ children }) => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [searchParams] = useSearchParams();
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
const [profileVisible, setProfileVisible] = useState(false);
|
||||
|
||||
const { user, login, logout, loginModalVisible, showLoginModal, hideLoginModal } = useAuth();
|
||||
|
||||
// 全局监听并持久化 ref 参数
|
||||
useEffect(() => {
|
||||
const ref = searchParams.get('ref');
|
||||
if (ref) {
|
||||
console.log('[Layout] Capturing sales ref code:', ref);
|
||||
localStorage.setItem('ref_code', ref);
|
||||
}
|
||||
}, [searchParams]);
|
||||
|
||||
const handleLogout = () => {
|
||||
logout();
|
||||
navigate('/');
|
||||
};
|
||||
|
||||
const userMenu = {
|
||||
items: [
|
||||
{
|
||||
key: 'profile',
|
||||
label: '个人设置',
|
||||
icon: <UserOutlined />,
|
||||
onClick: () => setProfileVisible(true)
|
||||
},
|
||||
{
|
||||
key: 'logout',
|
||||
label: '退出登录',
|
||||
icon: <LogoutOutlined />,
|
||||
onClick: handleLogout
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const items = [
|
||||
{
|
||||
key: '/',
|
||||
icon: <HomeOutlined />,
|
||||
label: '首页',
|
||||
},
|
||||
{
|
||||
key: '/competitions',
|
||||
icon: <TrophyOutlined />,
|
||||
label: '赛事中心',
|
||||
},
|
||||
{
|
||||
key: '/activities',
|
||||
icon: <CalendarOutlined />,
|
||||
label: '系列活动',
|
||||
},
|
||||
{
|
||||
key: '/courses',
|
||||
icon: <BookOutlined />,
|
||||
label: '课程培训',
|
||||
},
|
||||
{
|
||||
key: '/my-orders',
|
||||
icon: <UserOutlined />,
|
||||
label: '我的',
|
||||
},
|
||||
];
|
||||
|
||||
const handleMenuClick = (key) => {
|
||||
navigate(key);
|
||||
setMobileMenuOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
algorithm: theme.darkAlgorithm,
|
||||
token: {
|
||||
colorPrimary: '#1890ff',
|
||||
colorBgContainer: 'transparent',
|
||||
colorBgLayout: 'transparent',
|
||||
fontFamily: "'Orbitron', sans-serif",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ParticleBackground />
|
||||
<AntLayout style={{ minHeight: '100vh', background: 'transparent' }}>
|
||||
<Header
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
zIndex: 1000,
|
||||
width: '100%',
|
||||
padding: 0,
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
|
||||
display: 'flex',
|
||||
height: '72px',
|
||||
lineHeight: '72px',
|
||||
boxShadow: '0 4px 30px rgba(0, 0, 0, 0.5)'
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
width: '100%',
|
||||
padding: '0 40px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
height: '100%'
|
||||
}}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
style={{
|
||||
color: '#fff',
|
||||
fontSize: '20px',
|
||||
fontWeight: 'bold',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
onClick={() => navigate('/')}
|
||||
>
|
||||
<img src="/logo.png" alt="Quant Speed Logo" style={{ height: '40px' }} />
|
||||
</motion.div>
|
||||
|
||||
{/* Desktop Menu */}
|
||||
<div className="desktop-menu" style={{ display: 'none', flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
|
||||
<Menu
|
||||
theme="dark"
|
||||
mode="horizontal"
|
||||
selectedKeys={[location.pathname]}
|
||||
items={items}
|
||||
onClick={(e) => handleMenuClick(e.key)}
|
||||
style={{
|
||||
background: 'transparent',
|
||||
borderBottom: 'none',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
minWidth: '400px',
|
||||
marginRight: '20px'
|
||||
}}
|
||||
/>
|
||||
|
||||
{user ? (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 15 }}>
|
||||
{/* 小程序图标状态 */}
|
||||
<WechatOutlined
|
||||
style={{
|
||||
fontSize: 24,
|
||||
color: user.openid && !user.openid.startsWith('web_') ? '#07c160' : '#666',
|
||||
cursor: 'help'
|
||||
}}
|
||||
title={user.openid && !user.openid.startsWith('web_') ? '已绑定微信小程序' : '未绑定微信小程序'}
|
||||
/>
|
||||
|
||||
<Dropdown menu={userMenu}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', color: '#fff' }}>
|
||||
<Avatar src={user.avatar_url} icon={<UserOutlined />} style={{ marginRight: 8 }} />
|
||||
<span>{user.nickname}</span>
|
||||
</div>
|
||||
</Dropdown>
|
||||
</div>
|
||||
) : (
|
||||
<Button type="primary" onClick={showLoginModal}>登录</Button>
|
||||
)}
|
||||
</div>
|
||||
<style>{`
|
||||
@media (min-width: 768px) {
|
||||
.desktop-menu { display: flex !important; }
|
||||
.mobile-menu-btn { display: none !important; }
|
||||
}
|
||||
.desktop-menu .ant-menu-item {
|
||||
border-radius: 24px !important;
|
||||
margin: 0 8px !important;
|
||||
padding: 0 20px !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
||||
background: transparent !important;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
.desktop-menu .ant-menu-item:hover {
|
||||
background: #1890ff !important;
|
||||
border-color: #1890ff !important;
|
||||
}
|
||||
.desktop-menu .ant-menu-item-selected {
|
||||
background: #1890ff !important;
|
||||
border-color: #1890ff !important;
|
||||
}
|
||||
.desktop-menu .ant-menu-item::after {
|
||||
display: none !important;
|
||||
}
|
||||
`}</style>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<Button
|
||||
className="mobile-menu-btn"
|
||||
type="text"
|
||||
icon={<MenuOutlined style={{ color: '#fff', fontSize: 20 }} />}
|
||||
onClick={() => setMobileMenuOpen(true)}
|
||||
/>
|
||||
</div>
|
||||
</Header>
|
||||
|
||||
{/* Mobile Drawer Menu */}
|
||||
<Drawer
|
||||
title={<span style={{ color: '#1890ff' }}>导航菜单</span>}
|
||||
placement="right"
|
||||
onClose={() => setMobileMenuOpen(false)}
|
||||
open={mobileMenuOpen}
|
||||
styles={{ body: { padding: 0, background: '#111' }, header: { background: '#111', borderBottom: '1px solid #333' }, wrapper: { width: 250 } }}
|
||||
>
|
||||
<div style={{ padding: '20px', textAlign: 'center', borderBottom: '1px solid #333' }}>
|
||||
{user ? (
|
||||
<div style={{ color: '#fff' }}>
|
||||
<Avatar
|
||||
src={user.avatar_url}
|
||||
icon={<UserOutlined />}
|
||||
size="large"
|
||||
style={{ marginBottom: 10, cursor: 'pointer' }}
|
||||
onClick={() => { setProfileVisible(true); setMobileMenuOpen(false); }}
|
||||
/>
|
||||
<div onClick={() => { setProfileVisible(true); setMobileMenuOpen(false); }} style={{ cursor: 'pointer' }}>
|
||||
{user.nickname}
|
||||
</div>
|
||||
<Button type="link" danger onClick={handleLogout} style={{ marginTop: 10 }}>退出登录</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Button type="primary" block onClick={() => { showLoginModal(); setMobileMenuOpen(false); }}>登录 / 注册</Button>
|
||||
)}
|
||||
</div>
|
||||
<Menu
|
||||
theme="dark"
|
||||
mode="vertical"
|
||||
selectedKeys={[location.pathname]}
|
||||
items={items}
|
||||
onClick={(e) => handleMenuClick(e.key)}
|
||||
style={{ background: 'transparent', borderRight: 'none' }}
|
||||
/>
|
||||
</Drawer>
|
||||
|
||||
<LoginModal
|
||||
visible={loginModalVisible}
|
||||
onClose={hideLoginModal}
|
||||
onLoginSuccess={(userData) => login(userData)}
|
||||
/>
|
||||
|
||||
<ProfileModal
|
||||
visible={profileVisible}
|
||||
onClose={() => setProfileVisible(false)}
|
||||
/>
|
||||
|
||||
<Content style={{ marginTop: 72, padding: '40px 20px', overflowX: 'hidden' }}>
|
||||
<div style={{
|
||||
maxWidth: '1200px',
|
||||
margin: '0 auto',
|
||||
width: '100%',
|
||||
minHeight: 'calc(100vh - 128px)'
|
||||
}}>
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={location.pathname}
|
||||
initial={{ opacity: 0, y: 20, filter: 'blur(10px)' }}
|
||||
animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
|
||||
exit={{ opacity: 0, y: -20, filter: 'blur(10px)' }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</Content>
|
||||
|
||||
<Footer style={{ textAlign: 'center', background: 'rgba(0,0,0,0.5)', color: '#666', backdropFilter: 'blur(5px)' }}>
|
||||
Quant Speed AI Hardware ©{new Date().getFullYear()} Created by Quant Speed Tech
|
||||
</Footer>
|
||||
</AntLayout>
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
123
frontend/src/components/LoginModal.jsx
Normal file
123
frontend/src/components/LoginModal.jsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Modal, Form, Input, Button, message } from 'antd';
|
||||
import { UserOutlined, LockOutlined, MobileOutlined } from '@ant-design/icons';
|
||||
import { sendSms, phoneLogin } from '../api';
|
||||
|
||||
const LoginModal = ({ visible, onClose, onLoginSuccess }) => {
|
||||
const [form] = Form.useForm();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [countdown, setCountdown] = useState(0);
|
||||
|
||||
const handleSendCode = async () => {
|
||||
try {
|
||||
const phone = form.getFieldValue('phone_number');
|
||||
if (!phone) {
|
||||
message.error('请输入手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
// 简单的手机号校验
|
||||
if (!/^1[3-9]\d{9}$/.test(phone)) {
|
||||
message.error('请输入有效的手机号');
|
||||
return;
|
||||
}
|
||||
//
|
||||
await sendSms({ phone_number: phone });
|
||||
message.success('验证码已发送');
|
||||
|
||||
setCountdown(60);
|
||||
const timer = setInterval(() => {
|
||||
setCountdown((prev) => {
|
||||
if (prev <= 1) {
|
||||
clearInterval(timer);
|
||||
return 0;
|
||||
}
|
||||
return prev - 1;
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error('发送失败: ' + (error.response?.data?.error || '网络错误'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (values) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await phoneLogin(values);
|
||||
|
||||
message.success('登录成功');
|
||||
onLoginSuccess(res.data);
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error('登录失败: ' + (error.response?.data?.error || '网络错误'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title="用户登录 / 注册"
|
||||
open={visible}
|
||||
onCancel={onClose}
|
||||
footer={null}
|
||||
destroyOnHidden
|
||||
centered
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
name="login_form"
|
||||
onFinish={handleSubmit}
|
||||
layout="vertical"
|
||||
style={{ marginTop: 20 }}
|
||||
>
|
||||
<Form.Item
|
||||
name="phone_number"
|
||||
rules={[{ required: true, message: '请输入手机号' }]}
|
||||
>
|
||||
<Input
|
||||
prefix={<MobileOutlined />}
|
||||
placeholder="手机号码"
|
||||
size="large"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="code"
|
||||
rules={[{ required: true, message: '请输入验证码' }]}
|
||||
>
|
||||
<div style={{ display: 'flex', gap: 10 }}>
|
||||
<Input
|
||||
prefix={<LockOutlined />}
|
||||
placeholder="验证码"
|
||||
size="large"
|
||||
/>
|
||||
<Button
|
||||
size="large"
|
||||
onClick={handleSendCode}
|
||||
disabled={countdown > 0}
|
||||
>
|
||||
{countdown > 0 ? `${countdown}s` : '获取验证码'}
|
||||
</Button>
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" block size="large" loading={loading}>
|
||||
登录
|
||||
</Button>
|
||||
</Form.Item>
|
||||
|
||||
<div style={{ textAlign: 'center', color: '#999', fontSize: 12 }}>
|
||||
未注册的手机号验证后将自动创建账号<br/>
|
||||
已在小程序绑定的手机号将自动同步身份
|
||||
</div>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginModal;
|
||||
218
frontend/src/components/ModelViewer.jsx
Normal file
218
frontend/src/components/ModelViewer.jsx
Normal file
@@ -0,0 +1,218 @@
|
||||
import React, { Suspense, useState, useEffect } from 'react';
|
||||
import { Canvas, useLoader } from '@react-three/fiber';
|
||||
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
|
||||
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
|
||||
import { OrbitControls, Stage, useProgress, Environment, ContactShadows } from '@react-three/drei';
|
||||
import { Spin } from 'antd';
|
||||
import JSZip from 'jszip';
|
||||
import * as THREE from 'three';
|
||||
|
||||
class ErrorBoundary extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { hasError: false };
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error) {
|
||||
return { hasError: true };
|
||||
}
|
||||
|
||||
componentDidCatch(error, errorInfo) {
|
||||
console.error("3D Model Viewer Error:", error, errorInfo);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '100%',
|
||||
color: '#888',
|
||||
padding: 20,
|
||||
textAlign: 'center',
|
||||
fontSize: '14px'
|
||||
}}>
|
||||
3D 模型加载失败
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
const Model = ({ objPath, mtlPath, scale = 1 }) => {
|
||||
// If mtlPath is provided, load materials first
|
||||
const materials = mtlPath ? useLoader(MTLLoader, mtlPath) : null;
|
||||
|
||||
const obj = useLoader(OBJLoader, objPath, (loader) => {
|
||||
if (materials) {
|
||||
materials.preload();
|
||||
loader.setMaterials(materials);
|
||||
}
|
||||
});
|
||||
|
||||
const clone = obj.clone();
|
||||
return <primitive object={clone} scale={scale} />;
|
||||
};
|
||||
|
||||
const LoadingOverlay = () => {
|
||||
const { progress, active } = useProgress();
|
||||
if (!active) return null;
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: 'rgba(0,0,0,0.5)',
|
||||
zIndex: 10,
|
||||
pointerEvents: 'none'
|
||||
}}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<Spin size="large" />
|
||||
<div style={{ color: '#1890ff', marginTop: 10, fontWeight: 'bold' }}>
|
||||
{progress.toFixed(0)}% Loading
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ModelViewer = ({ objPath, mtlPath, scale = 1, autoRotate = true }) => {
|
||||
const [paths, setPaths] = useState(null);
|
||||
const [unzipping, setUnzipping] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
const blobUrls = [];
|
||||
|
||||
const loadPaths = async () => {
|
||||
if (!objPath) return;
|
||||
|
||||
// 如果是 zip 文件
|
||||
if (objPath.toLowerCase().endsWith('.zip')) {
|
||||
setUnzipping(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await fetch(objPath);
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
const zip = await JSZip.loadAsync(arrayBuffer);
|
||||
|
||||
let extractedObj = null;
|
||||
let extractedMtl = null;
|
||||
const fileMap = {};
|
||||
|
||||
// 1. 提取所有文件并创建 Blob URL 映射
|
||||
for (const [filename, file] of Object.entries(zip.files)) {
|
||||
if (file.dir) continue;
|
||||
|
||||
const content = await file.async('blob');
|
||||
const url = URL.createObjectURL(content);
|
||||
blobUrls.push(url);
|
||||
|
||||
// 记录文件名到 URL 的映射，用于后续材质引用图片等情况
|
||||
const baseName = filename.split('/').pop();
|
||||
fileMap[baseName] = url;
|
||||
|
||||
if (filename.toLowerCase().endsWith('.obj')) {
|
||||
extractedObj = url;
|
||||
} else if (filename.toLowerCase().endsWith('.mtl')) {
|
||||
extractedMtl = url;
|
||||
}
|
||||
}
|
||||
|
||||
if (isMounted) {
|
||||
if (extractedObj) {
|
||||
setPaths({ obj: extractedObj, mtl: extractedMtl });
|
||||
} else {
|
||||
setError('压缩包内未找到 .obj 模型文件');
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error unzipping model:', err);
|
||||
if (isMounted) setError('加载压缩包失败');
|
||||
} finally {
|
||||
if (isMounted) setUnzipping(false);
|
||||
}
|
||||
} else {
|
||||
// 普通路径
|
||||
setPaths({ obj: objPath, mtl: mtlPath });
|
||||
}
|
||||
};
|
||||
|
||||
loadPaths();
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
// 清理 Blob URL 释放内存
|
||||
blobUrls.forEach(url => URL.revokeObjectURL(url));
|
||||
};
|
||||
}, [objPath, mtlPath]);
|
||||
|
||||
if (unzipping) {
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '100%',
|
||||
background: 'rgba(0,0,0,0.1)'
|
||||
}}>
|
||||
<Spin size="large" />
|
||||
<div style={{ color: '#00b96b', marginTop: 15, fontWeight: '500' }}>正在解压 3D 资源...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '100%',
|
||||
color: '#ff4d4f',
|
||||
padding: 20,
|
||||
textAlign: 'center'
|
||||
}}>
|
||||
{error}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!paths) return null;
|
||||
|
||||
return (
|
||||
<div style={{ position: 'relative', width: '100%', height: '100%' }}>
|
||||
<ErrorBoundary>
|
||||
<LoadingOverlay />
|
||||
<Canvas shadows dpr={[1, 2]} camera={{ fov: 45, position: [0, 0, 5] }} style={{ height: '100%', width: '100%' }}>
|
||||
<ambientLight intensity={0.7} />
|
||||
<pointLight position={[10, 10, 10]} intensity={1} />
|
||||
<spotLight position={[-10, 10, 10]} angle={0.15} penumbra={1} intensity={1} />
|
||||
|
||||
<Suspense fallback={null}>
|
||||
<Stage environment="city" intensity={0.6} adjustCamera={true}>
|
||||
<Model objPath={paths.obj} mtlPath={paths.mtl} scale={scale} />
|
||||
</Stage>
|
||||
<Environment preset="city" />
|
||||
<ContactShadows position={[0, -0.8, 0]} opacity={0.4} scale={10} blur={2} far={0.8} />
|
||||
</Suspense>
|
||||
<OrbitControls autoRotate={autoRotate} makeDefault />
|
||||
</Canvas>
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModelViewer;
|
||||
174
frontend/src/components/ParticleBackground.jsx
Normal file
174
frontend/src/components/ParticleBackground.jsx
Normal file
@@ -0,0 +1,174 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
|
||||
const ParticleBackground = () => {
|
||||
const canvasRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
const ctx = canvas.getContext('2d');
|
||||
let animationFrameId;
|
||||
|
||||
const resizeCanvas = () => {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
};
|
||||
|
||||
window.addEventListener('resize', resizeCanvas);
|
||||
resizeCanvas();
|
||||
|
||||
const particles = [];
|
||||
const particleCount = 100;
|
||||
const meteors = [];
|
||||
const meteorCount = 8;
|
||||
|
||||
class Particle {
|
||||
constructor() {
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = Math.random() * canvas.height;
|
||||
this.vx = (Math.random() - 0.5) * 0.5;
|
||||
this.vy = (Math.random() - 0.5) * 0.5;
|
||||
this.size = Math.random() * 2;
|
||||
this.color = Math.random() > 0.5 ? 'rgba(0, 185, 107, ' : 'rgba(0, 240, 255, '; // Green or Blue
|
||||
}
|
||||
|
||||
update() {
|
||||
this.x += this.vx;
|
||||
this.y += this.vy;
|
||||
|
||||
if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
|
||||
if (this.y < 0 || this.y > canvas.height) this.vy *= -1;
|
||||
}
|
||||
|
||||
draw() {
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||||
ctx.fillStyle = this.color + Math.random() * 0.5 + ')';
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
class Meteor {
|
||||
constructor() {
|
||||
this.reset();
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.x = Math.random() * canvas.width * 1.5; // Start further right
|
||||
this.y = Math.random() * -canvas.height; // Start further above
|
||||
this.vx = -(Math.random() * 5 + 5); // Faster
|
||||
this.vy = Math.random() * 5 + 5; // Faster
|
||||
this.len = Math.random() * 150 + 150; // Longer trail
|
||||
this.color = Math.random() > 0.5 ? 'rgba(0, 185, 107, ' : 'rgba(0, 240, 255, ';
|
||||
this.opacity = 0;
|
||||
this.maxOpacity = Math.random() * 0.5 + 0.2;
|
||||
this.wait = Math.random() * 300; // Random delay before showing up
|
||||
}
|
||||
|
||||
update() {
|
||||
if (this.wait > 0) {
|
||||
this.wait--;
|
||||
return;
|
||||
}
|
||||
|
||||
this.x += this.vx;
|
||||
this.y += this.vy;
|
||||
|
||||
if (this.opacity < this.maxOpacity) {
|
||||
this.opacity += 0.02;
|
||||
}
|
||||
|
||||
if (this.x < -this.len || this.y > canvas.height + this.len) {
|
||||
this.reset();
|
||||
}
|
||||
}
|
||||
|
||||
draw() {
|
||||
if (this.wait > 0) return;
|
||||
|
||||
const tailX = this.x - this.vx * (this.len / 15);
|
||||
const tailY = this.y - this.vy * (this.len / 15);
|
||||
|
||||
const gradient = ctx.createLinearGradient(this.x, this.y, tailX, tailY);
|
||||
gradient.addColorStop(0, this.color + this.opacity + ')');
|
||||
gradient.addColorStop(0.1, this.color + (this.opacity * 0.5) + ')');
|
||||
gradient.addColorStop(1, this.color + '0)');
|
||||
|
||||
ctx.save();
|
||||
|
||||
// Add glow effect
|
||||
ctx.shadowBlur = 8;
|
||||
ctx.shadowColor = this.color.replace('rgba', 'rgb').replace(', ', ')');
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = gradient;
|
||||
ctx.lineWidth = 2;
|
||||
ctx.lineCap = 'round';
|
||||
ctx.moveTo(this.x, this.y);
|
||||
ctx.lineTo(tailX, tailY);
|
||||
ctx.stroke();
|
||||
|
||||
// Add a bright head
|
||||
ctx.beginPath();
|
||||
ctx.fillStyle = '#fff';
|
||||
ctx.arc(this.x, this.y, 1, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < particleCount; i++) {
|
||||
particles.push(new Particle());
|
||||
}
|
||||
|
||||
for (let i = 0; i < meteorCount; i++) {
|
||||
meteors.push(new Meteor());
|
||||
}
|
||||
|
||||
const animate = () => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Draw meteors first (in background)
|
||||
meteors.forEach(m => {
|
||||
m.update();
|
||||
m.draw();
|
||||
});
|
||||
|
||||
// Draw connecting lines
|
||||
ctx.lineWidth = 0.5;
|
||||
for (let i = 0; i < particleCount; i++) {
|
||||
for (let j = i; j < particleCount; j++) {
|
||||
const dx = particles[i].x - particles[j].x;
|
||||
const dy = particles[i].y - particles[j].y;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
if (distance < 100) {
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = `rgba(100, 255, 218, ${1 - distance / 100})`;
|
||||
ctx.moveTo(particles[i].x, particles[i].y);
|
||||
ctx.lineTo(particles[j].x, particles[j].y);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
particles.forEach(p => {
|
||||
p.update();
|
||||
p.draw();
|
||||
});
|
||||
|
||||
animationFrameId = requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
animate();
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', resizeCanvas);
|
||||
cancelAnimationFrame(animationFrameId);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return <canvas ref={canvasRef} id="particle-canvas" />;
|
||||
};
|
||||
|
||||
export default ParticleBackground;
|
||||
124
frontend/src/components/ProfileModal.jsx
Normal file
124
frontend/src/components/ProfileModal.jsx
Normal file
@@ -0,0 +1,124 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Modal, Form, Input, Upload, Button, message, Avatar } from 'antd';
|
||||
import { UserOutlined, UploadOutlined, LoadingOutlined } from '@ant-design/icons';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import { updateUserInfo, uploadUserAvatar } from '../api';
|
||||
|
||||
const ProfileModal = ({ visible, onClose }) => {
|
||||
const { user, updateUser } = useAuth();
|
||||
const [form] = Form.useForm();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [avatarUrl, setAvatarUrl] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (visible && user) {
|
||||
form.setFieldsValue({
|
||||
nickname: user.nickname,
|
||||
});
|
||||
setAvatarUrl(user.avatar_url);
|
||||
}
|
||||
}, [visible, user, form]);
|
||||
|
||||
const handleUpload = async (file) => {
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
|
||||
if (!isJpgOrPng) {
|
||||
message.error('You can only upload JPG/PNG file!');
|
||||
return Upload.LIST_IGNORE;
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.error('Image must smaller than 2MB!');
|
||||
return Upload.LIST_IGNORE;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
setUploading(true);
|
||||
try {
|
||||
const res = await uploadUserAvatar(formData);
|
||||
if (res.data.success) {
|
||||
setAvatarUrl(res.data.file_url);
|
||||
message.success('头像上传成功');
|
||||
} else {
|
||||
message.error('头像上传失败: ' + (res.data.message || '未知错误'));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Upload failed:', error);
|
||||
message.error('头像上传失败');
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
return false; // Prevent default auto upload
|
||||
};
|
||||
|
||||
const handleOk = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
setLoading(true);
|
||||
|
||||
const updateData = {
|
||||
nickname: values.nickname,
|
||||
avatar_url: avatarUrl
|
||||
};
|
||||
|
||||
const res = await updateUserInfo(updateData);
|
||||
updateUser(res.data);
|
||||
message.success('个人信息更新成功');
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error('Update failed:', error);
|
||||
message.error('更新失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title="个人设置"
|
||||
open={visible}
|
||||
onOk={handleOk}
|
||||
onCancel={onClose}
|
||||
confirmLoading={loading}
|
||||
centered
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
style={{ marginTop: 20 }}
|
||||
>
|
||||
<Form.Item label="头像" style={{ textAlign: 'center' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 15 }}>
|
||||
<Avatar
|
||||
size={100}
|
||||
src={avatarUrl}
|
||||
icon={<UserOutlined />}
|
||||
/>
|
||||
<Upload
|
||||
name="avatar"
|
||||
showUploadList={false}
|
||||
beforeUpload={handleUpload}
|
||||
accept="image/*"
|
||||
>
|
||||
<Button icon={uploading ? <LoadingOutlined /> : <UploadOutlined />} loading={uploading}>
|
||||
{uploading ? '上传中...' : '更换头像'}
|
||||
</Button>
|
||||
</Upload>
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="nickname"
|
||||
label="昵称"
|
||||
rules={[{ required: true, message: '请输入昵称' }]}
|
||||
>
|
||||
<Input placeholder="请输入昵称" maxLength={20} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfileModal;
|
||||
101
frontend/src/components/activity/ActivityCard.jsx
Normal file
101
frontend/src/components/activity/ActivityCard.jsx
Normal file
@@ -0,0 +1,101 @@
|
||||
|
||||
import React, { useState, useRef, useLayoutEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { CalendarOutlined } from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import styles from './activity.module.less';
|
||||
import { hoverScale } from '../../animation';
|
||||
|
||||
const ActivityCard = ({ activity }) => {
|
||||
const navigate = useNavigate();
|
||||
const [isLoaded, setIsLoaded] = useState(false);
|
||||
const [hasError, setHasError] = useState(false);
|
||||
const imgRef = useRef(null);
|
||||
|
||||
const handleCardClick = () => {
|
||||
navigate(`/activity/${activity.id}`);
|
||||
};
|
||||
|
||||
const getStatus = (startTime) => {
|
||||
const now = new Date();
|
||||
const start = new Date(startTime);
|
||||
if (now < start) return '即将开始';
|
||||
return '报名中';
|
||||
};
|
||||
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr) return 'TBD';
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleDateString('zh-CN', { month: 'long', day: 'numeric' });
|
||||
};
|
||||
|
||||
const imgSrc = hasError
|
||||
? 'https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=600&h=400&fit=crop'
|
||||
: (activity.display_banner_url || activity.banner_url || activity.cover_image || 'https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=600&h=400&fit=crop');
|
||||
|
||||
// Check if image is already loaded (cached) to prevent flashing
|
||||
useLayoutEffect(() => {
|
||||
if (imgRef.current && imgRef.current.complete) {
|
||||
setIsLoaded(true);
|
||||
}
|
||||
}, [imgSrc]);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className={styles.activityCard}
|
||||
variants={hoverScale}
|
||||
whileHover="hover"
|
||||
onClick={handleCardClick}
|
||||
layoutId={`activity-card-${activity.id}`}
|
||||
style={{ willChange: 'transform' }}
|
||||
>
|
||||
<div className={styles.imageContainer}>
|
||||
{/* Placeholder Background - Always visible behind the image */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
backgroundColor: '#f5f5f5',
|
||||
zIndex: 0,
|
||||
}}
|
||||
/>
|
||||
|
||||
<img
|
||||
ref={imgRef}
|
||||
src={imgSrc}
|
||||
alt={activity.title}
|
||||
style={{
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
opacity: isLoaded ? 1 : 0,
|
||||
transition: 'opacity 0.3s ease-out'
|
||||
}}
|
||||
onLoad={() => setIsLoaded(true)}
|
||||
onError={() => {
|
||||
setHasError(true);
|
||||
setIsLoaded(true);
|
||||
}}
|
||||
loading="lazy"
|
||||
/>
|
||||
<div className={styles.overlay} style={{ zIndex: 2 }}>
|
||||
<div className={styles.statusTag}>
|
||||
{activity.status || getStatus(activity.start_time)}
|
||||
</div>
|
||||
<h3 className={styles.title}>{activity.title}</h3>
|
||||
<div className={styles.time}>
|
||||
<CalendarOutlined />
|
||||
<span>{formatDate(activity.start_time)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActivityCard;
|
||||
67
frontend/src/components/activity/ActivityCard.stories.jsx
Normal file
67
frontend/src/components/activity/ActivityCard.stories.jsx
Normal file
@@ -0,0 +1,67 @@
|
||||
|
||||
import React from 'react';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import ActivityCard from './ActivityCard';
|
||||
import '../../index.css'; // Global styles
|
||||
import '../../App.css';
|
||||
|
||||
export default {
|
||||
title: 'Components/Activity/ActivityCard',
|
||||
component: ActivityCard,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<MemoryRouter>
|
||||
<div style={{ maxWidth: '400px', padding: '20px' }}>
|
||||
<Story />
|
||||
</div>
|
||||
</MemoryRouter>
|
||||
),
|
||||
],
|
||||
tags: ['autodocs'],
|
||||
};
|
||||
|
||||
const Template = (args) => <ActivityCard {...args} />;
|
||||
|
||||
export const NotStarted = Template.bind({});
|
||||
NotStarted.args = {
|
||||
activity: {
|
||||
id: 1,
|
||||
title: 'Future AI Hardware Summit 2026',
|
||||
start_time: '2026-12-01T09:00:00',
|
||||
status: '即将开始',
|
||||
cover_image: 'https://images.unsplash.com/photo-1485827404703-89b55fcc595e?auto=format&fit=crop&q=80',
|
||||
},
|
||||
};
|
||||
|
||||
export const Ongoing = Template.bind({});
|
||||
Ongoing.args = {
|
||||
activity: {
|
||||
id: 2,
|
||||
title: 'Edge Computing Hackathon',
|
||||
start_time: '2025-10-20T10:00:00',
|
||||
status: '报名中',
|
||||
cover_image: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80',
|
||||
},
|
||||
};
|
||||
|
||||
export const Ended = Template.bind({});
|
||||
Ended.args = {
|
||||
activity: {
|
||||
id: 3,
|
||||
title: 'Deep Learning Workshop',
|
||||
start_time: '2023-05-15T14:00:00',
|
||||
status: '已结束',
|
||||
cover_image: 'https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80',
|
||||
},
|
||||
};
|
||||
|
||||
export const SignedUp = Template.bind({});
|
||||
SignedUp.args = {
|
||||
activity: {
|
||||
id: 4,
|
||||
title: 'Exclusive Developer Meetup',
|
||||
start_time: '2025-11-11T18:00:00',
|
||||
status: '已报名',
|
||||
cover_image: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&q=80',
|
||||
},
|
||||
};
|
||||
110
frontend/src/components/activity/ActivityList.jsx
Normal file
110
frontend/src/components/activity/ActivityList.jsx
Normal file
@@ -0,0 +1,110 @@
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { RightOutlined, LeftOutlined } from '@ant-design/icons';
|
||||
import { getActivities } from '../../api';
|
||||
import ActivityCard from './ActivityCard';
|
||||
import styles from './activity.module.less';
|
||||
import { fadeInUp, staggerContainer } from '../../animation';
|
||||
|
||||
const ActivityList = () => {
|
||||
const { data: activities, isLoading, error } = useQuery({
|
||||
queryKey: ['activities'],
|
||||
queryFn: async () => {
|
||||
const res = await getActivities();
|
||||
// Handle different response structures
|
||||
return Array.isArray(res.data) ? res.data : (res.data?.results || []);
|
||||
},
|
||||
staleTime: 5 * 60 * 1000, // 5 minutes cache
|
||||
});
|
||||
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
|
||||
// Auto-play for desktop carousel
|
||||
useEffect(() => {
|
||||
if (!activities || activities.length <= 1) return;
|
||||
const interval = setInterval(() => {
|
||||
setCurrentIndex((prev) => (prev + 1) % activities.length);
|
||||
}, 5000);
|
||||
return () => clearInterval(interval);
|
||||
}, [activities]);
|
||||
|
||||
const nextSlide = () => {
|
||||
if (!activities) return;
|
||||
setCurrentIndex((prev) => (prev + 1) % activities.length);
|
||||
};
|
||||
|
||||
const prevSlide = () => {
|
||||
if (!activities) return;
|
||||
setCurrentIndex((prev) => (prev - 1 + activities.length) % activities.length);
|
||||
};
|
||||
|
||||
if (isLoading) return <div className={styles.loading}>Loading activities...</div>;
|
||||
if (error) return null; // Or error state
|
||||
if (!activities || activities.length === 0) return null;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className={styles.activitySection}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.2 }}
|
||||
variants={staggerContainer}
|
||||
>
|
||||
<div className={styles.header}>
|
||||
<h2 className={styles.sectionTitle}>
|
||||
近期活动 / EVENTS
|
||||
</h2>
|
||||
<div className={styles.controls}>
|
||||
<button onClick={prevSlide} className={styles.navBtn}><LeftOutlined /></button>
|
||||
<button onClick={nextSlide} className={styles.navBtn}><RightOutlined /></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop: Carousel (Show one prominent, but allows list structure if needed)
|
||||
User said: "Activity only shows one, and in the form of a sliding page"
|
||||
*/}
|
||||
<div className={styles.desktopCarousel}>
|
||||
<AnimatePresence>
|
||||
<motion.div
|
||||
key={currentIndex}
|
||||
initial={{ x: '100%' }}
|
||||
animate={{ x: 0, zIndex: 1 }}
|
||||
exit={{ x: '-100%', zIndex: 0 }}
|
||||
transition={{ duration: 0.5, ease: "easeInOut" }}
|
||||
style={{
|
||||
width: '100%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
}}
|
||||
>
|
||||
<ActivityCard activity={activities[currentIndex]} />
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
|
||||
<div className={styles.dots} style={{ position: 'absolute', bottom: '10px', width: '100%', zIndex: 10 }}>
|
||||
{activities.map((_, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className={`${styles.dot} ${idx === currentIndex ? styles.activeDot : ''}`}
|
||||
onClick={() => setCurrentIndex(idx)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile: Vertical List/Scroll as requested "Mobile vertical scroll" */}
|
||||
<div className={styles.mobileList}>
|
||||
{activities.map((item, index) => (
|
||||
<motion.div key={item.id} variants={fadeInUp} custom={index}>
|
||||
<ActivityCard activity={item} />
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActivityList;
|
||||
411
frontend/src/components/activity/activity.module.less
Normal file
411
frontend/src/components/activity/activity.module.less
Normal file
@@ -0,0 +1,411 @@
|
||||
|
||||
@import '../../theme.module.less';
|
||||
|
||||
.activitySection {
|
||||
padding: var(--spacing-lg) 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: none; /* Hide carousel controls on mobile */
|
||||
}
|
||||
}
|
||||
|
||||
.navBtn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: var(--text-primary);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop Carousel */
|
||||
.desktopCarousel {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 440px; /* 400px card + space for dots */
|
||||
overflow: hidden;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-top: var(--spacing-md);
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.activeDot {
|
||||
background: var(--primary-color);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile List */
|
||||
.mobileList {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Card Styles --- */
|
||||
.activityCard {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
border-radius: var(--border-radius-lg);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
background: var(--background-card);
|
||||
box-shadow: var(--box-shadow-base);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding: var(--spacing-lg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.statusTag {
|
||||
display: inline-block;
|
||||
background: var(--primary-color);
|
||||
color: #fff;
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
width: fit-content;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--text-primary);
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
line-height: 1.3;
|
||||
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.activityTitle {
|
||||
font-size: 28px;
|
||||
margin-bottom: 16px;
|
||||
color: #fff;
|
||||
line-height: 1.3;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 22px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.metaInfo {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 16px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
flex-wrap: wrap;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.metaItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 13px;
|
||||
gap: 6px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.statusWrapper {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.headerGradient {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
background: linear-gradient(to top, #1f1f1f, transparent);
|
||||
}
|
||||
|
||||
.time {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* Detail Page Styles */
|
||||
.detailHeader {
|
||||
position: relative;
|
||||
height: 50vh;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: 40vh;
|
||||
min-height: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.detailImage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.detailContent {
|
||||
max-width: 800px;
|
||||
margin: -60px auto 0;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
padding: 0 var(--spacing-lg) 100px; /* Bottom padding for fixed footer */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0 var(--spacing-md) 80px;
|
||||
margin-top: -40px;
|
||||
}
|
||||
}
|
||||
|
||||
.infoCard {
|
||||
background: var(--background-card);
|
||||
padding: var(--spacing-lg);
|
||||
border-radius: var(--border-radius-lg);
|
||||
box-shadow: var(--box-shadow-base);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
border: 1px solid var(--border-color);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
}
|
||||
|
||||
.richText {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.8;
|
||||
font-size: 16px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
border-radius: var(--border-radius-base);
|
||||
margin: var(--spacing-md) 0;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
color: var(--text-primary);
|
||||
margin-top: var(--spacing-lg);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-top: var(--spacing-md);
|
||||
font-size: 1.2em; /* slightly smaller headings */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedFooter {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: rgba(31, 31, 31, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: var(--spacing-md) var(--spacing-lg);
|
||||
border-top: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
z-index: 100;
|
||||
box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.actionBtn {
|
||||
background: var(--primary-color);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 12px 32px;
|
||||
border-radius: 24px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 12px rgba(0, 185, 107, 0.3);
|
||||
transition: all 0.3s;
|
||||
|
||||
&:disabled {
|
||||
background: #555;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Markdown Table Styles */
|
||||
.richText table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 16px 0;
|
||||
background-color: #2d2d2d;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.richText th,
|
||||
.richText td {
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #434343;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.richText th {
|
||||
background-color: #1f1f1f;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.richText tr:nth-child(even) {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.richText tr:hover {
|
||||
background-color: #3a3a3a;
|
||||
}
|
||||
|
||||
/* Code Block Styles */
|
||||
.codeBlockWrapper {
|
||||
position: relative;
|
||||
margin: 16px 0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover .copyButton {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.copyButton {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
z-index: 10;
|
||||
padding: 4px 8px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
opacity: 0; /* Hidden by default, shown on hover */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
96
frontend/src/components/competition/CompetitionCard.jsx
Normal file
96
frontend/src/components/competition/CompetitionCard.jsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import React from 'react';
|
||||
import { Card, Tag, Typography, Space, Divider } from 'antd';
|
||||
import { CalendarOutlined } from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import dayjs from 'dayjs';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
|
||||
const { Title } = Typography;
|
||||
|
||||
const CompetitionCard = ({ competition }) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const getStatusColor = (status) => {
|
||||
switch(status) {
|
||||
case 'published': return 'cyan';
|
||||
case 'registration': return 'green';
|
||||
case 'submission': return 'blue';
|
||||
case 'judging': return 'orange';
|
||||
case 'ended': return 'red';
|
||||
default: return 'default';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusText = (status) => {
|
||||
switch(status) {
|
||||
case 'published': return '即将开始';
|
||||
case 'registration': return '报名中';
|
||||
case 'submission': return '作品提交中';
|
||||
case 'judging': return '评审中';
|
||||
case 'ended': return '已结束';
|
||||
default: return '草稿';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
hoverable
|
||||
cover={
|
||||
<div style={{ height: 280, overflow: 'hidden', position: 'relative' }}>
|
||||
<img
|
||||
alt={competition.title}
|
||||
src={competition.display_cover_image || 'https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=400&h=280&fit=crop'}
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
/>
|
||||
<div style={{ position: 'absolute', top: 10, right: 10 }}>
|
||||
<Tag color={getStatusColor(competition.status)} style={{ marginRight: 0, fontSize: 14, padding: '4px 12px' }}>
|
||||
{getStatusText(competition.status)}
|
||||
</Tag>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
style={{ height: '100%', display: 'flex', flexDirection: 'column', fontSize: 16 }}
|
||||
bodyStyle={{ flex: 1, display: 'flex', flexDirection: 'column', padding: 24 }}
|
||||
onClick={() => navigate(`/competitions/${competition.id}`)}
|
||||
>
|
||||
<Title level={3} ellipsis={{ rows: 2 }} style={{ marginBottom: 12, height: 64, fontSize: 20 }}>
|
||||
{competition.title}
|
||||
</Title>
|
||||
|
||||
<div style={{
|
||||
flex: 1,
|
||||
color: 'rgba(255,255,255,0.65)',
|
||||
overflow: 'hidden',
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 3,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
marginBottom: 0,
|
||||
fontSize: '15px',
|
||||
lineHeight: 1.6
|
||||
}}>
|
||||
<ReactMarkdown
|
||||
allowedElements={['p', 'text', 'strong', 'em', 'del']}
|
||||
unwrapDisallowed={true}
|
||||
components={{
|
||||
p: (props) => <span {...props} />,
|
||||
}}
|
||||
>
|
||||
{competition.description}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
|
||||
<Divider style={{ margin: '12px 0' }} />
|
||||
|
||||
<Space direction="vertical" style={{ width: '100%' }} size={8}>
|
||||
<Space>
|
||||
<CalendarOutlined style={{ color: '#1890ff', fontSize: 16 }} />
|
||||
<span style={{ fontSize: 14 }}>
|
||||
{dayjs(competition.start_time).format('YYYY-MM-DD')} ~ {dayjs(competition.end_time).format('YYYY-MM-DD')}
|
||||
</span>
|
||||
</Space>
|
||||
</Space>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompetitionCard;
|
||||
445
frontend/src/components/competition/CompetitionDetail.jsx
Normal file
445
frontend/src/components/competition/CompetitionDetail.jsx
Normal file
@@ -0,0 +1,445 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { Typography, Tabs, Button, Row, Col, Card, Statistic, Tag, Descriptions, Empty, message, Spin, Modal, List, Avatar, Grid } from 'antd';
|
||||
import { CalendarOutlined, TrophyOutlined, UserOutlined, FileTextOutlined, CloudUploadOutlined, CopyOutlined, CheckOutlined, MessageOutlined } from '@ant-design/icons';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import rehypeRaw from 'rehype-raw';
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
||||
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
||||
import dayjs from 'dayjs';
|
||||
import { getCompetitionDetail, getProjects, getMyCompetitionEnrollment, enrollCompetition, getComments } from '../../api';
|
||||
import ProjectSubmission from './ProjectSubmission';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
import 'github-markdown-css/github-markdown-dark.css';
|
||||
|
||||
/**
|
||||
* Get the full URL for an image.
|
||||
* Handles relative paths and ensures correct API base URL is used.
|
||||
* @param {string} url - The image URL path
|
||||
* @returns {string} The full absolute URL
|
||||
*/
|
||||
const getImageUrl = (url) => {
|
||||
if (!url) return '';
|
||||
if (url.startsWith('http') || url.startsWith('//')) return url;
|
||||
const apiUrl = import.meta.env.VITE_API_URL || 'http://localhost:8000/api';
|
||||
// Remove /api suffix if present to get the root URL for media files
|
||||
const baseUrl = apiUrl.replace(/\/api\/?$/, '');
|
||||
return `${baseUrl}${url}`;
|
||||
};
|
||||
|
||||
const { Title, Paragraph } = Typography;
|
||||
const { useBreakpoint } = Grid;
|
||||
|
||||
/**
|
||||
* Code block component for markdown rendering with syntax highlighting and copy functionality.
|
||||
*/
|
||||
const CodeBlock = ({ inline, className, children, ...props }) => {
|
||||
const [copied, setCopied] = useState(false);
|
||||
const match = /language-(\w+)/.exec(className || '');
|
||||
const codeString = String(children).replace(/\n$/, '');
|
||||
|
||||
const handleCopy = () => {
|
||||
navigator.clipboard.writeText(codeString);
|
||||
setCopied(true);
|
||||
message.success('代码已复制');
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
return !inline && match ? (
|
||||
<div style={{ position: 'relative', margin: '1em 0' }}>
|
||||
<div
|
||||
onClick={handleCopy}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 8,
|
||||
right: 8,
|
||||
color: '#ccc',
|
||||
cursor: 'pointer',
|
||||
zIndex: 1,
|
||||
background: 'rgba(0,0,0,0.5)',
|
||||
padding: '4px 8px',
|
||||
borderRadius: 4,
|
||||
fontSize: 12,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 4
|
||||
}}
|
||||
>
|
||||
{copied ? <CheckOutlined /> : <CopyOutlined />}
|
||||
<span>{copied ? '已复制' : '复制'}</span>
|
||||
</div>
|
||||
<SyntaxHighlighter
|
||||
style={vscDarkPlus}
|
||||
language={match[1]}
|
||||
PreTag="div"
|
||||
{...props}
|
||||
>
|
||||
{codeString}
|
||||
</SyntaxHighlighter>
|
||||
</div>
|
||||
) : (
|
||||
<code className={className} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Main component for displaying competition details.
|
||||
* Includes tabs for overview, projects, and leaderboard.
|
||||
* Responsive design for mobile and desktop.
|
||||
*/
|
||||
const CompetitionDetail = () => {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const { user, showLoginModal } = useAuth();
|
||||
const [activeTab, setActiveTab] = useState('details');
|
||||
const [submissionModalVisible, setSubmissionModalVisible] = useState(false);
|
||||
const [editingProject, setEditingProject] = useState(null);
|
||||
const [commentsModalVisible, setCommentsModalVisible] = useState(false);
|
||||
const [currentProjectComments, setCurrentProjectComments] = useState([]);
|
||||
const [commentsLoading, setCommentsLoading] = useState(false);
|
||||
|
||||
const screens = useBreakpoint();
|
||||
const isMobile = !screens.md;
|
||||
|
||||
// Fetch competition details
|
||||
const { data: competition, isLoading: loadingDetail } = useQuery({
|
||||
queryKey: ['competition', id],
|
||||
queryFn: () => getCompetitionDetail(id).then(res => res.data)
|
||||
});
|
||||
|
||||
// Fetch projects (for leaderboard/display)
|
||||
const { data: projects } = useQuery({
|
||||
queryKey: ['projects', id],
|
||||
queryFn: () => getProjects({ competition: id, status: 'submitted', page_size: 100 }).then(res => res.data)
|
||||
});
|
||||
|
||||
// Check enrollment status
|
||||
const { data: enrollment, refetch: refetchEnrollment } = useQuery({
|
||||
queryKey: ['enrollment', id],
|
||||
queryFn: () => getMyCompetitionEnrollment(id).then(res => res.data),
|
||||
enabled: !!user,
|
||||
retry: false
|
||||
});
|
||||
|
||||
// Fetch my project if enrolled
|
||||
const { data: myProjects, isLoading: loadingMyProject } = useQuery({
|
||||
queryKey: ['myProject', id, enrollment?.id],
|
||||
queryFn: () => getProjects({ competition: id, contestant: enrollment.id }).then(res => res.data),
|
||||
enabled: !!enrollment?.id
|
||||
});
|
||||
|
||||
const myProject = myProjects?.results?.[0];
|
||||
|
||||
/**
|
||||
* Handle competition enrollment.
|
||||
* Checks login status and submits enrollment request.
|
||||
*/
|
||||
const handleEnroll = async () => {
|
||||
if (!user) {
|
||||
showLoginModal();
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await enrollCompetition(id, { role: 'contestant' });
|
||||
message.success('报名申请已提交，请等待审核');
|
||||
refetchEnrollment();
|
||||
} catch (error) {
|
||||
message.error(error.response?.data?.detail || '报名失败');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Fetch and display judge comments for a project.
|
||||
* @param {Object} project - The project object
|
||||
*/
|
||||
const handleViewComments = async (project) => {
|
||||
if (!project) return;
|
||||
setCommentsLoading(true);
|
||||
setCommentsModalVisible(true);
|
||||
try {
|
||||
const res = await getComments({ project: project.id });
|
||||
// Support pagination result or list result
|
||||
setCurrentProjectComments(res.data?.results || res.data || []);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error('获取评语失败');
|
||||
} finally {
|
||||
setCommentsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loadingDetail) return <Spin size="large" style={{ display: 'block', margin: '100px auto' }} />;
|
||||
if (!competition) return <Empty description="比赛不存在" />;
|
||||
|
||||
const isContestant = enrollment?.role === 'contestant' && enrollment?.status === 'approved';
|
||||
|
||||
const items = [
|
||||
{
|
||||
key: 'details',
|
||||
label: '比赛详情',
|
||||
children: (
|
||||
<div style={{ padding: isMobile ? 12 : 24, background: '#1f1f1f', borderRadius: 8 }}>
|
||||
<Descriptions title="基本信息" bordered column={{ xs: 1, sm: 2, md: 3 }} size={isMobile ? 'small' : 'default'}>
|
||||
<Descriptions.Item label="状态">
|
||||
<Tag color={competition.status === 'registration' ? 'green' : 'default'}>
|
||||
{competition.status_display}
|
||||
</Tag>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="报名时间">
|
||||
{dayjs(competition.start_time).format('YYYY-MM-DD')}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="结束时间">
|
||||
{dayjs(competition.end_time).format('YYYY-MM-DD')}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
|
||||
<Title level={isMobile ? 5 : 4} style={{ marginTop: isMobile ? 24 : 32, color: '#fff' }}>比赛简介</Title>
|
||||
<div style={{ color: '#ccc', lineHeight: '1.8', fontSize: isMobile ? '14px' : '16px' }} className="markdown-body">
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
rehypePlugins={[rehypeRaw]}
|
||||
components={{
|
||||
code: CodeBlock,
|
||||
img: (props) => <img {...props} src={getImageUrl(props.src)} style={{ maxWidth: '100%', borderRadius: '8px' }} />,
|
||||
h1: (props) => <h1 {...props} style={{ color: '#fff', borderBottom: '1px solid #333', paddingBottom: '0.3em', fontSize: isMobile ? '1.5em' : '2em' }} />,
|
||||
h2: (props) => <h2 {...props} style={{ color: '#fff', borderBottom: '1px solid #333', paddingBottom: '0.3em', fontSize: isMobile ? '1.3em' : '1.5em' }} />,
|
||||
h3: (props) => <h3 {...props} style={{ color: '#eee', fontSize: isMobile ? '1.1em' : '1.25em' }} />,
|
||||
a: (props) => <a {...props} style={{ color: '#1890ff' }} target="_blank" rel="noopener noreferrer" />,
|
||||
blockquote: (props) => <blockquote {...props} style={{ borderLeft: '4px solid #1890ff', color: '#999', paddingLeft: '1em', margin: '1em 0' }} />,
|
||||
table: (props) => <table {...props} style={{ borderCollapse: 'collapse', width: '100%', margin: '1em 0', display: 'block', overflowX: 'auto' }} />,
|
||||
th: (props) => <th {...props} style={{ border: '1px solid #444', padding: '8px', background: '#333', whiteSpace: 'nowrap' }} />,
|
||||
td: (props) => <td {...props} style={{ border: '1px solid #444', padding: '8px' }} />,
|
||||
}}
|
||||
>
|
||||
{competition.description}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
|
||||
<Title level={isMobile ? 5 : 4} style={{ marginTop: isMobile ? 24 : 32, color: '#fff' }}>规则说明</Title>
|
||||
<div style={{ color: '#ccc', lineHeight: '1.8', fontSize: isMobile ? '14px' : '16px' }} className="markdown-body">
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
rehypePlugins={[rehypeRaw]}
|
||||
components={{
|
||||
code: CodeBlock,
|
||||
img: (props) => <img {...props} src={getImageUrl(props.src)} style={{ maxWidth: '100%', borderRadius: '8px' }} />,
|
||||
h1: (props) => <h1 {...props} style={{ color: '#fff', borderBottom: '1px solid #333', paddingBottom: '0.3em', fontSize: isMobile ? '1.5em' : '2em' }} />,
|
||||
h2: (props) => <h2 {...props} style={{ color: '#fff', borderBottom: '1px solid #333', paddingBottom: '0.3em', fontSize: isMobile ? '1.3em' : '1.5em' }} />,
|
||||
h3: (props) => <h3 {...props} style={{ color: '#eee', fontSize: isMobile ? '1.1em' : '1.25em' }} />,
|
||||
a: (props) => <a {...props} style={{ color: '#00b96b' }} target="_blank" rel="noopener noreferrer" />,
|
||||
blockquote: (props) => <blockquote {...props} style={{ borderLeft: '4px solid #00b96b', color: '#999', paddingLeft: '1em', margin: '1em 0' }} />,
|
||||
table: (props) => <table {...props} style={{ borderCollapse: 'collapse', width: '100%', margin: '1em 0', display: 'block', overflowX: 'auto' }} />,
|
||||
th: (props) => <th {...props} style={{ border: '1px solid #444', padding: '8px', background: '#333', whiteSpace: 'nowrap' }} />,
|
||||
td: (props) => <td {...props} style={{ border: '1px solid #444', padding: '8px' }} />,
|
||||
}}
|
||||
>
|
||||
{competition.rule_description}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
|
||||
<Title level={isMobile ? 5 : 4} style={{ marginTop: isMobile ? 24 : 32, color: '#fff' }}>参赛条件</Title>
|
||||
<div style={{ color: '#ccc', lineHeight: '1.8', fontSize: isMobile ? '14px' : '16px' }} className="markdown-body">
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
rehypePlugins={[rehypeRaw]}
|
||||
components={{
|
||||
code: CodeBlock,
|
||||
img: (props) => <img {...props} src={getImageUrl(props.src)} style={{ maxWidth: '100%', borderRadius: '8px' }} />,
|
||||
h1: (props) => <h1 {...props} style={{ color: '#fff', borderBottom: '1px solid #333', paddingBottom: '0.3em', fontSize: isMobile ? '1.5em' : '2em' }} />,
|
||||
h2: (props) => <h2 {...props} style={{ color: '#fff', borderBottom: '1px solid #333', paddingBottom: '0.3em', fontSize: isMobile ? '1.3em' : '1.5em' }} />,
|
||||
h3: (props) => <h3 {...props} style={{ color: '#eee', fontSize: isMobile ? '1.1em' : '1.25em' }} />,
|
||||
a: (props) => <a {...props} style={{ color: '#1890ff' }} target="_blank" rel="noopener noreferrer" />,
|
||||
blockquote: (props) => <blockquote {...props} style={{ borderLeft: '4px solid #1890ff', color: '#999', paddingLeft: '1em', margin: '1em 0' }} />,
|
||||
table: (props) => <table {...props} style={{ borderCollapse: 'collapse', width: '100%', margin: '1em 0', display: 'block', overflowX: 'auto' }} />,
|
||||
th: (props) => <th {...props} style={{ border: '1px solid #444', padding: '8px', background: '#333', whiteSpace: 'nowrap' }} />,
|
||||
td: (props) => <td {...props} style={{ border: '1px solid #444', padding: '8px' }} />,
|
||||
}}
|
||||
>
|
||||
{competition.condition_description}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: 'projects',
|
||||
label: '参赛项目',
|
||||
children: (
|
||||
<Row gutter={[isMobile ? 16 : 24, isMobile ? 16 : 24]}>
|
||||
{projects?.results?.map(project => (
|
||||
<Col key={project.id} xs={24} sm={12} md={8}>
|
||||
<Card
|
||||
hoverable
|
||||
cover={<img alt={project.title} src={getImageUrl(project.display_cover_image) || 'placeholder.jpg'} style={{ height: 180, objectFit: 'cover' }} />}
|
||||
actions={[
|
||||
<Button type="link" onClick={() => navigate(`/projects/${project.id}`)}>查看详情</Button>,
|
||||
<Button type="link" icon={<MessageOutlined />} onClick={() => handleViewComments(project)}>评语</Button>
|
||||
]}
|
||||
>
|
||||
<Card.Meta
|
||||
title={project.title}
|
||||
description={
|
||||
enrollment && project.contestant === enrollment.id
|
||||
? `得分: ${project.final_score || '待定'}`
|
||||
: null
|
||||
}
|
||||
avatar={<UserOutlined />}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
{(!projects?.results || projects.results.length === 0) && (
|
||||
<Col span={24}><Empty description="暂无已提交项目" /></Col>
|
||||
)}
|
||||
</Row>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: 'leaderboard',
|
||||
label: '排行榜',
|
||||
children: (
|
||||
<Card title="实时排名" variant="borderless" style={{ background: 'transparent' }} headStyle={{ color: '#fff', fontSize: isMobile ? '16px' : '18px' }} bodyStyle={{ padding: isMobile ? '0 12px' : '24px' }}>
|
||||
{/* Leaderboard Logic: sort by final_score descending */}
|
||||
{[...(projects?.results || [])].sort((a, b) => b.final_score - a.final_score).map((project, index) => (
|
||||
<div key={project.id} style={{ display: 'flex', alignItems: 'center', padding: isMobile ? '8px 0' : '12px 0', borderBottom: '1px solid #333' }}>
|
||||
<div style={{ width: isMobile ? 30 : 40, fontSize: isMobile ? 16 : 20, fontWeight: 'bold', color: index < 3 ? '#ffd700' : '#fff' }}>
|
||||
#{index + 1}
|
||||
</div>
|
||||
<div style={{ flex: 1, paddingRight: 8 }}>
|
||||
<div style={{ color: '#fff', fontSize: isMobile ? 14 : 16, wordBreak: 'break-all' }}>{project.title}</div>
|
||||
<div style={{ color: '#888', fontSize: 12 }}>{project.contestant_info?.nickname}</div>
|
||||
</div>
|
||||
<div style={{ fontSize: isMobile ? 18 : 24, color: '#1890ff', fontWeight: 'bold' }}>
|
||||
{project.final_score || 0}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 1200, margin: '0 auto', padding: isMobile ? '12px' : '24px' }}>
|
||||
<div style={{
|
||||
height: isMobile ? 240 : 300,
|
||||
backgroundImage: `url(${getImageUrl(competition.display_cover_image)})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
borderRadius: 16,
|
||||
marginBottom: isMobile ? 16 : 32,
|
||||
position: 'relative',
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
padding: isMobile ? 16 : 32,
|
||||
background: 'linear-gradient(to top, rgba(0,0,0,0.9), transparent)'
|
||||
}}>
|
||||
<Title level={isMobile ? 3 : 1} style={{ color: '#fff', margin: 0, fontSize: isMobile ? '24px' : undefined }}>{competition.title}</Title>
|
||||
<div style={{ marginTop: isMobile ? 12 : 16, display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 8 : 16, flexWrap: 'wrap' }}>
|
||||
{enrollment ? (
|
||||
<Button type="primary" disabled size={isMobile ? 'middle' : 'large'}>{enrollment.status === 'approved' ? '已报名' : '审核中'}</Button>
|
||||
) : (
|
||||
<Button type="primary" size={isMobile ? 'middle' : 'large'} onClick={handleEnroll} disabled={competition.status !== 'registration'}>
|
||||
{competition.status === 'registration' ? '立即报名' : '报名未开始/已结束'}
|
||||
</Button>
|
||||
)}
|
||||
{isContestant && (
|
||||
<>
|
||||
<Button
|
||||
icon={<CloudUploadOutlined />}
|
||||
loading={loadingMyProject}
|
||||
size={isMobile ? 'middle' : 'large'}
|
||||
onClick={() => {
|
||||
setEditingProject(myProject || null);
|
||||
setSubmissionModalVisible(true);
|
||||
}}
|
||||
>
|
||||
{myProject ? '管理/修改作品' : '提交作品'}
|
||||
</Button>
|
||||
{myProject && (
|
||||
<Button
|
||||
icon={<MessageOutlined />}
|
||||
style={{ marginLeft: isMobile ? 0 : 8 }}
|
||||
size={isMobile ? 'middle' : 'large'}
|
||||
onClick={() => handleViewComments(myProject)}
|
||||
>
|
||||
查看评语
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tabs
|
||||
activeKey={activeTab}
|
||||
onChange={setActiveTab}
|
||||
items={items}
|
||||
type="card"
|
||||
size={isMobile ? 'small' : 'large'}
|
||||
tabBarGutter={isMobile ? 8 : undefined}
|
||||
/>
|
||||
|
||||
{submissionModalVisible && (
|
||||
<ProjectSubmission
|
||||
competitionId={id}
|
||||
initialValues={editingProject}
|
||||
onCancel={() => {
|
||||
setSubmissionModalVisible(false);
|
||||
setEditingProject(null);
|
||||
}}
|
||||
onSuccess={() => {
|
||||
setSubmissionModalVisible(false);
|
||||
setEditingProject(null);
|
||||
// Refetch projects
|
||||
queryClient.invalidateQueries(['projects']);
|
||||
queryClient.invalidateQueries(['myProject']);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Modal
|
||||
title="评委评语"
|
||||
open={commentsModalVisible}
|
||||
onCancel={() => setCommentsModalVisible(false)}
|
||||
footer={null}
|
||||
>
|
||||
<List
|
||||
loading={commentsLoading}
|
||||
itemLayout="horizontal"
|
||||
dataSource={currentProjectComments}
|
||||
renderItem={item => (
|
||||
<List.Item>
|
||||
<List.Item.Meta
|
||||
avatar={<Avatar icon={<UserOutlined />} />}
|
||||
title={item.judge_name || '评委'}
|
||||
description={
|
||||
<div>
|
||||
<div style={{ color: 'inherit' }}>{item.content}</div>
|
||||
<div style={{ fontSize: 12, color: '#999', marginTop: 4 }}>
|
||||
{dayjs(item.created_at).format('YYYY-MM-DD HH:mm')}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</List.Item>
|
||||
)}
|
||||
locale={{ emptyText: '暂无评语' }}
|
||||
/>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompetitionDetail;
|
||||
91
frontend/src/components/competition/CompetitionList.jsx
Normal file
91
frontend/src/components/competition/CompetitionList.jsx
Normal file
@@ -0,0 +1,91 @@
|
||||
import React from 'react';
|
||||
import { Row, Col, Typography, Input, Select, Empty, Spin } from 'antd';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { getCompetitions } from '../../api';
|
||||
import CompetitionCard from './CompetitionCard';
|
||||
import { useState } from 'react';
|
||||
|
||||
const { Title } = Typography;
|
||||
const { Search } = Input;
|
||||
const { Option } = Select;
|
||||
|
||||
const CompetitionList = () => {
|
||||
const [params, setParams] = useState({ page: 1, page_size: 10 });
|
||||
const [search, setSearch] = useState('');
|
||||
const [status, setStatus] = useState('all');
|
||||
|
||||
const { data, isLoading, isError } = useQuery({
|
||||
queryKey: ['competitions', params, search, status],
|
||||
queryFn: () => getCompetitions({
|
||||
...params,
|
||||
search: search || undefined,
|
||||
status: status !== 'all' ? status : undefined
|
||||
}),
|
||||
keepPreviousData: true
|
||||
});
|
||||
|
||||
const handleSearch = (value) => {
|
||||
setSearch(value);
|
||||
setParams({ ...params, page: 1 });
|
||||
};
|
||||
|
||||
const handleStatusChange = (value) => {
|
||||
setStatus(value);
|
||||
setParams({ ...params, page: 1 });
|
||||
};
|
||||
|
||||
if (isError) return <Empty description="加载失败，请稍后重试" />;
|
||||
|
||||
return (
|
||||
<div className="competition-list-container">
|
||||
<div style={{ marginBottom: 32, textAlign: 'center' }}>
|
||||
<Title level={2} style={{ color: '#fff', marginBottom: 16 }}>赛事中心</Title>
|
||||
<div style={{ maxWidth: 800, margin: '0 auto', display: 'flex', gap: 16 }}>
|
||||
<Search
|
||||
placeholder="搜索比赛名称或简介"
|
||||
allowClear
|
||||
enterButton="搜索"
|
||||
size="large"
|
||||
onSearch={handleSearch}
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
<Select
|
||||
defaultValue="all"
|
||||
size="large"
|
||||
style={{ width: 120 }}
|
||||
onChange={handleStatusChange}
|
||||
>
|
||||
<Option value="all">全部状态</Option>
|
||||
<Option value="published">即将开始</Option>
|
||||
<Option value="registration">报名中</Option>
|
||||
<Option value="submission">提交中</Option>
|
||||
<Option value="judging">评审中</Option>
|
||||
<Option value="ended">已结束</Option>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div style={{ textAlign: 'center', padding: '50px 0' }}>
|
||||
<Spin size="large" tip="正在加载赛事..." />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{data?.data?.results?.length > 0 ? (
|
||||
<Row gutter={[32, 32]} justify="center">
|
||||
{data.data.results.map((comp) => (
|
||||
<Col key={comp.id} xs={24} sm={12} md={8} lg={8} xl={8} xxl={8}>
|
||||
<CompetitionCard competition={comp} />
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
) : (
|
||||
<Empty description="暂无相关比赛" image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompetitionList;
|
||||
197
frontend/src/components/competition/ProjectDetail.jsx
Normal file
197
frontend/src/components/competition/ProjectDetail.jsx
Normal file
@@ -0,0 +1,197 @@
|
||||
import React from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Typography, Card, Button, Row, Col, Tag, Descriptions, Empty, Spin, Avatar, List, Image, Grid } from 'antd';
|
||||
import { UserOutlined, ArrowLeftOutlined, LinkOutlined, FileTextOutlined, TrophyOutlined, MessageOutlined } from '@ant-design/icons';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import rehypeRaw from 'rehype-raw';
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
||||
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
||||
import dayjs from 'dayjs';
|
||||
import { getProjectDetail, getComments } from '../../api';
|
||||
import 'github-markdown-css/github-markdown-dark.css';
|
||||
|
||||
const { Title, Paragraph, Text } = Typography;
|
||||
const { useBreakpoint } = Grid;
|
||||
|
||||
const getImageUrl = (url) => {
|
||||
if (!url) return '';
|
||||
if (url.startsWith('http') || url.startsWith('//')) return url;
|
||||
const apiUrl = import.meta.env.VITE_API_URL || 'http://localhost:8000/api';
|
||||
const baseUrl = apiUrl.replace(/\/api\/?$/, '');
|
||||
return `${baseUrl}${url}`;
|
||||
};
|
||||
|
||||
const CodeBlock = ({ inline, className, children, ...props }) => {
|
||||
const match = /language-(\w+)/.exec(className || '');
|
||||
return !inline && match ? (
|
||||
<SyntaxHighlighter
|
||||
style={vscDarkPlus}
|
||||
language={match[1]}
|
||||
PreTag="div"
|
||||
{...props}
|
||||
>
|
||||
{String(children).replace(/\n$/, '')}
|
||||
</SyntaxHighlighter>
|
||||
) : (
|
||||
<code className={className} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
};
|
||||
|
||||
const ProjectDetail = () => {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const screens = useBreakpoint();
|
||||
const isMobile = !screens.md;
|
||||
|
||||
const { data: project, isLoading } = useQuery({
|
||||
queryKey: ['project', id],
|
||||
queryFn: () => getProjectDetail(id).then(res => res.data)
|
||||
});
|
||||
|
||||
const { data: comments } = useQuery({
|
||||
queryKey: ['comments', id],
|
||||
queryFn: () => getComments({ project: id }).then(res => res.data?.results || res.data || []),
|
||||
enabled: !!project
|
||||
});
|
||||
|
||||
if (isLoading) return <Spin size="large" style={{ display: 'block', margin: '100px auto' }} />;
|
||||
if (!project) return <Empty description="项目不存在或无权访问" />;
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 1200, margin: '0 auto', padding: isMobile ? '12px' : '24px' }}>
|
||||
<Button
|
||||
icon={<ArrowLeftOutlined />}
|
||||
onClick={() => navigate(-1)}
|
||||
style={{ marginBottom: 16 }}
|
||||
>
|
||||
返回
|
||||
</Button>
|
||||
|
||||
<Card bordered={false} style={{ background: '#1f1f1f', borderRadius: 8 }}>
|
||||
<Row gutter={[24, 24]}>
|
||||
<Col xs={24} md={8}>
|
||||
<Image
|
||||
src={getImageUrl(project.display_cover_image) || 'placeholder.jpg'}
|
||||
alt={project.title}
|
||||
style={{ width: '100%', borderRadius: 8, objectFit: 'cover', aspectRatio: '16/9' }}
|
||||
/>
|
||||
|
||||
<Card style={{ marginTop: 24, background: '#141414', border: '1px solid #303030' }}>
|
||||
<Descriptions title="项目信息" column={1} size="small">
|
||||
<Descriptions.Item label="参赛者">
|
||||
<Avatar icon={<UserOutlined />} size="small" style={{ marginRight: 8 }} />
|
||||
{project.contestant_info?.nickname || '匿名用户'}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="提交时间">
|
||||
{dayjs(project.created_at).format('YYYY-MM-DD HH:mm')}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="最终得分">
|
||||
<span style={{ color: '#00b96b', fontSize: 18, fontWeight: 'bold' }}>
|
||||
{project.final_score || 0}
|
||||
</span>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="状态">
|
||||
<Tag color={project.status === 'submitted' ? 'green' : 'default'}>
|
||||
{project.status === 'submitted' ? '已提交' : '草稿'}
|
||||
</Tag>
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</Card>
|
||||
|
||||
{project.link && (
|
||||
<Button
|
||||
type="primary"
|
||||
block
|
||||
icon={<LinkOutlined />}
|
||||
href={project.link}
|
||||
target="_blank"
|
||||
style={{ marginTop: 16 }}
|
||||
>
|
||||
访问项目链接
|
||||
</Button>
|
||||
)}
|
||||
{project.file && (
|
||||
<Button
|
||||
block
|
||||
icon={<FileTextOutlined />}
|
||||
href={getImageUrl(project.file)}
|
||||
target="_blank"
|
||||
style={{ marginTop: 16 }}
|
||||
>
|
||||
下载项目文件
|
||||
</Button>
|
||||
)}
|
||||
|
||||
</Col>
|
||||
|
||||
<Col xs={24} md={16}>
|
||||
<Title level={isMobile ? 3 : 2} style={{ color: '#fff', marginTop: 0 }}>{project.title}</Title>
|
||||
<Text type="secondary" style={{ fontSize: 16 }}>{project.subtitle}</Text>
|
||||
|
||||
<div style={{ marginTop: 24 }}>
|
||||
<Title level={4} style={{ color: '#fff' }}>项目详情</Title>
|
||||
<div style={{ color: '#ccc', lineHeight: '1.8', fontSize: isMobile ? '14px' : '16px', background: '#141414', padding: 16, borderRadius: 8 }} className="markdown-body">
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
rehypePlugins={[rehypeRaw]}
|
||||
components={{
|
||||
code: CodeBlock,
|
||||
img: (props) => <img {...props} src={getImageUrl(props.src)} style={{ maxWidth: '100%', borderRadius: '8px' }} />,
|
||||
h1: (props) => <h1 {...props} style={{ color: '#fff', borderBottom: '1px solid #333', paddingBottom: '0.3em', fontSize: isMobile ? '1.5em' : '2em' }} />,
|
||||
h2: (props) => <h2 {...props} style={{ color: '#fff', borderBottom: '1px solid #333', paddingBottom: '0.3em', fontSize: isMobile ? '1.3em' : '1.5em' }} />,
|
||||
h3: (props) => <h3 {...props} style={{ color: '#eee', fontSize: isMobile ? '1.1em' : '1.25em' }} />,
|
||||
a: (props) => <a {...props} style={{ color: '#00b96b' }} target="_blank" rel="noopener noreferrer" />,
|
||||
}}
|
||||
>
|
||||
{project.description || '暂无描述'}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{comments && comments.length > 0 && (
|
||||
<div style={{ marginTop: 32 }}>
|
||||
<Title level={4} style={{ color: '#fff' }}>评委评语</Title>
|
||||
<List
|
||||
itemLayout="horizontal"
|
||||
dataSource={comments}
|
||||
renderItem={item => (
|
||||
<List.Item style={{ background: '#141414', padding: 16, borderRadius: 8, marginBottom: 12, border: '1px solid #303030' }}>
|
||||
<List.Item.Meta
|
||||
avatar={<Avatar icon={<UserOutlined />} style={{ backgroundColor: '#1890ff' }} />}
|
||||
title={
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<span style={{ color: '#fff' }}>{item.judge_name || '评委'}</span>
|
||||
{item.score && (
|
||||
<Tag color="orange" style={{ margin: 0, fontWeight: 'bold', border: 'none' }}>
|
||||
{item.score}分
|
||||
</Tag>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
description={
|
||||
<div>
|
||||
<div style={{ color: '#ccc', marginTop: 8 }}>{item.content}</div>
|
||||
<div style={{ fontSize: 12, color: '#666', marginTop: 8 }}>
|
||||
{dayjs(item.created_at).format('YYYY-MM-DD HH:mm')}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectDetail;
|
||||
191
frontend/src/components/competition/ProjectSubmission.jsx
Normal file
191
frontend/src/components/competition/ProjectSubmission.jsx
Normal file
@@ -0,0 +1,191 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Card, Button, Form, Input, Upload, App, Modal, Select } from 'antd';
|
||||
import { UploadOutlined, CloudUploadOutlined, LinkOutlined } from '@ant-design/icons';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { createProject, updateProject, submitProject, uploadProjectFile } from '../../api';
|
||||
|
||||
const { TextArea } = Input;
|
||||
const { Option } = Select;
|
||||
|
||||
const ProjectSubmission = ({ competitionId, initialValues, onCancel, onSuccess }) => {
|
||||
const { message } = App.useApp();
|
||||
const [form] = Form.useForm();
|
||||
const [fileList, setFileList] = useState([]);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
// Reset form when initialValues changes (important for switching between create/edit)
|
||||
React.useEffect(() => {
|
||||
if (initialValues) {
|
||||
form.setFieldsValue(initialValues);
|
||||
} else {
|
||||
form.resetFields();
|
||||
}
|
||||
}, [initialValues, form]);
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: createProject,
|
||||
onSuccess: () => {
|
||||
message.success('项目创建成功');
|
||||
queryClient.invalidateQueries(['projects']);
|
||||
onSuccess();
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error(`创建失败: ${error.message}`);
|
||||
}
|
||||
});
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: (data) => updateProject(initialValues.id, data),
|
||||
onSuccess: () => {
|
||||
message.success('项目更新成功');
|
||||
queryClient.invalidateQueries(['projects']);
|
||||
onSuccess();
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error(`更新失败: ${error.message}`);
|
||||
}
|
||||
});
|
||||
|
||||
const uploadMutation = useMutation({
|
||||
mutationFn: uploadProjectFile,
|
||||
onSuccess: (data) => {
|
||||
message.success('文件上传成功');
|
||||
setFileList([...fileList, data]); // Add file to list (assuming response format)
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error(`上传失败: ${error.message}`);
|
||||
}
|
||||
});
|
||||
|
||||
const onFinish = (values) => {
|
||||
const data = {
|
||||
...values,
|
||||
competition: competitionId,
|
||||
// Handle file URLs/IDs if needed in create/update
|
||||
};
|
||||
|
||||
if (initialValues?.id) {
|
||||
updateMutation.mutate(data);
|
||||
} else {
|
||||
createMutation.mutate(data);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpload = ({ file, onSuccess, onError }) => {
|
||||
if (!initialValues?.id) {
|
||||
message.warning('请先保存项目基本信息再上传文件');
|
||||
// Prevent default upload
|
||||
onError(new Error('请先保存项目'));
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('project', initialValues?.id || ''); // Need project ID first usually
|
||||
|
||||
uploadMutation.mutate(formData, {
|
||||
onSuccess: (data) => {
|
||||
onSuccess(data);
|
||||
},
|
||||
onError: (error) => {
|
||||
onError(error);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={initialValues?.id ? "修改已提交项目" : "提交新项目"}
|
||||
open={true}
|
||||
onCancel={onCancel}
|
||||
footer={null}
|
||||
width={800}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={onFinish}
|
||||
initialValues={initialValues}
|
||||
>
|
||||
<Form.Item
|
||||
name="title"
|
||||
label="项目名称"
|
||||
rules={[{ required: true, message: '请输入项目名称' }]}
|
||||
>
|
||||
<Input placeholder="请输入项目名称" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="description"
|
||||
label="项目简介"
|
||||
rules={[{ required: true, message: '请输入项目简介' }]}
|
||||
>
|
||||
<TextArea rows={4} placeholder="简要描述您的项目创意和功能" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="team_info"
|
||||
label="团队介绍"
|
||||
>
|
||||
<TextArea rows={3} placeholder="介绍您的团队成员和分工" />
|
||||
</Form.Item>
|
||||
|
||||
{initialValues?.status === 'submitted' && (
|
||||
<div style={{ marginBottom: 24, color: '#faad14' }}>
|
||||
注意：您已正式提交该项目，修改后需要重新审核（如适用）。
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Form.Item
|
||||
name="cover_image_url"
|
||||
label="封面图片链接"
|
||||
rules={[{ type: 'url', message: '请输入有效的URL' }]}
|
||||
>
|
||||
<Input prefix={<LinkOutlined />} placeholder="https://example.com/image.jpg" />
|
||||
</Form.Item>
|
||||
|
||||
{/* File Upload Section - Only visible if project exists */}
|
||||
{initialValues?.id && (
|
||||
<Form.Item label="项目附件 (PPT/PDF/视频)">
|
||||
<Upload
|
||||
customRequest={handleUpload}
|
||||
listType="picture"
|
||||
maxCount={5}
|
||||
>
|
||||
<Button icon={<CloudUploadOutlined />}>上传文件 (最大50MB)</Button>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
<Form.Item>
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10 }}>
|
||||
<Button onClick={onCancel}>取消</Button>
|
||||
<Button type="primary" htmlType="submit" loading={createMutation.isLoading || updateMutation.isLoading}>
|
||||
{initialValues?.id ? '保存修改' : '保存草稿'}
|
||||
</Button>
|
||||
{initialValues?.id && (
|
||||
<Button
|
||||
type="primary"
|
||||
danger
|
||||
onClick={() => {
|
||||
Modal.confirm({
|
||||
title: '确认提交?',
|
||||
content: '提交后将无法修改，确认提交吗？',
|
||||
onOk: () => submitProject(initialValues.id).then(() => {
|
||||
message.success('提交成功');
|
||||
onSuccess();
|
||||
})
|
||||
})
|
||||
}}
|
||||
>
|
||||
正式提交
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectSubmission;
|
||||
85
frontend/src/context/AuthContext.jsx
Normal file
85
frontend/src/context/AuthContext.jsx
Normal file
@@ -0,0 +1,85 @@
|
||||
import React, { createContext, useState, useEffect, useContext } from 'react';
|
||||
|
||||
import { getUserInfo } from '../api';
|
||||
|
||||
const AuthContext = createContext(null);
|
||||
|
||||
export const AuthProvider = ({ children }) => {
|
||||
const [user, setUser] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [loginModalVisible, setLoginModalVisible] = useState(false);
|
||||
|
||||
const showLoginModal = () => setLoginModalVisible(true);
|
||||
const hideLoginModal = () => setLoginModalVisible(false);
|
||||
|
||||
useEffect(() => {
|
||||
const initAuth = async () => {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
const storedUser = localStorage.getItem('user');
|
||||
|
||||
if (storedToken) {
|
||||
try {
|
||||
// 1. 优先尝试从本地获取
|
||||
if (storedUser) {
|
||||
try {
|
||||
const parsedUser = JSON.parse(storedUser);
|
||||
// 如果本地数据包含 ID，直接使用
|
||||
if (parsedUser.id) {
|
||||
setUser(parsedUser);
|
||||
} else {
|
||||
// 如果没有 ID，标记为需要刷新
|
||||
throw new Error("Missing ID in stored user");
|
||||
}
|
||||
} catch (e) {
|
||||
// 解析失败或数据不完整，继续从服务器获取
|
||||
}
|
||||
}
|
||||
|
||||
// 2. 总是尝试从服务器获取最新信息（或作为兜底）
|
||||
// 这样可以确保 ID 存在，且信息是最新的
|
||||
const res = await getUserInfo();
|
||||
if (res.data) {
|
||||
setUser(res.data);
|
||||
localStorage.setItem('user', JSON.stringify(res.data));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch user info:", error);
|
||||
// 如果 token 失效，可能需要登出？
|
||||
// 暂时不强制登出，只清除无效的本地 user
|
||||
if (!user) localStorage.removeItem('user');
|
||||
}
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
initAuth();
|
||||
}, []);
|
||||
|
||||
const login = (userData) => {
|
||||
setUser(userData);
|
||||
localStorage.setItem('user', JSON.stringify(userData));
|
||||
if (userData.token) {
|
||||
localStorage.setItem('token', userData.token);
|
||||
}
|
||||
};
|
||||
|
||||
const logout = () => {
|
||||
setUser(null);
|
||||
localStorage.removeItem('user');
|
||||
localStorage.removeItem('token');
|
||||
};
|
||||
|
||||
const updateUser = (data) => {
|
||||
const newUser = { ...user, ...data };
|
||||
setUser(newUser);
|
||||
localStorage.setItem('user', JSON.stringify(newUser));
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ user, login, logout, updateUser, loading, loginModalVisible, showLoginModal, hideLoginModal }}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useAuth = () => useContext(AuthContext);
|
||||
59
frontend/src/index.css
Normal file
59
frontend/src/index.css
Normal file
@@ -0,0 +1,59 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Orbitron', 'Roboto', sans-serif; /* 假设引入了科技感字体 */
|
||||
background-color: #050505;
|
||||
color: #fff;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 全局滚动条美化 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #000;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #333;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #1890ff;
|
||||
}
|
||||
|
||||
/* 霓虹光效工具类 */
|
||||
.neon-text-blue {
|
||||
color: #1890ff;
|
||||
text-shadow: 0 0 5px rgba(24, 144, 255, 0.5), 0 0 10px rgba(24, 144, 255, 0.3);
|
||||
}
|
||||
|
||||
.neon-text-light-blue {
|
||||
color: #00f0ff;
|
||||
text-shadow: 0 0 5px rgba(0, 240, 255, 0.5), 0 0 10px rgba(0, 240, 255, 0.3);
|
||||
}
|
||||
|
||||
.neon-border {
|
||||
border: 1px solid rgba(24, 144, 255, 0.3);
|
||||
box-shadow: 0 0 10px rgba(24, 144, 255, 0.1), inset 0 0 10px rgba(24, 144, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 玻璃拟态 */
|
||||
.glass-panel {
|
||||
background: rgba(20, 20, 20, 0.6);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
/* 粒子背景容器 */
|
||||
#particle-canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
10
frontend/src/main.jsx
Normal file
10
frontend/src/main.jsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.jsx'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
235
frontend/src/pages/AIServices.jsx
Normal file
235
frontend/src/pages/AIServices.jsx
Normal file
@@ -0,0 +1,235 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Row, Col, Typography, Button, Spin } from 'antd';
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
RightOutlined,
|
||||
SearchOutlined,
|
||||
DatabaseOutlined,
|
||||
ThunderboltOutlined,
|
||||
CheckCircleOutlined,
|
||||
CloudServerOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { getServices } from '../api';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const { Title, Paragraph } = Typography;
|
||||
|
||||
const AIServices = () => {
|
||||
const [services, setServices] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
const fetchServices = async () => {
|
||||
try {
|
||||
const response = await getServices();
|
||||
setServices(response.data);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch services:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchServices();
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ textAlign: 'center', padding: '100px 0' }}>
|
||||
<Spin size="large" />
|
||||
<div style={{ marginTop: 20 }}>Loading services...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ padding: '20px 0' }}>
|
||||
<div style={{ textAlign: 'center', marginBottom: 60 }}>
|
||||
<motion.div
|
||||
initial={{ scale: 0.8, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Title level={1} style={{ color: '#fff', fontSize: 'clamp(2rem, 4vw, 3rem)' }}>
|
||||
AI 全栈<span style={{ color: '#00f0ff', textShadow: '0 0 10px rgba(0,240,255,0.5)' }}>解决方案</span>
|
||||
</Title>
|
||||
</motion.div>
|
||||
<Paragraph style={{ color: '#888', maxWidth: 700, margin: '0 auto', fontSize: 16 }}>
|
||||
从数据处理到模型部署，我们为您提供一站式 AI 基础设施服务。
|
||||
</Paragraph>
|
||||
</div>
|
||||
|
||||
<Row gutter={[32, 32]} justify="center">
|
||||
{services.map((item, index) => (
|
||||
<Col xs={24} md={8} key={item.id}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: index * 0.2, duration: 0.5 }}
|
||||
whileHover={{ scale: 1.03 }}
|
||||
onClick={() => navigate(`/services/${item.id}`)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<div
|
||||
className="glass-panel"
|
||||
style={{
|
||||
padding: 30,
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
border: `1px solid ${item.color}33`,
|
||||
boxShadow: `0 0 20px ${item.color}11`
|
||||
}}
|
||||
>
|
||||
{/* HUD 装饰线 */}
|
||||
<div style={{ position: 'absolute', top: 0, left: 0, width: 20, height: 2, background: item.color }} />
|
||||
<div style={{ position: 'absolute', top: 0, left: 0, width: 2, height: 20, background: item.color }} />
|
||||
<div style={{ position: 'absolute', bottom: 0, right: 0, width: 20, height: 2, background: item.color }} />
|
||||
<div style={{ position: 'absolute', bottom: 0, right: 0, width: 2, height: 20, background: item.color }} />
|
||||
|
||||
<div style={{ marginBottom: 20, display: 'flex', alignItems: 'center' }}>
|
||||
<div style={{
|
||||
width: 60, height: 60,
|
||||
borderRadius: '50%',
|
||||
background: `${item.color}22`,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
marginRight: 15,
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
{item.display_icon ? (
|
||||
<img src={item.display_icon} alt={item.title} style={{ width: '60%', height: '60%', objectFit: 'contain' }} />
|
||||
) : (
|
||||
<div style={{ width: 30, height: 30, background: item.color, borderRadius: '50%' }} />
|
||||
)}
|
||||
</div>
|
||||
<h3 style={{ margin: 0, fontSize: 22, color: '#fff' }}>{item.title}</h3>
|
||||
</div>
|
||||
|
||||
<p style={{ color: '#ccc', lineHeight: 1.6, minHeight: 60 }}>{item.description}</p>
|
||||
|
||||
<div style={{ marginTop: 20 }}>
|
||||
{item.features_list && item.features_list.map((feat, i) => (
|
||||
<div key={i} style={{
|
||||
display: 'flex', alignItems: 'center', marginBottom: 8, color: item.color
|
||||
}}>
|
||||
<div style={{ width: 6, height: 6, background: item.color, marginRight: 10, borderRadius: '50%' }} />
|
||||
{feat}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="link"
|
||||
style={{ padding: 0, marginTop: 20, color: '#fff' }}
|
||||
icon={<RightOutlined />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigate(`/services/${item.id}`);
|
||||
}}
|
||||
>
|
||||
了解更多
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
|
||||
{/* 动态流程图优化 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 1 }}
|
||||
style={{
|
||||
marginTop: 100,
|
||||
padding: '60px 20px',
|
||||
background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,185,107,0.05) 100%)',
|
||||
borderRadius: 30,
|
||||
border: '1px solid rgba(255,255,255,0.05)',
|
||||
position: 'relative',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
>
|
||||
<div style={{ position: 'absolute', top: -50, right: -50, width: 200, height: 200, background: 'radial-gradient(circle, rgba(0,240,255,0.1) 0%, transparent 70%)', filter: 'blur(30px)' }} />
|
||||
|
||||
<Title level={2} style={{ color: '#fff', marginBottom: 60, textAlign: 'center' }}>
|
||||
<span className="neon-text-green">服务流程</span>
|
||||
</Title>
|
||||
|
||||
<Row justify="center" gutter={[0, 40]} style={{ position: 'relative' }}>
|
||||
{[
|
||||
{ title: '需求分析', icon: <SearchOutlined />, desc: '深度沟通需求' },
|
||||
{ title: '数据准备', icon: <DatabaseOutlined />, desc: '高效数据处理' },
|
||||
{ title: '模型训练', icon: <ThunderboltOutlined />, desc: '高性能算力' },
|
||||
{ title: '测试验证', icon: <CheckCircleOutlined />, desc: '多维精度测试' },
|
||||
{ title: '私有化部署', icon: <CloudServerOutlined />, desc: '全栈落地部署' }
|
||||
].map((step, i) => (
|
||||
<Col key={i} xs={24} sm={12} md={4}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
|
||||
<motion.div
|
||||
initial={{ scale: 0, opacity: 0 }}
|
||||
whileInView={{ scale: 1, opacity: 1 }}
|
||||
transition={{ delay: i * 0.2, type: 'spring', stiffness: 100 }}
|
||||
whileHover={{ y: -10 }}
|
||||
style={{
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: '24px',
|
||||
background: 'rgba(255, 255, 255, 0.03)',
|
||||
border: '1px solid rgba(0, 185, 107, 0.3)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: 32,
|
||||
color: '#00b96b',
|
||||
marginBottom: 20,
|
||||
boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
zIndex: 2
|
||||
}}
|
||||
>
|
||||
{step.icon}
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.2 + 0.3 }}
|
||||
>
|
||||
<div style={{ color: '#fff', fontSize: 18, fontWeight: 'bold', marginBottom: 8 }}>{step.title}</div>
|
||||
<div style={{ color: '#666', fontSize: 12 }}>{step.desc}</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 连接线 */}
|
||||
{i < 4 && (
|
||||
<div className="process-line" style={{
|
||||
position: 'absolute',
|
||||
top: 40,
|
||||
right: '-50%',
|
||||
width: '100%',
|
||||
height: '2px',
|
||||
background: 'linear-gradient(90deg, #1890ff33, #1890ff00)',
|
||||
zIndex: 1,
|
||||
display: 'none'
|
||||
}} />
|
||||
)}
|
||||
</div>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
|
||||
<style>{`
|
||||
@media (min-width: 768px) {
|
||||
.process-line { display: block !important; }
|
||||
}
|
||||
.neon-text-green {
|
||||
text-shadow: 0 0 10px rgba(0, 185, 107, 0.5);
|
||||
}
|
||||
`}</style>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AIServices;
|
||||
34
frontend/src/pages/Activities.jsx
Normal file
34
frontend/src/pages/Activities.jsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import React from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { motion } from 'framer-motion';
|
||||
import { CalendarOutlined } from '@ant-design/icons';
|
||||
import ActivityList from '../components/activity/ActivityList';
|
||||
import { fadeInUp, staggerContainer } from '../animation';
|
||||
|
||||
const Activities = () => {
|
||||
return (
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={staggerContainer}
|
||||
>
|
||||
<motion.div variants={fadeInUp}>
|
||||
<h1 style={{
|
||||
fontSize: '32px',
|
||||
marginBottom: '30px',
|
||||
color: '#fff',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '12px'
|
||||
}}>
|
||||
<CalendarOutlined style={{ color: '#1890ff' }} />
|
||||
系列活动
|
||||
</h1>
|
||||
</motion.div>
|
||||
|
||||
<ActivityList />
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Activities;
|
||||
538
frontend/src/pages/ForumDetail.jsx
Normal file
538
frontend/src/pages/ForumDetail.jsx
Normal file
@@ -0,0 +1,538 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { Typography, Card, Avatar, Tag, Space, Button, Divider, Input, message, Upload, Tooltip, Grid, Modal } from 'antd';
|
||||
import { UserOutlined, ClockCircleOutlined, EyeOutlined, CheckCircleFilled, LeftOutlined, UploadOutlined, EditOutlined, StarFilled, CloseOutlined, LikeOutlined, LikeFilled } from '@ant-design/icons';
|
||||
import { getTopicDetail, createReply, uploadMedia, getStarUsers, likeTopic, likeReply } from '../api';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import LoginModal from '../components/LoginModal';
|
||||
import CreateTopicModal from '../components/CreateTopicModal';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import remarkMath from 'remark-math';
|
||||
import rehypeKatex from 'rehype-katex';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import rehypeRaw from 'rehype-raw';
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
||||
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
||||
import 'katex/dist/katex.min.css';
|
||||
import styles from './ForumDetail.module.less';
|
||||
import CodeBlock from '../components/CodeBlock';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
const { TextArea } = Input;
|
||||
const { useBreakpoint } = Grid;
|
||||
|
||||
const ForumDetail = () => {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const { user, login } = useAuth();
|
||||
const screens = useBreakpoint();
|
||||
const isMobile = !screens.md;
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [topic, setTopic] = useState(null);
|
||||
const [replyContent, setReplyContent] = useState('');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [loginModalVisible, setLoginModalVisible] = useState(false);
|
||||
|
||||
// Edit Topic State
|
||||
const [editModalVisible, setEditModalVisible] = useState(false);
|
||||
|
||||
// Reply Image State
|
||||
const [replyUploading, setReplyUploading] = useState(false);
|
||||
const [replyMediaIds, setReplyMediaIds] = useState([]);
|
||||
|
||||
// Star Users State
|
||||
const [starUsers, setStarUsers] = useState([]);
|
||||
|
||||
const fetchTopic = async () => {
|
||||
try {
|
||||
const res = await getTopicDetail(id);
|
||||
setTopic(res.data);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error('加载失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchStarUsers = async () => {
|
||||
try {
|
||||
const res = await getStarUsers();
|
||||
setStarUsers(res.data || []);
|
||||
} catch (error) {
|
||||
console.error('Fetch star users failed', error);
|
||||
}
|
||||
};
|
||||
|
||||
const hasFetched = React.useRef(false);
|
||||
useEffect(() => {
|
||||
if (!hasFetched.current) {
|
||||
fetchTopic();
|
||||
fetchStarUsers();
|
||||
hasFetched.current = true;
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
const handleReplyToUser = (nickname) => {
|
||||
const mentionText = `@${nickname} `;
|
||||
setReplyContent(prev => prev + mentionText);
|
||||
// Focus logic if needed, but simple append works
|
||||
message.info(`已添加 @${nickname}`);
|
||||
};
|
||||
|
||||
// Expert Info Modal
|
||||
const [expertModalVisible, setExpertModalVisible] = useState(false);
|
||||
const [selectedExpert, setSelectedExpert] = useState(null);
|
||||
|
||||
const showUserTitle = (author) => {
|
||||
if (author?.is_star) {
|
||||
setSelectedExpert(author);
|
||||
setExpertModalVisible(true);
|
||||
} else if (author?.title) {
|
||||
message.info(author.title);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLikeTopic = async () => {
|
||||
if (!user) {
|
||||
setLoginModalVisible(true);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const res = await likeTopic(topic.id);
|
||||
setTopic(prev => ({
|
||||
...prev,
|
||||
is_liked: res.data.liked,
|
||||
like_count: res.data.count
|
||||
}));
|
||||
} catch (error) {
|
||||
message.error('操作失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleLikeReply = async (replyId) => {
|
||||
if (!user) {
|
||||
setLoginModalVisible(true);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const res = await likeReply(replyId);
|
||||
setTopic(prev => ({
|
||||
...prev,
|
||||
replies: prev.replies.map(r => {
|
||||
if (r.id === replyId) {
|
||||
return { ...r, is_liked: res.data.liked, like_count: res.data.count };
|
||||
}
|
||||
return r;
|
||||
})
|
||||
}));
|
||||
} catch (error) {
|
||||
message.error('操作失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmitReply = async () => {
|
||||
if (!user) {
|
||||
setLoginModalVisible(true);
|
||||
return;
|
||||
}
|
||||
if (!replyContent.trim()) {
|
||||
message.warning('请输入回复内容');
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await createReply({
|
||||
topic: id,
|
||||
content: replyContent,
|
||||
media_ids: replyMediaIds // Send uploaded media IDs
|
||||
});
|
||||
message.success('回复成功');
|
||||
setReplyContent('');
|
||||
setReplyMediaIds([]); // Reset media IDs
|
||||
fetchTopic(); // Refresh to show new reply
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error('回复失败');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReplyUpload = async (file) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('media_type', file.type.startsWith('video') ? 'video' : 'image');
|
||||
|
||||
setReplyUploading(true);
|
||||
try {
|
||||
const res = await uploadMedia(formData);
|
||||
if (res.data.id) {
|
||||
setReplyMediaIds(prev => [...prev, res.data.id]);
|
||||
}
|
||||
|
||||
let url = res.data.file;
|
||||
if (url) url = url.replace(/\\/g, '/');
|
||||
if (url && !url.startsWith('http')) {
|
||||
const baseURL = import.meta.env.VITE_API_URL || 'http://localhost:8000';
|
||||
const host = baseURL.replace(/\/api\/?$/, '');
|
||||
if (!url.startsWith('/')) url = '/' + url;
|
||||
url = `${host}${url}`;
|
||||
}
|
||||
url = url.replace(/([^:]\/)\/+/g, '$1');
|
||||
|
||||
const insertText = file.type.startsWith('video')
|
||||
? `\n<video src="${url}" controls width="100%"></video>\n`
|
||||
: `\n\n`;
|
||||
|
||||
setReplyContent(prev => prev + insertText);
|
||||
message.success('上传成功');
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error('上传失败');
|
||||
} finally {
|
||||
setReplyUploading(false);
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
if (loading) return <div style={{ padding: 100, textAlign: 'center', color: '#fff' }}>Loading...</div>;
|
||||
if (!topic) return <div style={{ padding: 100, textAlign: 'center', color: '#fff' }}>Topic not found</div>;
|
||||
|
||||
const markdownComponents = {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
code({node, inline, className, children, ...props}) {
|
||||
const match = /language-(\w+)/.exec(className || '')
|
||||
return !inline && match ? (
|
||||
<CodeBlock
|
||||
language={match[1]}
|
||||
{...props}
|
||||
>
|
||||
{String(children).replace(/\n$/, '')}
|
||||
</CodeBlock>
|
||||
) : (
|
||||
<code className={className} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
)
|
||||
},
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
img({node, ...props}) {
|
||||
return (
|
||||
<img
|
||||
{...props}
|
||||
style={{ maxHeight: 400, borderRadius: 8, maxWidth: '100%', margin: '10px 0' }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: isMobile ? '60px 10px 20px' : '80px 20px 40px', minHeight: '100vh', maxWidth: 1000, margin: '0 auto' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<LeftOutlined />}
|
||||
style={{ color: '#fff' }}
|
||||
onClick={() => navigate('/forum')}
|
||||
>
|
||||
返回列表
|
||||
</Button>
|
||||
|
||||
{user && String(topic.author) === String(user.id) && (
|
||||
<Button
|
||||
type="primary"
|
||||
ghost
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => setEditModalVisible(true)}
|
||||
size={isMobile ? 'small' : 'middle'}
|
||||
>
|
||||
{isMobile ? '编辑' : '编辑帖子'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Topic Content */}
|
||||
<Card
|
||||
style={{
|
||||
background: 'rgba(20,20,20,0.8)',
|
||||
border: '1px solid rgba(255,255,255,0.1)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
marginBottom: 30
|
||||
}}
|
||||
styles={{ body: { padding: isMobile ? '15px' : '30px' } }}
|
||||
>
|
||||
<div style={{ marginBottom: 20 }}>
|
||||
{topic.is_pinned && <Tag color="red" style={{ marginRight: 10 }}>置顶</Tag>}
|
||||
{topic.product_info && <Tag color="blue">{topic.product_info.name}</Tag>}
|
||||
<Title level={isMobile ? 3 : 2} style={{ color: '#fff', margin: '10px 0', wordBreak: 'break-word' }}>{topic.title}</Title>
|
||||
|
||||
<Space size={isMobile ? 'small' : 'large'} style={{ color: '#888', marginTop: 10, flexWrap: 'wrap' }}>
|
||||
<Space>
|
||||
<Avatar
|
||||
src={topic.author_info?.avatar_url}
|
||||
icon={<UserOutlined />}
|
||||
size={isMobile ? 'small' : 'default'}
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => showUserTitle(topic.author_info)}
|
||||
/>
|
||||
<span style={{ color: '#ccc', fontSize: isMobile ? 12 : 14 }}>{topic.author_info?.nickname}</span>
|
||||
{topic.is_verified_owner && (
|
||||
<Tooltip title="已验证购买过相关产品">
|
||||
<CheckCircleFilled style={{ color: '#00b96b' }} />
|
||||
</Tooltip>
|
||||
)}
|
||||
</Space>
|
||||
<Space>
|
||||
<ClockCircleOutlined />
|
||||
<span style={{ fontSize: isMobile ? 12 : 14 }}>{new Date(topic.created_at).toLocaleString()}</span>
|
||||
</Space>
|
||||
<Space>
|
||||
<EyeOutlined />
|
||||
<span style={{ fontSize: isMobile ? 12 : 14 }}>{topic.view_count} 阅读</span>
|
||||
</Space>
|
||||
<Space style={{ cursor: 'pointer', background: topic.is_liked ? 'rgba(0, 185, 107, 0.15)' : 'rgba(255,255,255,0.05)', padding: '4px 10px', borderRadius: 12, transition: 'all 0.3s' }} onClick={handleLikeTopic}>
|
||||
{topic.is_liked ? <LikeFilled style={{ color: '#00b96b' }} /> : <LikeOutlined />}
|
||||
<span style={{ fontSize: isMobile ? 12 : 14, color: topic.is_liked ? '#00b96b' : 'inherit' }}>{topic.like_count || 0} 点赞</span>
|
||||
</Space>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<Divider style={{ borderColor: 'rgba(255,255,255,0.1)' }} />
|
||||
|
||||
<div style={{
|
||||
color: '#ddd',
|
||||
fontSize: 16,
|
||||
lineHeight: 1.8,
|
||||
minHeight: 200,
|
||||
}} className={styles['markdown-body']}>
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkMath, remarkGfm]}
|
||||
rehypePlugins={[rehypeKatex, rehypeRaw]}
|
||||
components={markdownComponents}
|
||||
>
|
||||
{topic.content}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
|
||||
{(() => {
|
||||
if (topic.media && topic.media.length > 0) {
|
||||
return topic.media.filter(m => m.media_type === 'video').map((media) => (
|
||||
<div key={`media-${media.id}`} style={{ marginTop: 12 }}>
|
||||
<video src={media.url} controls style={{ maxHeight: 400, borderRadius: 8, maxWidth: '100%' }} />
|
||||
</div>
|
||||
));
|
||||
}
|
||||
return null;
|
||||
})()}
|
||||
</Card>
|
||||
|
||||
{/* Replies List */}
|
||||
<div style={{ marginBottom: 30 }}>
|
||||
<Title level={isMobile ? 5 : 4} style={{ color: '#fff', marginBottom: 20 }}>
|
||||
{topic.replies?.length || 0} 条回复
|
||||
</Title>
|
||||
|
||||
{topic.replies?.map((reply, index) => (
|
||||
<Card
|
||||
key={reply.id}
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.05)',
|
||||
border: 'none',
|
||||
marginBottom: 16,
|
||||
borderRadius: 8
|
||||
}}
|
||||
styles={{ body: { padding: isMobile ? '15px' : '24px' } }}
|
||||
>
|
||||
<div style={{ display: 'flex', gap: isMobile ? 10 : 16 }}>
|
||||
<Avatar
|
||||
src={reply.author_info?.avatar_url}
|
||||
icon={<UserOutlined />}
|
||||
size={isMobile ? 'small' : 'default'}
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => showUserTitle(reply.author_info)}
|
||||
/>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
|
||||
<Space size={isMobile ? 'small' : 'middle'} align="center">
|
||||
<Text style={{ color: '#aaa', fontWeight: 'bold', fontSize: isMobile ? 13 : 14 }}>{reply.author_info?.nickname}</Text>
|
||||
{reply.is_pinned && <Tag color="red" style={{ margin: 0 }}>置顶</Tag>}
|
||||
<Text style={{ color: '#666', fontSize: 12 }}>{new Date(reply.created_at).toLocaleString()}</Text>
|
||||
</Space>
|
||||
<Space size={isMobile ? 'small' : 'middle'} align="center">
|
||||
<Space onClick={() => handleLikeReply(reply.id)} style={{ cursor: 'pointer', background: reply.is_liked ? 'rgba(0, 185, 107, 0.15)' : 'transparent', padding: '2px 8px', borderRadius: 4 }}>
|
||||
{reply.is_liked ? <LikeFilled style={{ color: '#00b96b' }} /> : <LikeOutlined style={{ color: '#666' }} />}
|
||||
<span style={{ fontSize: 12, color: reply.is_liked ? '#00b96b' : '#666' }}>{reply.like_count || 0}</span>
|
||||
</Space>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={() => handleReplyToUser(reply.author_info?.nickname)}
|
||||
style={{ padding: 0, height: 'auto' }}
|
||||
>
|
||||
回复
|
||||
</Button>
|
||||
<Text style={{ color: '#444', fontSize: 12 }}>#{index + 1}</Text>
|
||||
</Space>
|
||||
</div>
|
||||
<div style={{ color: '#eee', fontSize: isMobile ? 14 : 16 }} className={styles['markdown-body']}>
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkMath, remarkGfm]}
|
||||
rehypePlugins={[rehypeKatex, rehypeRaw]}
|
||||
components={markdownComponents}
|
||||
>
|
||||
{reply.content}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Reply Form */}
|
||||
<Card
|
||||
style={{
|
||||
background: 'rgba(20,20,20,0.8)',
|
||||
border: '1px solid rgba(255,255,255,0.1)'
|
||||
}}
|
||||
styles={{ body: { padding: isMobile ? '15px' : '24px' } }}
|
||||
>
|
||||
<Title level={5} style={{ color: '#fff', marginBottom: 16 }}>发表回复</Title>
|
||||
{user ? (
|
||||
<>
|
||||
<TextArea
|
||||
rows={4}
|
||||
value={replyContent}
|
||||
onChange={e => setReplyContent(e.target.value)}
|
||||
placeholder="友善回复，分享你的见解... (支持 Markdown)"
|
||||
style={{ marginBottom: 16, background: '#111', border: '1px solid #333', color: '#fff' }}
|
||||
/>
|
||||
|
||||
{starUsers.length > 0 && (
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<Text style={{ color: '#888', marginRight: 8 }}>@技术专家:</Text>
|
||||
<Space wrap>
|
||||
{starUsers.map(user => (
|
||||
<Tag
|
||||
key={user.id}
|
||||
color="gold"
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => handleReplyToUser(user.nickname)}
|
||||
>
|
||||
{user.nickname}
|
||||
</Tag>
|
||||
))}
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: isMobile ? 'stretch' : 'center', gap: isMobile ? 10 : 0 }}>
|
||||
<Upload
|
||||
beforeUpload={handleReplyUpload}
|
||||
showUploadList={false}
|
||||
accept="image/*,video/*"
|
||||
>
|
||||
<Button
|
||||
icon={<UploadOutlined />}
|
||||
loading={replyUploading}
|
||||
style={{
|
||||
color: '#fff',
|
||||
background: 'rgba(255,255,255,0.1)',
|
||||
border: '1px solid rgba(255,255,255,0.2)',
|
||||
width: isMobile ? '100%' : 'auto'
|
||||
}}
|
||||
>
|
||||
插入图片/视频
|
||||
</Button>
|
||||
</Upload>
|
||||
|
||||
<Button type="primary" onClick={handleSubmitReply} loading={submitting} style={{ width: isMobile ? '100%' : 'auto' }}>
|
||||
提交回复
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div style={{ textAlign: 'center', padding: 20 }}>
|
||||
<Text style={{ color: '#888' }}>登录后参与讨论</Text>
|
||||
<br/>
|
||||
<Button type="primary" style={{ marginTop: 10 }} onClick={() => setLoginModalVisible(true)}>
|
||||
立即登录
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
<LoginModal
|
||||
visible={loginModalVisible}
|
||||
onClose={() => setLoginModalVisible(false)}
|
||||
onLoginSuccess={(data) => login(data)}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
open={expertModalVisible}
|
||||
onCancel={() => setExpertModalVisible(false)}
|
||||
footer={null}
|
||||
title={<Space><StarFilled style={{ color: '#ffd700' }} /><span style={{ color: '#fff' }}>技术专家信息</span></Space>}
|
||||
styles={{
|
||||
content: { background: 'rgba(30, 30, 30, 0.95)', border: '1px solid rgba(255, 255, 255, 0.1)', backdropFilter: 'blur(10px)' },
|
||||
header: { background: 'transparent', borderBottom: '1px solid rgba(255, 255, 255, 0.1)' },
|
||||
body: { background: 'transparent' },
|
||||
mask: { backdropFilter: 'blur(4px)' }
|
||||
}}
|
||||
closeIcon={<CloseOutlined style={{ color: 'rgba(255, 255, 255, 0.5)' }} />}
|
||||
bodyStyle={{ textAlign: 'center' }}
|
||||
>
|
||||
{selectedExpert && (
|
||||
<div>
|
||||
<Avatar size={80} src={selectedExpert.avatar_url} icon={<UserOutlined />} style={{ border: '3px solid #ffd700', marginBottom: 15, boxShadow: '0 0 15px rgba(255, 215, 0, 0.2)' }} />
|
||||
<Title level={4} style={{ marginBottom: 5, color: '#fff' }}>{selectedExpert.nickname}</Title>
|
||||
<Tag color="gold" style={{ marginBottom: 20, background: 'rgba(255, 215, 0, 0.15)', border: '1px solid rgba(255, 215, 0, 0.4)', color: '#ffd700' }}>{selectedExpert.title || '技术专家'}</Tag>
|
||||
|
||||
{selectedExpert.skills && selectedExpert.skills.length > 0 && (
|
||||
<div style={{ marginTop: 20, textAlign: 'left' }}>
|
||||
<Text strong style={{ display: 'block', marginBottom: 10, color: '#1890ff' }}>擅长技能</Text>
|
||||
<Space wrap>
|
||||
{selectedExpert.skills.map((skill, idx) => (
|
||||
<div key={idx} style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
background: 'rgba(255, 255, 255, 0.05)',
|
||||
padding: '6px 12px',
|
||||
borderRadius: 6,
|
||||
border: '1px solid rgba(255, 255, 255, 0.1)',
|
||||
transition: 'all 0.3s'
|
||||
}}>
|
||||
{skill.icon && <img src={skill.icon} style={{ width: 16, height: 16, marginRight: 6 }} />}
|
||||
<Text style={{ fontSize: 12, color: '#ddd' }}>{skill.text}</Text>
|
||||
</div>
|
||||
))}
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
|
||||
{/* Edit Modal */}
|
||||
<CreateTopicModal
|
||||
visible={editModalVisible}
|
||||
onClose={() => {
|
||||
setEditModalVisible(false);
|
||||
// Workaround for scroll issue: Force reload page on close
|
||||
window.location.reload();
|
||||
}}
|
||||
onSuccess={() => {
|
||||
fetchTopic();
|
||||
}}
|
||||
initialValues={topic}
|
||||
isEditMode={true}
|
||||
topicId={topic?.id}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ForumDetail;
|
||||
109
frontend/src/pages/ForumDetail.module.less
Normal file
109
frontend/src/pages/ForumDetail.module.less
Normal file
@@ -0,0 +1,109 @@
|
||||
.markdown-body {
|
||||
color: #ddd;
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #fff;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
h1 { font-size: 2em; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 0.3em; }
|
||||
h2 { font-size: 1.5em; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 0.3em; }
|
||||
h3 { font-size: 1.25em; }
|
||||
h4 { font-size: 1em; }
|
||||
h5 { font-size: 0.875em; }
|
||||
h6 { font-size: 0.85em; color: #888; }
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #1890ff;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
li {
|
||||
word-wrap: break-all;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 16px;
|
||||
padding: 0 1em;
|
||||
color: #8b949e;
|
||||
border-left: 0.25em solid #30363d;
|
||||
}
|
||||
|
||||
/* Table Styles */
|
||||
table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
|
||||
thead {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
tr {
|
||||
background-color: transparent;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
/* Ensure text color is readable */
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
td {
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
/* Inline Code */
|
||||
code:not([class*="language-"]) {
|
||||
padding: 0.2em 0.4em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
background-color: rgba(110, 118, 129, 0.4);
|
||||
border-radius: 6px;
|
||||
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
img {
|
||||
max-width: 100%;
|
||||
box-sizing: content-box;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
429
frontend/src/pages/ForumList.jsx
Normal file
429
frontend/src/pages/ForumList.jsx
Normal file
@@ -0,0 +1,429 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Typography, Input, Button, List, Tag, Avatar, Card, Space, Spin, message, Badge, Tooltip, Tabs, Row, Col, Grid, Carousel, Modal } from 'antd';
|
||||
import { SearchOutlined, PlusOutlined, UserOutlined, MessageOutlined, EyeOutlined, CheckCircleFilled, FireOutlined, StarFilled, QuestionCircleOutlined, ShareAltOutlined, SoundOutlined, RightOutlined, CloseOutlined } from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { motion } from 'framer-motion';
|
||||
import { getTopics, getStarUsers, getAnnouncements } from '../api';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import CreateTopicModal from '../components/CreateTopicModal';
|
||||
import LoginModal from '../components/LoginModal';
|
||||
|
||||
const { Title, Text, Paragraph } = Typography;
|
||||
const { useBreakpoint } = Grid;
|
||||
|
||||
const ForumList = () => {
|
||||
const screens = useBreakpoint();
|
||||
const isMobile = !screens.md; // roughly checks if screen is smaller than medium
|
||||
const navigate = useNavigate();
|
||||
const { user } = useAuth();
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [topics, setTopics] = useState([]);
|
||||
const [starUsers, setStarUsers] = useState([]);
|
||||
const [announcements, setAnnouncements] = useState([]);
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [category, setCategory] = useState('all');
|
||||
const [createModalVisible, setCreateModalVisible] = useState(false);
|
||||
const [loginModalVisible, setLoginModalVisible] = useState(false);
|
||||
const [expertModalVisible, setExpertModalVisible] = useState(false);
|
||||
const [selectedExpert, setSelectedExpert] = useState(null);
|
||||
|
||||
const showExpertInfo = (user) => {
|
||||
setSelectedExpert(user);
|
||||
setExpertModalVisible(true);
|
||||
};
|
||||
|
||||
const fetchTopics = async (search = '', cat = '') => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const params = {};
|
||||
if (search) params.search = search;
|
||||
if (cat && cat !== 'all') params.category = cat;
|
||||
|
||||
const res = await getTopics(params);
|
||||
setTopics(res.data.results || res.data); // Support pagination result or list
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error('获取帖子列表失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchStarUsers = async () => {
|
||||
try {
|
||||
const res = await getStarUsers();
|
||||
setStarUsers(res.data);
|
||||
} catch (error) {
|
||||
console.error("Fetch star users failed", error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchAnnouncements = async () => {
|
||||
try {
|
||||
const res = await getAnnouncements();
|
||||
setAnnouncements(res.data.results || res.data);
|
||||
} catch (error) {
|
||||
console.error("Fetch announcements failed", error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchTopics(searchText, category);
|
||||
fetchStarUsers();
|
||||
fetchAnnouncements();
|
||||
}, [category]);
|
||||
|
||||
const handleSearch = (value) => {
|
||||
setSearchText(value);
|
||||
fetchTopics(value, category);
|
||||
};
|
||||
|
||||
const handleCreateClick = () => {
|
||||
if (!user) {
|
||||
setLoginModalVisible(true);
|
||||
return;
|
||||
}
|
||||
setCreateModalVisible(true);
|
||||
};
|
||||
|
||||
const getCategoryIcon = (cat) => {
|
||||
switch(cat) {
|
||||
case 'help': return <QuestionCircleOutlined style={{ color: '#faad14' }} />;
|
||||
case 'share': return <ShareAltOutlined style={{ color: '#1890ff' }} />;
|
||||
case 'notice': return <SoundOutlined style={{ color: '#ff4d4f' }} />;
|
||||
default: return <MessageOutlined style={{ color: '#00b96b' }} />;
|
||||
}
|
||||
};
|
||||
|
||||
const getCategoryLabel = (cat) => {
|
||||
switch(cat) {
|
||||
case 'help': return '求助';
|
||||
case 'share': return '分享';
|
||||
case 'notice': return '公告';
|
||||
default: return '讨论';
|
||||
}
|
||||
};
|
||||
|
||||
const items = [
|
||||
{ key: 'all', label: '全部话题' },
|
||||
{ key: 'discussion', label: '技术讨论' },
|
||||
{ key: 'help', label: '求助问答' },
|
||||
{ key: 'share', label: '经验分享' },
|
||||
{ key: 'notice', label: '官方公告' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{ minHeight: '100vh', paddingBottom: 60 }}>
|
||||
{/* Hero Section */}
|
||||
<div style={{
|
||||
textAlign: 'center',
|
||||
padding: isMobile ? '40px 15px 20px' : '80px 20px 40px',
|
||||
background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,185,107,0.1) 100%)'
|
||||
}}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<Title level={isMobile ? 2 : 1} style={{ color: '#fff', fontFamily: "'Orbitron', sans-serif", marginBottom: 10 }}>
|
||||
<span style={{ color: '#00b96b' }}>Quant Speed</span> Developer Community
|
||||
</Title>
|
||||
<Text style={{ color: '#888', fontSize: isMobile ? 14 : 18, maxWidth: 600, display: 'block', margin: '0 auto 30px' }}>
|
||||
技术交流 · 硬件开发 · 官方支持 · 量迹生态
|
||||
</Text>
|
||||
</motion.div>
|
||||
|
||||
<div style={{
|
||||
maxWidth: 600,
|
||||
margin: '0 auto',
|
||||
display: 'flex',
|
||||
gap: 10,
|
||||
flexDirection: isMobile ? 'column' : 'row'
|
||||
}}>
|
||||
<Input
|
||||
size={isMobile ? "middle" : "large"}
|
||||
placeholder="搜索感兴趣的话题..."
|
||||
prefix={<SearchOutlined style={{ color: '#666' }} />}
|
||||
style={{ borderRadius: 8, background: 'rgba(255,255,255,0.1)', border: '1px solid #333', color: '#fff' }}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
onPressEnter={(e) => handleSearch(e.target.value)}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
size={isMobile ? "middle" : "large"}
|
||||
icon={<PlusOutlined />}
|
||||
onClick={handleCreateClick}
|
||||
style={{ height: 'auto', borderRadius: 8, width: isMobile ? '100%' : 'auto' }}
|
||||
>
|
||||
发布新帖
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Section */}
|
||||
<div style={{ maxWidth: 1200, margin: '0 auto', padding: isMobile ? '0 15px' : '0 20px' }}>
|
||||
<Row gutter={24}>
|
||||
<Col xs={24} md={18}>
|
||||
{isMobile && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
style={{ marginBottom: 20 }}
|
||||
>
|
||||
{/* Mobile Announcements */}
|
||||
<div style={{ background: 'rgba(255,77,79,0.1)', border: '1px solid rgba(255,77,79,0.3)', borderRadius: 8, padding: '8px 12px', marginBottom: 15, display: 'flex', alignItems: 'center' }}>
|
||||
<SoundOutlined style={{ color: '#ff4d4f', marginRight: 10 }} />
|
||||
<div style={{ flex: 1, overflow: 'hidden' }}>
|
||||
<Carousel autoplay dots={false} effect="scrollx" style={{ width: '100%' }}>
|
||||
{announcements.length > 0 ? announcements.map(item => (
|
||||
<div key={item.id}>
|
||||
<Text ellipsis style={{ color: '#fff', width: '100%', display: 'block' }}>
|
||||
{item.title}
|
||||
</Text>
|
||||
</div>
|
||||
)) : (
|
||||
<div><Text style={{ color: '#888' }}>暂无公告</Text></div>
|
||||
)}
|
||||
</Carousel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Experts */}
|
||||
<div style={{ overflowX: 'auto', whiteSpace: 'nowrap', paddingBottom: 5, display: 'flex', gap: 15, scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
|
||||
{starUsers.map(u => (
|
||||
<div key={u.id} style={{ textAlign: 'center', minWidth: 60 }} onClick={() => showExpertInfo(u)}>
|
||||
<Badge count={<StarFilled style={{ color: '#ffd700' }} />} offset={[-5, 5]}>
|
||||
<Avatar size={48} src={u.avatar_url} icon={<UserOutlined />} style={{ border: '2px solid rgba(255, 215, 0, 0.3)', cursor: 'pointer' }} />
|
||||
</Badge>
|
||||
<div style={{ color: '#fff', fontSize: 12, marginTop: 5, width: 60, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{u.nickname}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
<Tabs
|
||||
defaultActiveKey="all"
|
||||
items={items}
|
||||
onChange={setCategory}
|
||||
tabBarStyle={{ color: '#fff', marginBottom: isMobile ? 10 : 16 }}
|
||||
/>
|
||||
<List
|
||||
loading={loading}
|
||||
itemLayout="vertical"
|
||||
dataSource={topics}
|
||||
renderItem={(item) => (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Card
|
||||
hoverable
|
||||
style={{
|
||||
marginBottom: 16,
|
||||
background: 'rgba(20,20,20,0.6)',
|
||||
border: item.is_pinned ? '1px solid rgba(0, 185, 107, 0.4)' : '1px solid rgba(255,255,255,0.1)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
boxShadow: item.is_pinned ? '0 0 10px rgba(0, 185, 107, 0.1)' : 'none'
|
||||
}}
|
||||
bodyStyle={{ padding: isMobile ? '15px' : '20px 24px' }}
|
||||
onClick={() => navigate(`/forum/${item.id}`)}
|
||||
>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ marginBottom: 8, display: 'flex', alignItems: 'center', gap: isMobile ? 4 : 8, flexWrap: 'wrap' }}>
|
||||
{item.is_pinned && <Tag color="red" icon={<FireOutlined />}>{isMobile ? '顶' : '置顶'}</Tag>}
|
||||
<Tag icon={getCategoryIcon(item.category)} style={{ background: 'transparent', color: '#fff', border: '1px solid #444', fontSize: isMobile ? 10 : 12 }}>
|
||||
{getCategoryLabel(item.category)}
|
||||
</Tag>
|
||||
{item.is_verified_owner && (
|
||||
<Tooltip title="已验证购买过相关产品">
|
||||
<Tag icon={<CheckCircleFilled />} color="#00b96b" style={{ margin: 0 }}>{isMobile ? '认证' : '认证用户'}</Tag>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Text style={{ color: '#fff', fontSize: isMobile ? 16 : 18, fontWeight: 'bold', cursor: 'pointer', lineHeight: 1.3 }}>
|
||||
{item.title}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Paragraph
|
||||
ellipsis={{ rows: 2 }}
|
||||
style={{ color: '#aaa', marginBottom: 12, fontSize: isMobile ? 13 : 14 }}
|
||||
>
|
||||
{item.content.replace(/!\[.*?\]\(.*?\)/g, '[图片]').replace(/[#*`]/g, '')} {/* Simple markdown strip */}
|
||||
</Paragraph>
|
||||
|
||||
{item.content.match(/!\[.*?\]\((.*?)\)/) && (
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<img
|
||||
src={item.content.match(/!\[.*?\]\((.*?)\)/)[1]}
|
||||
alt="cover"
|
||||
style={{ maxHeight: 150, borderRadius: 8, maxWidth: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Space size={isMobile ? 4 : "middle"} wrap style={{ color: '#666', fontSize: isMobile ? 12 : 13 }}>
|
||||
<Space size={4}>
|
||||
<Avatar src={item.author_info?.avatar_url} icon={<UserOutlined />} size="small" />
|
||||
<Text style={{ color: item.author_info?.is_star ? '#ffd700' : '#888', fontWeight: item.author_info?.is_star ? 'bold' : 'normal', fontSize: isMobile ? 12 : 14 }}>
|
||||
{item.author_info?.nickname || '匿名用户'}
|
||||
</Text>
|
||||
{item.author_info?.is_star && (
|
||||
<Tooltip title={item.author_info.title || "技术专家"}>
|
||||
<StarFilled style={{ color: '#ffd700' }} />
|
||||
</Tooltip>
|
||||
)}
|
||||
</Space>
|
||||
{!isMobile && <span>•</span>}
|
||||
<span>{new Date(item.created_at).toLocaleDateString()}</span>
|
||||
{item.product_info && (
|
||||
<Tag color="blue" style={{ marginLeft: isMobile ? 4 : 8, fontSize: 12 }}>{item.product_info.name}</Tag>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4, minWidth: isMobile ? 50 : 80, marginLeft: 10 }}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<MessageOutlined style={{ fontSize: isMobile ? 14 : 16, color: '#1890ff' }} />
|
||||
<div style={{ color: '#fff', fontWeight: 'bold', fontSize: isMobile ? 12 : 14 }}>{item.replies?.length || 0}</div>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center', marginTop: isMobile ? 2 : 5 }}>
|
||||
<EyeOutlined style={{ fontSize: isMobile ? 14 : 16, color: '#666' }} />
|
||||
<div style={{ color: '#888', fontSize: isMobile ? 10 : 12 }}>{item.view_count || 0}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
)}
|
||||
locale={{ emptyText: <div style={{ color: '#666', padding: 40 }}>暂无帖子，来发布第一个吧！</div> }}
|
||||
/>
|
||||
</Col>
|
||||
|
||||
<Col xs={0} md={6}>
|
||||
<Card
|
||||
title={<Space><StarFilled style={{ color: '#ffd700' }} /><span style={{ color: '#fff' }}>技术专家榜</span></Space>}
|
||||
style={{ background: 'rgba(20,20,20,0.6)', border: '1px solid rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)' }}
|
||||
headStyle={{ borderBottom: '1px solid rgba(255,255,255,0.1)' }}
|
||||
>
|
||||
<div style={{ textAlign: 'center', padding: '20px 0', color: '#666' }}>
|
||||
{starUsers.length > 0 ? (
|
||||
starUsers.map(u => (
|
||||
<div key={u.id} style={{ marginBottom: 15, display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }} onClick={() => showExpertInfo(u)}>
|
||||
<Avatar size="large" src={u.avatar_url} icon={<UserOutlined />} />
|
||||
<div style={{ textAlign: 'left' }}>
|
||||
<div style={{ color: '#fff', fontWeight: 'bold' }}>
|
||||
{u.nickname} <StarFilled style={{ color: '#ffd700', fontSize: 12 }} />
|
||||
</div>
|
||||
<div style={{ color: '#666', fontSize: 12 }}>{u.title || '技术专家'}</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div style={{ color: '#888' }}>暂无上榜专家</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
title={<Space><SoundOutlined style={{ color: '#ff4d4f' }} /><span style={{ color: '#fff' }}>社区公告</span></Space>}
|
||||
style={{ marginTop: 20, background: 'rgba(20,20,20,0.6)', border: '1px solid rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)' }}
|
||||
headStyle={{ borderBottom: '1px solid rgba(255,255,255,0.1)' }}
|
||||
>
|
||||
<List
|
||||
size="small"
|
||||
dataSource={announcements}
|
||||
renderItem={item => (
|
||||
<List.Item style={{ padding: '12px 0', borderBottom: '1px solid rgba(255,255,255,0.05)', display: 'block' }}>
|
||||
{item.display_image_url && (
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<img src={item.display_image_url} alt={item.title} style={{ width: '100%', borderRadius: 4 }} />
|
||||
</div>
|
||||
)}
|
||||
<div style={{ color: '#fff', marginBottom: 4, fontWeight: 'bold' }}>
|
||||
{item.link_url ? (
|
||||
<a href={item.link_url} target="_blank" rel="noopener noreferrer" style={{ color: '#fff' }}>{item.title}</a>
|
||||
) : (
|
||||
<span>{item.title}</span>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ color: '#888', fontSize: 12 }}>
|
||||
{item.content}
|
||||
</div>
|
||||
</List.Item>
|
||||
)}
|
||||
locale={{ emptyText: <div style={{ color: '#666', padding: '20px 0', textAlign: 'center' }}>暂无公告</div> }}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<CreateTopicModal
|
||||
visible={createModalVisible}
|
||||
onClose={() => setCreateModalVisible(false)}
|
||||
onSuccess={() => fetchTopics(searchText, category)}
|
||||
/>
|
||||
|
||||
<LoginModal
|
||||
visible={loginModalVisible}
|
||||
onClose={() => setLoginModalVisible(false)}
|
||||
onLoginSuccess={() => {
|
||||
setCreateModalVisible(true);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
open={expertModalVisible}
|
||||
onCancel={() => setExpertModalVisible(false)}
|
||||
footer={null}
|
||||
title={<Space><StarFilled style={{ color: '#ffd700' }} /><span style={{ color: '#fff' }}>技术专家信息</span></Space>}
|
||||
styles={{
|
||||
content: { background: 'rgba(30, 30, 30, 0.95)', border: '1px solid rgba(255, 255, 255, 0.1)', backdropFilter: 'blur(10px)' },
|
||||
header: { background: 'transparent', borderBottom: '1px solid rgba(255, 255, 255, 0.1)' },
|
||||
body: { background: 'transparent' },
|
||||
mask: { backdropFilter: 'blur(4px)' }
|
||||
}}
|
||||
closeIcon={<CloseOutlined style={{ color: 'rgba(255, 255, 255, 0.5)' }} />}
|
||||
bodyStyle={{ textAlign: 'center' }}
|
||||
>
|
||||
{selectedExpert && (
|
||||
<div>
|
||||
<Avatar size={80} src={selectedExpert.avatar_url} icon={<UserOutlined />} style={{ border: '3px solid #ffd700', marginBottom: 15, boxShadow: '0 0 15px rgba(255, 215, 0, 0.2)' }} />
|
||||
<Title level={4} style={{ marginBottom: 5, color: '#fff' }}>{selectedExpert.nickname}</Title>
|
||||
<Tag color="gold" style={{ marginBottom: 20, background: 'rgba(255, 215, 0, 0.15)', border: '1px solid rgba(255, 215, 0, 0.4)', color: '#ffd700' }}>{selectedExpert.title || '技术专家'}</Tag>
|
||||
|
||||
{selectedExpert.skills && selectedExpert.skills.length > 0 && (
|
||||
<div style={{ marginTop: 20, textAlign: 'left' }}>
|
||||
<Text strong style={{ display: 'block', marginBottom: 10, color: '#00b96b' }}>擅长技能</Text>
|
||||
<Space wrap>
|
||||
{selectedExpert.skills.map((skill, idx) => (
|
||||
<div key={idx} style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
background: 'rgba(255, 255, 255, 0.05)',
|
||||
padding: '6px 12px',
|
||||
borderRadius: 6,
|
||||
border: '1px solid rgba(255, 255, 255, 0.1)',
|
||||
transition: 'all 0.3s'
|
||||
}}>
|
||||
{skill.icon && <img src={skill.icon} style={{ width: 16, height: 16, marginRight: 6 }} />}
|
||||
<Text style={{ fontSize: 12, color: '#ddd' }}>{skill.text}</Text>
|
||||
</div>
|
||||
))}
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ForumList;
|
||||
78
frontend/src/pages/Home.css
Normal file
78
frontend/src/pages/Home.css
Normal file
@@ -0,0 +1,78 @@
|
||||
.tech-card {
|
||||
background: rgba(255, 255, 255, 0.05) !important;
|
||||
border: 1px solid #303030 !important;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
box-shadow: none !important; /* 强制移除默认阴影 */
|
||||
overflow: hidden; /* 确保子元素不会溢出产生黑边 */
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.tech-card:hover {
|
||||
border-color: #00b96b !important;
|
||||
box-shadow: 0 0 20px rgba(0, 185, 107, 0.4) !important; /* 增强悬停发光 */
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.tech-card .ant-card-body {
|
||||
border-top: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.tech-card-title {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tech-price {
|
||||
color: #00b96b;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.product-scroll-container {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding: 30px 20px; /* 增加左右内边距，为悬停缩放和投影留出空间 */
|
||||
margin: 0 -20px; /* 使用负外边距抵消内边距，使滚动条能延伸到版心边缘 */
|
||||
width: calc(100% + 40px);
|
||||
}
|
||||
|
||||
/* 自定义滚动条 */
|
||||
.product-scroll-container::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.product-scroll-container::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 3px;
|
||||
margin: 0 20px; /* 让滚动条轨道在版心内显示 */
|
||||
}
|
||||
|
||||
.product-scroll-container::-webkit-scrollbar-thumb {
|
||||
background: rgba(24, 144, 255, 0.2);
|
||||
border-radius: 3px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.product-scroll-container::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(24, 144, 255, 0.5);
|
||||
}
|
||||
|
||||
/* 布局对齐 */
|
||||
.product-scroll-container .ant-row {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.product-scroll-container .ant-col {
|
||||
flex: 0 0 320px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
592
frontend/src/pages/Home.jsx
Normal file
592
frontend/src/pages/Home.jsx
Normal file
@@ -0,0 +1,592 @@
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import { Card, Row, Col, Tag, Button, Spin, Typography, Carousel } from 'antd';
|
||||
import { RocketOutlined, RightOutlined, LeftOutlined, RightCircleOutlined } from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { motion } from 'framer-motion';
|
||||
import { getConfigs, getHomePageConfig } from '../api';
|
||||
import ActivityList from '../components/activity/ActivityList';
|
||||
import './Home.css';
|
||||
|
||||
const { Title, Paragraph } = Typography;
|
||||
|
||||
const Home = () => {
|
||||
const [products, setProducts] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [typedText, setTypedText] = useState('');
|
||||
const [isTypingComplete, setIsTypingComplete] = useState(false);
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
const [currentSlide2, setCurrentSlide2] = useState(0);
|
||||
const [homeConfig, setHomeConfig] = useState(null);
|
||||
const [carousel1Items, setCarousel1Items] = useState([]);
|
||||
const [carousel2Items, setCarousel2Items] = useState([]);
|
||||
const fullText = "未来已来 AI 核心驱动";
|
||||
const navigate = useNavigate();
|
||||
const carouselRef = useRef(null);
|
||||
const carouselRef2 = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchProducts();
|
||||
fetchHomePageConfig();
|
||||
let i = 0;
|
||||
const typingInterval = setInterval(() => {
|
||||
i++;
|
||||
setTypedText(fullText.slice(0, i));
|
||||
if (i >= fullText.length) {
|
||||
clearInterval(typingInterval);
|
||||
setIsTypingComplete(true);
|
||||
}
|
||||
}, 150);
|
||||
|
||||
return () => clearInterval(typingInterval);
|
||||
}, []);
|
||||
|
||||
const fetchProducts = async () => {
|
||||
try {
|
||||
const response = await getConfigs();
|
||||
setProducts(response.data);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch products:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchHomePageConfig = async () => {
|
||||
try {
|
||||
const response = await getHomePageConfig();
|
||||
const data = response.data;
|
||||
setHomeConfig(data);
|
||||
setCarousel1Items(data.carousel1_items || []);
|
||||
setCarousel2Items(data.carousel2_items || []);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch homepage config:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const cardVariants = {
|
||||
hidden: { opacity: 0, y: 50 },
|
||||
visible: (i) => ({
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: i * 0.1,
|
||||
duration: 0.5,
|
||||
type: "spring",
|
||||
stiffness: 100
|
||||
}
|
||||
}),
|
||||
hover: {
|
||||
scale: 1.05,
|
||||
rotateX: 5,
|
||||
rotateY: 5,
|
||||
transition: { duration: 0.3 }
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
|
||||
<Spin size="large" />
|
||||
<div style={{ marginTop: 20, color: '#00b96b' }}>加载硬件配置中...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ textAlign: 'center', marginBottom: 60 }}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<img
|
||||
src={homeConfig?.display_banner || '/shouye.png'}
|
||||
alt="首页Banner"
|
||||
style={{
|
||||
width: '100%',
|
||||
maxWidth: 1200,
|
||||
height: 'auto',
|
||||
borderRadius: 12,
|
||||
boxShadow: '0 8px 32px rgba(24, 144, 255, 0.3)'
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.3 }}
|
||||
style={{ marginTop: 30 }}
|
||||
>
|
||||
<h1 style={{
|
||||
fontSize: '42px',
|
||||
fontWeight: 'bold',
|
||||
color: '#fff',
|
||||
margin: 0,
|
||||
letterSpacing: '4px'
|
||||
}}>
|
||||
{homeConfig?.main_title || '"创赢未来"云南2026创业大赛'}
|
||||
</h1>
|
||||
</motion.div>
|
||||
|
||||
{/* 轮播图 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.5 }}
|
||||
style={{ marginTop: 40, maxWidth: 1200, marginLeft: 'auto', marginRight: 'auto' }}
|
||||
>
|
||||
{/* 标题区域 */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', marginBottom: 24, justifyContent: 'space-between' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
|
||||
<span style={{ fontSize: 32, fontWeight: 'bold', color: '#fff' }}>{homeConfig?.carousel1_title || '"创赢未来"云南2026创业大赛'}</span>
|
||||
<span style={{ fontSize: 16, color: 'rgba(255,255,255,0.6)', letterSpacing: 2 }}>EVENTS</span>
|
||||
</div>
|
||||
{/* 箭头导航 */}
|
||||
<div style={{ display: 'flex', gap: 12 }}>
|
||||
<div
|
||||
onClick={() => carouselRef.current?.prev()}
|
||||
onMouseEnter={(e) => { e.currentTarget.style.background = '#1890ff'; e.currentTarget.querySelector('svg').style.color = '#fff'; }}
|
||||
onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.querySelector('svg').style.color = '#1890ff'; }}
|
||||
style={{
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: '50%',
|
||||
background: 'transparent',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
border: '2px solid #1890ff',
|
||||
transition: 'all 0.3s'
|
||||
}}
|
||||
>
|
||||
<LeftOutlined style={{ fontSize: 18, color: '#1890ff', transition: 'color 0.3s' }} />
|
||||
</div>
|
||||
<div
|
||||
onClick={() => carouselRef.current?.next()}
|
||||
onMouseEnter={(e) => { e.currentTarget.style.background = '#1890ff'; e.currentTarget.querySelector('svg').style.color = '#fff'; }}
|
||||
onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.querySelector('svg').style.color = '#1890ff'; }}
|
||||
style={{
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: '50%',
|
||||
background: 'transparent',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
border: '2px solid #1890ff',
|
||||
transition: 'all 0.3s'
|
||||
}}
|
||||
>
|
||||
<RightOutlined style={{ fontSize: 18, color: '#1890ff', transition: 'color 0.3s' }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 轮播图主体 */}
|
||||
<div style={{
|
||||
position: 'relative',
|
||||
borderRadius: 16,
|
||||
overflow: 'hidden',
|
||||
boxShadow: '0 8px 32px rgba(24, 144, 255, 0.2)',
|
||||
}}>
|
||||
<Carousel
|
||||
ref={carouselRef}
|
||||
autoplay
|
||||
dots={false}
|
||||
beforeChange={(_, next) => setCurrentSlide(next)}
|
||||
>
|
||||
{(carousel1Items.length > 0 ? carousel1Items : []).map((image, index) => (
|
||||
<div key={index}>
|
||||
<div style={{
|
||||
height: 450,
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
background: 'linear-gradient(135deg, #1890ff 0%, #69c0ff 100%)',
|
||||
}}>
|
||||
<img
|
||||
src={image.display_image || image.image_url}
|
||||
alt={image.title}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover'
|
||||
}}
|
||||
onError={(e) => {
|
||||
e.target.style.display = 'none';
|
||||
}}
|
||||
/>
|
||||
{/* 渐变遮罩 */}
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
background: 'linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%)',
|
||||
}} />
|
||||
{/* 标题区域 - 图片上方 */}
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: 40,
|
||||
left: 40,
|
||||
textAlign: 'left',
|
||||
}}>
|
||||
<h2 style={{ fontSize: 36, fontWeight: 'bold', color: '#fff', margin: 0, textShadow: '2px 2px 4px rgba(0,0,0,0.3)' }}>
|
||||
{image.title}
|
||||
</h2>
|
||||
<p style={{ fontSize: 18, color: 'rgba(255,255,255,0.9)', margin: '8px 0 0 0', textShadow: '1px 1px 2px rgba(0,0,0,0.3)' }}>
|
||||
{image.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
{/* 底部信息 */}
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
padding: '24px 40px',
|
||||
background: 'linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%)',
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
|
||||
<Tag style={{
|
||||
background: image.status_color,
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
fontSize: 14,
|
||||
padding: '4px 16px',
|
||||
borderRadius: 20,
|
||||
}}>
|
||||
{image.status}
|
||||
</Tag>
|
||||
<span style={{ color: 'rgba(255,255,255,0.8)', fontSize: 14 }}>{image.location}</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<div>
|
||||
<h3 style={{ color: '#fff', fontSize: 24, fontWeight: 'bold', margin: 0 }}>{image.title}</h3>
|
||||
<p style={{ color: 'rgba(255,255,255,0.8)', fontSize: 14, margin: '8px 0 0 0' }}>
|
||||
<span style={{ marginRight: 20 }}>📅 {image.date}</span>
|
||||
<span>📍 {image.location}</span>
|
||||
</p>
|
||||
</div>
|
||||
<Button type="primary" size="large" style={{ borderRadius: 24, paddingLeft: 24, paddingRight: 24 }} onClick={() => navigate('/competitions')}>
|
||||
立即报名
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Carousel>
|
||||
|
||||
{/* 自定义分页指示器 */}
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
bottom: 100,
|
||||
right: 40,
|
||||
display: 'flex',
|
||||
gap: 8,
|
||||
}}>
|
||||
{(carousel1Items.length > 0 ? carousel1Items : []).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
onClick={() => carouselRef.current?.goTo(index)}
|
||||
style={{
|
||||
width: currentSlide === index ? 32 : 10,
|
||||
height: 10,
|
||||
borderRadius: 5,
|
||||
background: currentSlide === index ? '#fff' : 'rgba(255,255,255,0.4)',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.3s',
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 第二个轮播图 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
style={{ marginTop: 40, maxWidth: 1200, marginLeft: 'auto', marginRight: 'auto' }}
|
||||
>
|
||||
{/* 标题区域 */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', marginBottom: 24, justifyContent: 'space-between' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
|
||||
<span style={{ fontSize: 32, fontWeight: 'bold', color: '#fff' }}>{homeConfig?.carousel2_title || '"七彩云南创业福地"创业主题系列活动'}</span>
|
||||
<span style={{ fontSize: 16, color: 'rgba(255,255,255,0.6)', letterSpacing: 2 }}>ACTIVITIES</span>
|
||||
</div>
|
||||
{/* 箭头导航 */}
|
||||
<div style={{ display: 'flex', gap: 12 }}>
|
||||
<div
|
||||
onClick={() => carouselRef2.current?.prev()}
|
||||
onMouseEnter={(e) => { e.currentTarget.style.background = '#1890ff'; e.currentTarget.querySelector('svg').style.color = '#fff'; }}
|
||||
onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.querySelector('svg').style.color = '#1890ff'; }}
|
||||
style={{
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: '50%',
|
||||
background: 'transparent',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
border: '2px solid #1890ff',
|
||||
transition: 'all 0.3s'
|
||||
}}
|
||||
>
|
||||
<LeftOutlined style={{ fontSize: 18, color: '#1890ff', transition: 'color 0.3s' }} />
|
||||
</div>
|
||||
<div
|
||||
onClick={() => carouselRef2.current?.next()}
|
||||
onMouseEnter={(e) => { e.currentTarget.style.background = '#1890ff'; e.currentTarget.querySelector('svg').style.color = '#fff'; }}
|
||||
onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.querySelector('svg').style.color = '#1890ff'; }}
|
||||
style={{
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: '50%',
|
||||
background: 'transparent',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
border: '2px solid #1890ff',
|
||||
transition: 'all 0.3s'
|
||||
}}
|
||||
>
|
||||
<RightOutlined style={{ fontSize: 18, color: '#1890ff', transition: 'color 0.3s' }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 轮播图主体 */}
|
||||
<div style={{
|
||||
position: 'relative',
|
||||
borderRadius: 16,
|
||||
overflow: 'hidden',
|
||||
boxShadow: '0 8px 32px rgba(24, 144, 255, 0.2)',
|
||||
}}>
|
||||
<Carousel
|
||||
ref={carouselRef2}
|
||||
autoplay
|
||||
dots={false}
|
||||
beforeChange={(_, next) => setCurrentSlide2(next)}
|
||||
>
|
||||
{(carousel2Items.length > 0 ? carousel2Items : []).map((image, index) => (
|
||||
<div key={index}>
|
||||
<div style={{
|
||||
height: 450,
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
background: 'linear-gradient(135deg, #1890ff 0%, #69c0ff 100%)',
|
||||
}}>
|
||||
<img
|
||||
src={image.display_image || image.image_url}
|
||||
alt={image.title}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover'
|
||||
}}
|
||||
onError={(e) => {
|
||||
e.target.style.display = 'none';
|
||||
}}
|
||||
/>
|
||||
{/* 渐变遮罩 */}
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
background: 'linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%)',
|
||||
}} />
|
||||
{/* 标题区域 - 图片上方 */}
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: 40,
|
||||
left: 40,
|
||||
textAlign: 'left',
|
||||
}}>
|
||||
<h2 style={{ fontSize: 36, fontWeight: 'bold', color: '#fff', margin: 0, textShadow: '2px 2px 4px rgba(0,0,0,0.3)' }}>
|
||||
{image.title}
|
||||
</h2>
|
||||
<p style={{ fontSize: 18, color: 'rgba(255,255,255,0.9)', margin: '8px 0 0 0', textShadow: '1px 1px 2px rgba(0,0,0,0.3)' }}>
|
||||
{image.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
{/* 底部信息 */}
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
padding: '24px 40px',
|
||||
background: 'linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%)',
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
|
||||
<Tag style={{
|
||||
background: image.status_color,
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
fontSize: 14,
|
||||
padding: '4px 16px',
|
||||
borderRadius: 20,
|
||||
}}>
|
||||
{image.status}
|
||||
</Tag>
|
||||
<span style={{ color: 'rgba(255,255,255,0.8)', fontSize: 14 }}>{image.location}</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<div>
|
||||
<h3 style={{ color: '#fff', fontSize: 24, fontWeight: 'bold', margin: 0 }}>{image.title}</h3>
|
||||
<p style={{ color: 'rgba(255,255,255,0.8)', fontSize: 14, margin: '8px 0 0 0' }}>
|
||||
<span style={{ marginRight: 20 }}>📅 {image.date}</span>
|
||||
<span>📍 {image.location}</span>
|
||||
</p>
|
||||
</div>
|
||||
<Button type="primary" size="large" style={{ borderRadius: 24, paddingLeft: 24, paddingRight: 24 }} onClick={() => navigate('/competitions')}>
|
||||
立即报名
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Carousel>
|
||||
|
||||
{/* 自定义分页指示器 */}
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
bottom: 100,
|
||||
right: 40,
|
||||
display: 'flex',
|
||||
gap: 8,
|
||||
}}>
|
||||
{(carousel2Items.length > 0 ? carousel2Items : []).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
onClick={() => carouselRef2.current?.goTo(index)}
|
||||
style={{
|
||||
width: currentSlide2 === index ? 32 : 10,
|
||||
height: 10,
|
||||
borderRadius: 5,
|
||||
background: currentSlide2 === index ? '#fff' : 'rgba(255,255,255,0.4)',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.3s',
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 24px' }}>
|
||||
<ActivityList />
|
||||
</div>
|
||||
|
||||
<div className="product-scroll-container">
|
||||
<Row gutter={[24, 24]} wrap={false}>
|
||||
{products.map((product, index) => (
|
||||
<Col key={product.id} flex="0 0 320px">
|
||||
<motion.div
|
||||
custom={index}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
whileHover="hover"
|
||||
variants={cardVariants}
|
||||
style={{ perspective: 1000 }}
|
||||
>
|
||||
<Card
|
||||
className="tech-card glass-panel"
|
||||
variant="borderless"
|
||||
cover={
|
||||
<div style={{
|
||||
height: 200,
|
||||
background: 'linear-gradient(135deg, rgba(31,31,31,0.8), rgba(42,42,42,0.8))',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
color: '#444',
|
||||
borderBottom: '1px solid rgba(255,255,255,0.05)',
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
{product.static_image_url ? (
|
||||
<img
|
||||
src={product.static_image_url}
|
||||
alt={product.name}
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
/>
|
||||
) : (
|
||||
<motion.div
|
||||
animate={{ y: [0, -10, 0] }}
|
||||
transition={{ repeat: Infinity, duration: 3, ease: "easeInOut" }}
|
||||
>
|
||||
<RocketOutlined style={{ fontSize: 60, color: '#00b96b' }} />
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
onClick={() => navigate(`/product/${product.id}`)}
|
||||
>
|
||||
<div className="tech-card-title neon-text-blue">{product.name}</div>
|
||||
<div style={{ marginBottom: 10, height: 40, overflow: 'hidden', color: '#bbb' }}>
|
||||
{product.description}
|
||||
</div>
|
||||
<div style={{ marginBottom: 15, display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
|
||||
<Tag color="cyan" style={{ background: 'rgba(0,255,255,0.1)', border: '1px solid cyan', margin: 0 }}>{product.chip_type}</Tag>
|
||||
{product.has_camera && <Tag color="blue" style={{ background: 'rgba(0,0,255,0.1)', border: '1px solid blue', margin: 0 }}>Camera</Tag>}
|
||||
{product.has_microphone && <Tag color="purple" style={{ background: 'rgba(114,46,209,0.1)', border: '1px solid #722ed1', margin: 0 }}>Mic</Tag>}
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div className="tech-price neon-text-green">¥{product.price}</div>
|
||||
<Button type="primary" shape="circle" icon={<RightOutlined />} />
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
{/* 主办单位信息 */}
|
||||
<div style={{ maxWidth: 1200, margin: '40px auto 0', padding: '0 24px', textAlign: 'center' }}>
|
||||
<div style={{
|
||||
background: 'rgba(255, 255, 255, 0.1)',
|
||||
borderRadius: 16,
|
||||
padding: '24px 40px',
|
||||
backdropFilter: 'blur(10px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.2)',
|
||||
}}>
|
||||
<p style={{
|
||||
fontSize: 18,
|
||||
color: '#fff',
|
||||
margin: 0,
|
||||
lineHeight: 2,
|
||||
}}>
|
||||
<span style={{ fontWeight: 'bold', marginRight: 8 }}>主办单位：</span>{homeConfig?.organizer || '云南省人力资源和社会保障厅'}
|
||||
<span style={{ margin: '0 20px' }}>|</span>
|
||||
<span style={{ fontWeight: 'bold', marginRight: 8 }}>承办单位：</span>{homeConfig?.undertaker || '云南省就业局'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>{`
|
||||
.cursor-blink {
|
||||
animation: blink 1s step-end infinite;
|
||||
}
|
||||
@keyframes blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
388
frontend/src/pages/MyOrders.jsx
Normal file
388
frontend/src/pages/MyOrders.jsx
Normal file
@@ -0,0 +1,388 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Form, Input, Button, Card, List, Tag, Typography, message, Space, Statistic, Divider, Modal, Descriptions, Tabs } from 'antd';
|
||||
import { MobileOutlined, LockOutlined, SearchOutlined, CarOutlined, InboxOutlined, SafetyCertificateOutlined, CheckCircleOutlined, ClockCircleOutlined, CloseCircleOutlined, UserOutlined, EnvironmentOutlined, PhoneOutlined, CalendarOutlined } from '@ant-design/icons';
|
||||
import { getMySignups } from '../api';
|
||||
import { motion } from 'framer-motion';
|
||||
import LoginModal from '../components/LoginModal';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const { Title, Text, Paragraph } = Typography;
|
||||
|
||||
const MyOrders = () => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [orders, setOrders] = useState([]);
|
||||
const [activities, setActivities] = useState([]);
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [currentOrder, setCurrentOrder] = useState(null);
|
||||
const [signupInfoModalVisible, setSignupInfoModalVisible] = useState(false);
|
||||
const [currentSignupInfo, setCurrentSignupInfo] = useState(null);
|
||||
const [loginVisible, setLoginVisible] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { user, login } = useAuth();
|
||||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
handleQueryData();
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
const showDetail = (order) => {
|
||||
setCurrentOrder(order);
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
const showSignupInfo = (info) => {
|
||||
setCurrentSignupInfo(info);
|
||||
setSignupInfoModalVisible(true);
|
||||
};
|
||||
|
||||
const handleQueryData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const { default: api } = await import('../api');
|
||||
|
||||
// Parallel fetch
|
||||
const [ordersRes, activitiesRes] = await Promise.allSettled([
|
||||
api.get('/orders/'),
|
||||
getMySignups()
|
||||
]);
|
||||
|
||||
if (ordersRes.status === 'fulfilled') {
|
||||
setOrders(ordersRes.value.data);
|
||||
}
|
||||
|
||||
if (activitiesRes.status === 'fulfilled') {
|
||||
setActivities(activitiesRes.value.data);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error('查询出错');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusTag = (status) => {
|
||||
switch (status) {
|
||||
case 'paid': return <Tag icon={<CheckCircleOutlined />} color="success">已支付</Tag>;
|
||||
case 'pending': return <Tag icon={<ClockCircleOutlined />} color="warning">待支付</Tag>;
|
||||
case 'shipped': return <Tag icon={<CarOutlined />} color="processing">已发货</Tag>;
|
||||
case 'cancelled': return <Tag icon={<CloseCircleOutlined />} color="default">已取消</Tag>;
|
||||
default: return <Tag>{status}</Tag>;
|
||||
}
|
||||
};
|
||||
|
||||
const getOrderTitle = (order) => {
|
||||
if (order.config_name) return order.config_name;
|
||||
if (order.course_title) return order.course_title;
|
||||
if (order.activity_title) return order.activity_title;
|
||||
// Fallback to ID if no name/title
|
||||
if (order.config) return `硬件 ID: ${order.config}`;
|
||||
if (order.course) return `课程 ID: ${order.course}`;
|
||||
if (order.activity) return `活动 ID: ${order.activity}`;
|
||||
return '未知商品';
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '80vh',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '20px'
|
||||
}}>
|
||||
<div style={{ width: '100%', maxWidth: 1200 }}>
|
||||
<div style={{ textAlign: 'center', marginBottom: 40 }}>
|
||||
<SafetyCertificateOutlined style={{ fontSize: 48, color: '#00b96b', marginBottom: 20 }} />
|
||||
<Title level={2} style={{ color: '#fff', margin: 0, fontFamily: "'Orbitron', sans-serif" }}>我的信息</Title>
|
||||
<Text style={{ color: '#666' }}>个人信息管理中心</Text>
|
||||
</div>
|
||||
|
||||
{!user ? (
|
||||
<div style={{ textAlign: 'center', padding: 40, background: 'rgba(0,0,0,0.5)', borderRadius: 16 }}>
|
||||
<Text style={{ color: '#fff', fontSize: 18, display: 'block', marginBottom: 20 }}>请先登录查看你的项目</Text>
|
||||
<Button type="primary" size="large" onClick={() => setLoginVisible(true)}>立即登录</Button>
|
||||
</div>
|
||||
) : (
|
||||
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
|
||||
<div style={{ marginBottom: 20, textAlign: 'right', color: '#fff' }}>
|
||||
当前登录用户: <span style={{ color: '#00b96b', fontWeight: 'bold', marginRight: 10 }}>{user.nickname}</span>
|
||||
<Button
|
||||
onClick={handleQueryData}
|
||||
loading={loading}
|
||||
icon={<SearchOutlined />}
|
||||
>
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Tabs defaultActiveKey="1" items={[
|
||||
{
|
||||
key: '1',
|
||||
label: <span style={{ fontSize: 16 }}>我的订单</span>,
|
||||
children: (
|
||||
<List
|
||||
grid={{ gutter: 24, xs: 1, sm: 1, md: 2, lg: 2, xl: 3, xxl: 3 }}
|
||||
dataSource={orders}
|
||||
loading={loading}
|
||||
renderItem={order => (
|
||||
<List.Item>
|
||||
<Card
|
||||
hoverable
|
||||
onClick={() => showDetail(order)}
|
||||
title={<Space><span style={{ color: '#fff' }}>订单号: {order.id}</span> {getStatusTag(order.status)}</Space>}
|
||||
style={{
|
||||
background: 'rgba(0,0,0,0.6)',
|
||||
border: '1px solid rgba(255,255,255,0.1)',
|
||||
marginBottom: 10,
|
||||
backdropFilter: 'blur(10px)'
|
||||
}}
|
||||
headStyle={{ borderBottom: '1px solid rgba(255,255,255,0.1)' }}
|
||||
bodyStyle={{ padding: '20px' }}
|
||||
>
|
||||
<div style={{ color: '#ccc' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
|
||||
<Text strong style={{ color: '#1890ff', fontSize: 16 }}>{order.total_price} 元</Text>
|
||||
<Text style={{ color: '#888' }}>{new Date(order.created_at).toLocaleString()}</Text>
|
||||
</div>
|
||||
|
||||
<div style={{ background: 'rgba(255,255,255,0.05)', padding: 15, borderRadius: 8, marginBottom: 15 }}>
|
||||
<Space align="center" size="middle">
|
||||
{order.config_image ? (
|
||||
<img
|
||||
src={order.config_image}
|
||||
alt={getOrderTitle(order)}
|
||||
style={{ width: 60, height: 60, objectFit: 'cover', borderRadius: 8, border: '1px solid rgba(255,255,255,0.1)' }}
|
||||
/>
|
||||
) : (
|
||||
<div style={{
|
||||
width: 60,
|
||||
height: 60,
|
||||
background: 'rgba(24,144,255,0.1)',
|
||||
borderRadius: 8,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
border: '1px solid rgba(24,144,255,0.2)'
|
||||
}}>
|
||||
<InboxOutlined style={{ fontSize: 24, color: '#1890ff' }} />
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<div style={{ color: '#fff', fontSize: 16, fontWeight: '500', marginBottom: 4 }}>{getOrderTitle(order)}</div>
|
||||
<div style={{ color: '#888' }}>数量: <span style={{ color: '#00b96b' }}>x{order.quantity}</span></div>
|
||||
</div>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{(order.courier_name || order.tracking_number) && (
|
||||
<div style={{ background: 'rgba(24,144,255,0.1)', padding: 15, borderRadius: 8, border: '1px solid rgba(24,144,255,0.3)' }}>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Space>
|
||||
<CarOutlined style={{ color: '#1890ff', fontSize: 18 }} />
|
||||
<Text style={{ color: '#fff', fontSize: 16 }}>物流信息</Text>
|
||||
</Space>
|
||||
<Divider style={{ margin: '8px 0', borderColor: 'rgba(255,255,255,0.1)' }} />
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<span style={{ color: '#aaa' }}>快递公司:</span>
|
||||
<span style={{ color: '#fff' }}>{order.courier_name || '未知'}</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<span style={{ color: '#aaa' }}>快递单号:</span>
|
||||
{order.tracking_number ? (
|
||||
<div onClick={(e) => e.stopPropagation()}>
|
||||
<Paragraph
|
||||
copyable={{ text: order.tracking_number, tooltips: ['复制', '已复制'] }}
|
||||
style={{ color: '#fff', fontFamily: 'monospace', fontSize: 16, margin: 0 }}
|
||||
>
|
||||
{order.tracking_number}
|
||||
</Paragraph>
|
||||
</div>
|
||||
) : (
|
||||
<span style={{ color: '#fff', fontFamily: 'monospace', fontSize: 16 }}>暂无单号</span>
|
||||
)}
|
||||
</div>
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</List.Item>
|
||||
)}
|
||||
locale={{ emptyText: <div style={{ color: '#888', padding: 40, textAlign: 'center' }}>暂无订单信息</div> }}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: <span style={{ fontSize: 16 }}>我的活动</span>,
|
||||
children: (
|
||||
<List
|
||||
grid={{ gutter: 24, xs: 1, sm: 1, md: 2, lg: 2, xl: 3, xxl: 3 }}
|
||||
dataSource={activities}
|
||||
loading={loading}
|
||||
renderItem={item => {
|
||||
const activity = item.activity_info || item.activity || item;
|
||||
return (
|
||||
<List.Item>
|
||||
<Card
|
||||
hoverable
|
||||
onClick={() => navigate(`/activity/${activity.id}`)}
|
||||
cover={
|
||||
<div style={{ height: 160, overflow: 'hidden' }}>
|
||||
<img
|
||||
alt={activity.title}
|
||||
src={activity.cover_image || activity.banner_url || 'https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=400&h=200&fit=crop'}
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
style={{
|
||||
background: 'rgba(0,0,0,0.6)',
|
||||
border: '1px solid rgba(255,255,255,0.1)',
|
||||
marginBottom: 10,
|
||||
backdropFilter: 'blur(10px)',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
headStyle={{ borderBottom: '1px solid rgba(255,255,255,0.1)' }}
|
||||
bodyStyle={{ padding: '16px' }}
|
||||
>
|
||||
<div style={{ color: '#ccc' }}>
|
||||
<Title level={4} style={{ color: '#fff', marginBottom: 10, fontSize: 18 }} ellipsis={{ rows: 1 }}>{activity.title}</Title>
|
||||
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Space>
|
||||
<CalendarOutlined style={{ color: '#00b96b' }} />
|
||||
<Text style={{ color: '#bbb' }}>{new Date(activity.start_time).toLocaleDateString()}</Text>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Space>
|
||||
<EnvironmentOutlined style={{ color: '#00f0ff' }} />
|
||||
<Text style={{ color: '#bbb' }} ellipsis>{activity.location || '线上活动'}</Text>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 16 }}>
|
||||
<Tag color="blue">{activity.status || '已报名'}</Tag>
|
||||
<Space>
|
||||
{item.signup_info && Object.keys(item.signup_info).length > 0 && (
|
||||
<Button size="small" onClick={(e) => { e.stopPropagation(); showSignupInfo(item.signup_info); }}>
|
||||
查看报名信息
|
||||
</Button>
|
||||
)}
|
||||
<Button type="primary" size="small" ghost>查看详情</Button>
|
||||
</Space>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</List.Item>
|
||||
);
|
||||
}}
|
||||
locale={{ emptyText: <div style={{ color: '#888', padding: 40, textAlign: 'center' }}>暂无活动报名</div> }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
]} />
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
<Modal
|
||||
title={<Title level={4} style={{ margin: 0 }}>订单详情</Title>}
|
||||
open={modalVisible}
|
||||
onCancel={() => setModalVisible(false)}
|
||||
footer={[
|
||||
<Button key="close" onClick={() => setModalVisible(false)}>
|
||||
关闭
|
||||
</Button>
|
||||
]}
|
||||
width={600}
|
||||
centered
|
||||
>
|
||||
{currentOrder && (
|
||||
<Descriptions column={1} bordered size="middle" labelStyle={{ width: '140px', fontWeight: 'bold' }}>
|
||||
<Descriptions.Item label="订单号">
|
||||
<Paragraph copyable={{ text: currentOrder.id }} style={{ marginBottom: 0 }}>{currentOrder.id}</Paragraph>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="商品名称">{getOrderTitle(currentOrder)}</Descriptions.Item>
|
||||
<Descriptions.Item label="下单时间">{new Date(currentOrder.created_at).toLocaleString()}</Descriptions.Item>
|
||||
<Descriptions.Item label="状态更新时间">{new Date(currentOrder.updated_at).toLocaleString()}</Descriptions.Item>
|
||||
<Descriptions.Item label="当前状态">{getStatusTag(currentOrder.status)}</Descriptions.Item>
|
||||
<Descriptions.Item label="订单总价">
|
||||
<Text strong style={{ color: '#00b96b' }}>¥{currentOrder.total_price}</Text>
|
||||
</Descriptions.Item>
|
||||
|
||||
<Descriptions.Item label="收件人信息">
|
||||
<Space direction="vertical" size={0}>
|
||||
<Space><UserOutlined /> {currentOrder.customer_name}</Space>
|
||||
<Space><PhoneOutlined /> {currentOrder.phone_number}</Space>
|
||||
<Space align="start"><EnvironmentOutlined /> {currentOrder.shipping_address}</Space>
|
||||
</Space>
|
||||
</Descriptions.Item>
|
||||
|
||||
{currentOrder.salesperson_name && (
|
||||
<Descriptions.Item label="订单推荐员">
|
||||
<Space>
|
||||
{currentOrder.salesperson_name}
|
||||
{currentOrder.salesperson_code && <Tag color="blue">{currentOrder.salesperson_code}</Tag>}
|
||||
</Space>
|
||||
</Descriptions.Item>
|
||||
)}
|
||||
|
||||
{(currentOrder.status === 'shipped' || currentOrder.courier_name) && (
|
||||
<>
|
||||
<Descriptions.Item label="快递公司">{currentOrder.courier_name || '未知'}</Descriptions.Item>
|
||||
<Descriptions.Item label="快递单号">
|
||||
{currentOrder.tracking_number ? (
|
||||
<Paragraph copyable={{ text: currentOrder.tracking_number }} style={{ marginBottom: 0 }}>
|
||||
{currentOrder.tracking_number}
|
||||
</Paragraph>
|
||||
) : '暂无单号'}
|
||||
</Descriptions.Item>
|
||||
</>
|
||||
)}
|
||||
</Descriptions>
|
||||
)}
|
||||
</Modal>
|
||||
|
||||
<LoginModal
|
||||
visible={loginVisible}
|
||||
onClose={() => setLoginVisible(false)}
|
||||
onLoginSuccess={(userData) => {
|
||||
login(userData);
|
||||
if (userData.phone_number) {
|
||||
handleQueryData();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
title="报名信息详情"
|
||||
open={signupInfoModalVisible}
|
||||
onCancel={() => setSignupInfoModalVisible(false)}
|
||||
footer={[
|
||||
<Button key="close" onClick={() => setSignupInfoModalVisible(false)}>
|
||||
关闭
|
||||
</Button>
|
||||
]}
|
||||
>
|
||||
{currentSignupInfo && (
|
||||
<Descriptions column={1} bordered>
|
||||
{Object.entries(currentSignupInfo).map(([key, value]) => (
|
||||
<Descriptions.Item label={key} key={key}>
|
||||
{typeof value === 'object' ? JSON.stringify(value) : String(value)}
|
||||
</Descriptions.Item>
|
||||
))}
|
||||
</Descriptions>
|
||||
)}
|
||||
</Modal>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MyOrders;
|
||||
52
frontend/src/pages/Payment.css
Normal file
52
frontend/src/pages/Payment.css
Normal file
@@ -0,0 +1,52 @@
|
||||
.payment-container {
|
||||
max-width: 600px;
|
||||
margin: 50px auto;
|
||||
padding: 40px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid #303030;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.payment-title {
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.payment-amount {
|
||||
font-size: 48px;
|
||||
color: #1890ff;
|
||||
font-weight: bold;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.payment-info {
|
||||
text-align: left;
|
||||
background: rgba(0,0,0,0.3);
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 30px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.payment-method {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.payment-method-item {
|
||||
border: 1px solid #444;
|
||||
padding: 10px 20px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.payment-method-item.active {
|
||||
border-color: #00b96b;
|
||||
background: rgba(0, 185, 107, 0.1);
|
||||
}
|
||||
206
frontend/src/pages/Payment.jsx
Normal file
206
frontend/src/pages/Payment.jsx
Normal file
@@ -0,0 +1,206 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useParams, useNavigate, useLocation } from 'react-router-dom';
|
||||
import { Button, message, Result, Spin } from 'antd';
|
||||
import { WechatOutlined, AlipayCircleOutlined, CheckCircleOutlined } from '@ant-design/icons';
|
||||
import { QRCodeSVG } from 'qrcode.react';
|
||||
import { getOrder, initiatePayment, confirmPayment, nativePay, queryOrderStatus } from '../api';
|
||||
import './Payment.css';
|
||||
|
||||
const Payment = () => {
|
||||
const { orderId: initialOrderId } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [currentOrderId, setCurrentOrderId] = useState(location.state?.order_id || initialOrderId);
|
||||
const [order, setOrder] = useState(location.state?.orderInfo || null);
|
||||
const [codeUrl, setCodeUrl] = useState(location.state?.codeUrl || null);
|
||||
const [loading, setLoading] = useState(!location.state?.orderInfo && !location.state?.codeUrl);
|
||||
const [paying, setPaying] = useState(!!location.state?.codeUrl);
|
||||
const [paySuccess, setPaySuccess] = useState(false);
|
||||
const [paymentMethod, setPaymentMethod] = useState('wechat');
|
||||
|
||||
useEffect(() => {
|
||||
if (codeUrl && !paying) {
|
||||
setPaying(true);
|
||||
}
|
||||
}, [codeUrl]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log('Payment page state:', { currentOrderId, order, codeUrl, paying });
|
||||
if (!order && !codeUrl) {
|
||||
fetchOrder();
|
||||
}
|
||||
}, [currentOrderId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (paying && !codeUrl && order) {
|
||||
handlePay();
|
||||
}
|
||||
}, [paying, codeUrl, order]);
|
||||
|
||||
// 轮询订单状态
|
||||
useEffect(() => {
|
||||
let timer;
|
||||
if (paying && !paySuccess) {
|
||||
timer = setInterval(async () => {
|
||||
try {
|
||||
const response = await queryOrderStatus(currentOrderId);
|
||||
if (response.data.status === 'paid') {
|
||||
setPaySuccess(true);
|
||||
setPaying(false);
|
||||
clearInterval(timer);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Check payment status failed:', error);
|
||||
}
|
||||
}, 3000);
|
||||
}
|
||||
return () => clearInterval(timer);
|
||||
}, [paying, paySuccess, currentOrderId]);
|
||||
|
||||
const fetchOrder = async () => {
|
||||
try {
|
||||
const response = await getOrder(currentOrderId);
|
||||
setOrder(response.data);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch order:', error);
|
||||
// Fallback if getOrder API fails (404/405), we might show basic info or error
|
||||
// Assuming for now it works or we handle it
|
||||
message.error('无法获取订单信息，请重试');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePay = async () => {
|
||||
if (paymentMethod === 'alipay') {
|
||||
message.info('暂未开通支付宝支付，请使用微信支付');
|
||||
return;
|
||||
}
|
||||
|
||||
if (codeUrl) {
|
||||
setPaying(true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!order) {
|
||||
message.error('正在加载订单信息，请稍后...');
|
||||
return;
|
||||
}
|
||||
|
||||
setPaying(true);
|
||||
try {
|
||||
const orderData = {
|
||||
goodid: order.config || order.goodid,
|
||||
quantity: order.quantity,
|
||||
customer_name: order.customer_name,
|
||||
phone_number: order.phone_number,
|
||||
shipping_address: order.shipping_address,
|
||||
ref_code: order.ref_code
|
||||
};
|
||||
|
||||
const response = await nativePay(orderData);
|
||||
setCodeUrl(response.data.code_url);
|
||||
if (response.data.order_id) {
|
||||
setCurrentOrderId(response.data.order_id);
|
||||
}
|
||||
message.success('支付二维码已生成');
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error('生成支付二维码失败，请重试');
|
||||
setPaying(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <div style={{ padding: 50, textAlign: 'center' }}><Spin size="large" /><div style={{ marginTop: 20 }}>正在加载订单信息...</div></div>;
|
||||
|
||||
if (paySuccess) {
|
||||
return (
|
||||
<div className="payment-container" style={{ borderColor: '#1890ff' }}>
|
||||
<Result
|
||||
status="success"
|
||||
icon={<CheckCircleOutlined style={{ color: '#1890ff' }} />}
|
||||
title={<span style={{ color: '#fff' }}>支付成功</span>}
|
||||
subTitle={<span style={{ color: '#888' }}>订单 {currentOrderId} 已完成支付，我们将尽快为您发货。</span>}
|
||||
extra={[
|
||||
<Button type="primary" key="home" onClick={() => navigate('/')}>
|
||||
返回首页
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="payment-container">
|
||||
<div className="payment-title">收银台</div>
|
||||
|
||||
{order ? (
|
||||
<>
|
||||
<div className="payment-amount">¥{order.total_price}</div>
|
||||
<div className="payment-info">
|
||||
<p><strong>订单编号：</strong> {order.id}</p>
|
||||
<p><strong>商品名称：</strong> {order.config_name || 'AI 硬件设备'}</p>
|
||||
<p><strong>收货人：</strong> {order.customer_name}</p>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="payment-info">
|
||||
<p>订单 ID: {currentOrderId}</p>
|
||||
<p>无法加载详情，但您可以尝试支付。</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ color: '#fff', marginBottom: 15, textAlign: 'left' }}>选择支付方式：</div>
|
||||
<div className="payment-method">
|
||||
<div
|
||||
className={`payment-method-item ${paymentMethod === 'wechat' ? 'active' : ''}`}
|
||||
onClick={() => setPaymentMethod('wechat')}
|
||||
>
|
||||
<WechatOutlined style={{ color: '#09BB07', fontSize: 24, verticalAlign: 'middle', marginRight: 8 }} />
|
||||
微信支付
|
||||
</div>
|
||||
<div
|
||||
className={`payment-method-item ${paymentMethod === 'alipay' ? 'active' : ''}`}
|
||||
onClick={() => setPaymentMethod('alipay')}
|
||||
>
|
||||
<AlipayCircleOutlined style={{ color: '#1677FF', fontSize: 24, verticalAlign: 'middle', marginRight: 8 }} />
|
||||
支付宝
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{paying && (
|
||||
<div style={{ margin: '20px 0', padding: 20, background: '#fff', borderRadius: 8, display: 'inline-block', minWidth: 240, minHeight: 280 }}>
|
||||
{codeUrl ? (
|
||||
<>
|
||||
<div style={{ background: '#fff', padding: '10px', borderRadius: '4px', display: 'inline-block' }}>
|
||||
<QRCodeSVG value={codeUrl} size={200} />
|
||||
</div>
|
||||
<p style={{ color: '#000', marginTop: 15, fontWeight: 'bold', fontSize: 18 }}>请使用微信扫码支付</p>
|
||||
<p style={{ color: '#666', fontSize: 14 }}>支付完成后将自动跳转</p>
|
||||
</>
|
||||
) : (
|
||||
<div style={{ padding: '40px 0', textAlign: 'center' }}>
|
||||
<Spin />
|
||||
<div style={{ marginTop: 10 }}>正在生成支付二维码...</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!paying && (
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
block
|
||||
onClick={handlePay}
|
||||
style={{ height: 50, fontSize: 18, background: paymentMethod === 'wechat' ? '#09BB07' : '#1677FF' }}
|
||||
>
|
||||
立即支付
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Payment;
|
||||
33
frontend/src/pages/ProductDetail.css
Normal file
33
frontend/src/pages/ProductDetail.css
Normal file
@@ -0,0 +1,33 @@
|
||||
.product-detail-container {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.feature-section {
|
||||
padding: 60px 0;
|
||||
border-bottom: 1px solid #303030;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
color: #00b96b;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 18px;
|
||||
color: #888;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.spec-tag {
|
||||
background: rgba(24, 144, 255, 0.1);
|
||||
border: 1px solid #1890ff;
|
||||
color: #1890ff;
|
||||
padding: 5px 15px;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
327
frontend/src/pages/ProductDetail.jsx
Normal file
327
frontend/src/pages/ProductDetail.jsx
Normal file
@@ -0,0 +1,327 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import { Button, Row, Col, Tag, Statistic, Modal, Form, Input, InputNumber, message, Spin, Descriptions, Radio, Alert } from 'antd';
|
||||
import { ShoppingCartOutlined, SafetyCertificateOutlined, ThunderboltOutlined, EyeOutlined, StarOutlined } from '@ant-design/icons';
|
||||
import { getConfigs, createOrder, nativePay } from '../api';
|
||||
import ModelViewer from '../components/ModelViewer';
|
||||
import LoginModal from '../components/LoginModal';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import './ProductDetail.css';
|
||||
|
||||
const ProductDetail = () => {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
const [product, setProduct] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [loginVisible, setLoginVisible] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const { user, login } = useAuth();
|
||||
|
||||
// 优先从 URL 获取，如果没有则从 localStorage 获取，不再默认绑定 flw666
|
||||
const refCode = searchParams.get('ref') || localStorage.getItem('ref_code');
|
||||
|
||||
useEffect(() => {
|
||||
// 自动填充用户信息
|
||||
if (user) {
|
||||
form.setFieldsValue({
|
||||
phone_number: user.phone_number,
|
||||
// 如果后端返回了地址信息，这里也可以填充
|
||||
// shipping_address: user.shipping_address
|
||||
});
|
||||
}
|
||||
}, [isModalOpen, user]); // 当弹窗打开或用户状态变化时填充
|
||||
|
||||
useEffect(() => {
|
||||
console.log('[ProductDetail] Current ref_code:', refCode);
|
||||
}, [refCode]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchProduct();
|
||||
}, [id]);
|
||||
|
||||
const fetchProduct = async () => {
|
||||
try {
|
||||
const response = await getConfigs();
|
||||
const found = response.data.find(p => String(p.id) === id);
|
||||
if (found) {
|
||||
setProduct(found);
|
||||
} else {
|
||||
message.error('未找到该产品');
|
||||
navigate('/');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch product:', error);
|
||||
message.error('加载失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBuy = async (values) => {
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const isPickup = values.delivery_method === 'pickup';
|
||||
const orderData = {
|
||||
goodid: product.id,
|
||||
quantity: values.quantity,
|
||||
customer_name: values.customer_name,
|
||||
phone_number: values.phone_number,
|
||||
// 如果是自提，手动设置地址，否则使用表单中的地址
|
||||
shipping_address: isPickup ? '线下自提' : values.shipping_address,
|
||||
ref_code: refCode
|
||||
};
|
||||
|
||||
console.log('提交订单数据:', orderData); // 调试日志
|
||||
const response = await nativePay(orderData);
|
||||
message.success('订单已创建，请完成支付');
|
||||
navigate(`/payment/${response.data.order_id}`, {
|
||||
state: {
|
||||
codeUrl: response.data.code_url,
|
||||
order_id: response.data.order_id,
|
||||
orderInfo: {
|
||||
...orderData,
|
||||
id: response.data.order_id,
|
||||
config_name: product.name,
|
||||
total_price: product.price * values.quantity
|
||||
}
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error('创建订单失败，请检查填写信息');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getModelPaths = (p) => {
|
||||
if (!p) return null;
|
||||
|
||||
// 优先使用后台配置的 3D 模型 URL
|
||||
if (p.model_3d_url) {
|
||||
return { obj: p.model_3d_url };
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const modelPaths = getModelPaths(product);
|
||||
|
||||
const renderIcon = (feature) => {
|
||||
if (feature.display_icon) {
|
||||
return <img src={feature.display_icon} alt={feature.title} style={{ width: 60, height: 60, objectFit: 'contain', marginBottom: 20 }} />;
|
||||
}
|
||||
|
||||
const iconProps = { style: { fontSize: 60, color: '#00b96b', marginBottom: 20 } };
|
||||
|
||||
switch(feature.icon_name) {
|
||||
case 'SafetyCertificate':
|
||||
return <SafetyCertificateOutlined {...iconProps} />;
|
||||
case 'Eye':
|
||||
return <EyeOutlined {...iconProps} style={{ ...iconProps.style, color: '#1890ff' }} />;
|
||||
case 'Thunderbolt':
|
||||
return <ThunderboltOutlined {...iconProps} style={{ ...iconProps.style, color: '#faad14' }} />;
|
||||
default:
|
||||
return <StarOutlined {...iconProps} />;
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <div style={{ padding: 50, textAlign: 'center' }}><Spin size="large" /></div>;
|
||||
if (!product) return null;
|
||||
|
||||
return (
|
||||
<div className="product-detail-container" style={{ paddingBottom: '60px' }}>
|
||||
{/* Hero Section */}
|
||||
<Row gutter={40} align="middle" style={{ minHeight: '60vh' }}>
|
||||
<Col xs={24} md={12}>
|
||||
<div style={{
|
||||
height: 400,
|
||||
background: 'radial-gradient(circle, #2a2a2a 0%, #000 100%)',
|
||||
borderRadius: 20,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
border: '1px solid #333',
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
{modelPaths ? (
|
||||
<ModelViewer objPath={modelPaths.obj} mtlPath={modelPaths.mtl} />
|
||||
) : product.static_image_url ? (
|
||||
<img src={product.static_image_url} alt={product.name} style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} />
|
||||
) : (
|
||||
<ThunderboltOutlined style={{ fontSize: 120, color: '#1890ff' }} />
|
||||
)}
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={24} md={12}>
|
||||
<h1 style={{ fontSize: 48, fontWeight: 'bold', color: '#fff' }}>{product.name}</h1>
|
||||
<p style={{ fontSize: 20, color: '#888', margin: '20px 0' }}>{product.description}</p>
|
||||
|
||||
<div style={{ marginBottom: 30, display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
|
||||
<Tag color="cyan" style={{ background: 'rgba(0,255,255,0.1)', border: '1px solid cyan', padding: '4px 12px', fontSize: '14px', margin: 0 }}>{product.chip_type}</Tag>
|
||||
{product.has_camera && <Tag color="blue" style={{ background: 'rgba(0,0,255,0.1)', border: '1px solid blue', padding: '4px 12px', fontSize: '14px', margin: 0 }}>高清摄像头</Tag>}
|
||||
{product.has_microphone && <Tag color="purple" style={{ background: 'rgba(114,46,209,0.1)', border: '1px solid #722ed1', padding: '4px 12px', fontSize: '14px', margin: 0 }}>阵列麦克风</Tag>}
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'flex-end', gap: 20, marginBottom: 20 }}>
|
||||
<Statistic title="售价" value={product.price} prefix="¥" valueStyle={{ color: '#00b96b', fontSize: 36 }} titleStyle={{ color: '#888' }} />
|
||||
<Statistic title="库存" value={product.stock} suffix="件" valueStyle={{ color: product.stock < 5 ? '#ff4d4f' : '#fff', fontSize: 20 }} titleStyle={{ color: '#888' }} />
|
||||
</div>
|
||||
|
||||
{product.stock < 5 && product.stock > 0 && (
|
||||
<Alert message={`库存紧张，仅剩 ${product.stock} 件！`} type="warning" showIcon style={{ marginBottom: 20, background: 'rgba(250, 173, 20, 0.1)', border: '1px solid #faad14', color: '#faad14' }} />
|
||||
)}
|
||||
|
||||
{product.stock === 0 && (
|
||||
<Alert message="该商品暂时缺货" type="error" showIcon style={{ marginBottom: 20 }} />
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
icon={<ShoppingCartOutlined />}
|
||||
onClick={() => {
|
||||
if (!user) {
|
||||
setLoginVisible(true);
|
||||
} else {
|
||||
setIsModalOpen(true);
|
||||
}
|
||||
}}
|
||||
disabled={product.stock === 0}
|
||||
style={{ height: 50, padding: '0 40px', fontSize: 18 }}
|
||||
>
|
||||
{product.stock === 0 ? '暂时缺货' : '立即购买'}
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* Feature Section */}
|
||||
<div style={{ marginTop: 100 }}>
|
||||
{product.features && product.features.length > 0 ? (
|
||||
product.features.map((feature, index) => (
|
||||
<div className="feature-section" key={index}>
|
||||
{renderIcon(feature)}
|
||||
<div className="feature-title">{feature.title}</div>
|
||||
<div className="feature-desc">{feature.description}</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
// Fallback content if no features are configured
|
||||
<>
|
||||
<div className="feature-section">
|
||||
<SafetyCertificateOutlined style={{ fontSize: 60, color: '#00b96b', marginBottom: 20 }} />
|
||||
<div className="feature-title">工业级安全标准</div>
|
||||
<div className="feature-desc">
|
||||
采用军工级加密芯片，保障您的数据隐私安全。无论是边缘计算还是云端同步，全程加密传输，让 AI 应用无后顾之忧。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="feature-section">
|
||||
<EyeOutlined style={{ fontSize: 60, color: '#1890ff', marginBottom: 20 }} />
|
||||
<div className="feature-title">超清视觉感知</div>
|
||||
<div className="feature-desc">
|
||||
搭载 4K 高清摄像头与 AI 视觉算法，实时捕捉每一个细节。支持人脸识别、物体检测、姿态分析等多种视觉任务。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="feature-section">
|
||||
<ThunderboltOutlined style={{ fontSize: 60, color: '#faad14', marginBottom: 20 }} />
|
||||
<div className="feature-title">极致性能释放</div>
|
||||
<div className="feature-desc">
|
||||
{product.chip_type} 强劲核心，提供高达 XX TOPS 的算力支持。低功耗设计，满足 24 小时全天候运行需求。
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{product.display_detail_image ? (
|
||||
<div style={{
|
||||
margin: '60px auto',
|
||||
maxWidth: '900px',
|
||||
width: '100%',
|
||||
overflow: 'hidden',
|
||||
borderRadius: 12,
|
||||
boxShadow: '0 10px 40px rgba(0,0,0,0.5)'
|
||||
}}>
|
||||
<img src={product.display_detail_image} alt="产品详情" style={{ width: '100%', display: 'block', height: 'auto' }} />
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ margin: '60px 0', height: 800, background: '#111', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#333', fontSize: 24, border: '1px dashed #333' }}>
|
||||
产品详情长图展示区域 (请在后台配置)
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Login Modal */}
|
||||
<LoginModal
|
||||
visible={loginVisible}
|
||||
onClose={() => setLoginVisible(false)}
|
||||
onLoginSuccess={(userData) => {
|
||||
login(userData);
|
||||
setLoginVisible(false);
|
||||
setIsModalOpen(true);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Order Modal */}
|
||||
<Modal
|
||||
title="填写收货信息"
|
||||
open={isModalOpen}
|
||||
onCancel={() => setIsModalOpen(false)}
|
||||
footer={null}
|
||||
destroyOnHidden
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleBuy}
|
||||
initialValues={{ quantity: 1, delivery_method: 'shipping' }}
|
||||
>
|
||||
<Form.Item label="配送方式" name="delivery_method">
|
||||
<Radio.Group buttonStyle="solid">
|
||||
<Radio.Button value="shipping">快递配送</Radio.Button>
|
||||
<Radio.Button value="pickup">线下自提</Radio.Button>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item label="购买数量" name="quantity" rules={[{ required: true }]}>
|
||||
<InputNumber min={1} max={100} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item label="收货人姓名" name="customer_name" rules={[{ required: true, message: '请输入姓名' }]}>
|
||||
<Input placeholder="张三" />
|
||||
</Form.Item>
|
||||
<Form.Item label="联系电话" name="phone_number" rules={[{ required: true, message: '请输入电话' }]}>
|
||||
<Input placeholder="13800000000" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
noStyle
|
||||
shouldUpdate={(prevValues, currentValues) => prevValues.delivery_method !== currentValues.delivery_method}
|
||||
>
|
||||
{({ getFieldValue }) =>
|
||||
getFieldValue('delivery_method') === 'shipping' ? (
|
||||
<Form.Item label="收货地址" name="shipping_address" rules={[{ required: true, message: '请输入地址' }]}>
|
||||
<Input.TextArea rows={3} placeholder="北京市..." />
|
||||
</Form.Item>
|
||||
) : (
|
||||
<div style={{ marginBottom: 24, padding: '12px', background: '#f5f5f5', borderRadius: '4px', border: '1px solid #d9d9d9' }}>
|
||||
<p style={{ margin: 0, color: '#666' }}>自提地址：昆明市云纺国际商厦B座1406</p>
|
||||
<p style={{ margin: 0, fontSize: '12px', color: '#999' }}>请在工作日 9:00 - 18:00 期间前往提货</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</Form.Item>
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, marginTop: 20 }}>
|
||||
<Button onClick={() => setIsModalOpen(false)}>取消</Button>
|
||||
<Button type="primary" htmlType="submit" loading={submitting}>提交订单</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductDetail;
|
||||
283
frontend/src/pages/ServiceDetail.jsx
Normal file
283
frontend/src/pages/ServiceDetail.jsx
Normal file
@@ -0,0 +1,283 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useParams, useNavigate, useSearchParams, useLocation } from 'react-router-dom';
|
||||
import { Typography, Button, Spin, Empty, Descriptions, Tag, Row, Col, Modal, Form, Input, message, Statistic } from 'antd';
|
||||
import { ArrowLeftOutlined, ClockCircleOutlined, GiftOutlined, ShoppingCartOutlined } from '@ant-design/icons';
|
||||
import { getServiceDetail, createServiceOrder } from '../api';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const { Title, Paragraph } = Typography;
|
||||
|
||||
const ServiceDetail = () => {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [searchParams] = useSearchParams();
|
||||
const { user, showLoginModal } = useAuth();
|
||||
const [service, setService] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
// 优先从 URL 获取，如果没有则从 localStorage 获取
|
||||
const refCode = searchParams.get('ref') || localStorage.getItem('ref_code');
|
||||
|
||||
useEffect(() => {
|
||||
console.log('[ServiceDetail] Current ref_code:', refCode);
|
||||
}, [refCode]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchDetail = async () => {
|
||||
try {
|
||||
const response = await getServiceDetail(id);
|
||||
setService(response.data);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch service detail:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchDetail();
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isModalOpen && user && user.phone_number) {
|
||||
form.setFieldsValue({
|
||||
phone_number: user.phone_number
|
||||
});
|
||||
}
|
||||
}, [isModalOpen, user, form]);
|
||||
|
||||
const handlePurchase = async (values) => {
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const orderData = {
|
||||
service: service.id,
|
||||
customer_name: values.customer_name,
|
||||
company_name: values.company_name,
|
||||
phone_number: values.phone_number,
|
||||
email: values.email,
|
||||
requirements: values.requirements,
|
||||
ref_code: refCode
|
||||
};
|
||||
await createServiceOrder(orderData);
|
||||
message.success('需求已提交，我们的销售顾问将尽快与您联系！');
|
||||
setIsModalOpen(false);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error('提交失败，请重试');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ textAlign: 'center', padding: '100px 0' }}>
|
||||
<Spin size="large" />
|
||||
<div style={{ marginTop: 20 }}>Loading...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!service) {
|
||||
return (
|
||||
<div style={{ textAlign: 'center', padding: '100px 0' }}>
|
||||
<Empty description="Service not found" />
|
||||
<Button type="primary" onClick={() => navigate('/services')} style={{ marginTop: 20 }}>
|
||||
Return to Services
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ padding: '20px 0' }}>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<ArrowLeftOutlined />}
|
||||
style={{ color: '#fff', marginBottom: 20 }}
|
||||
onClick={() => navigate('/services')}
|
||||
>
|
||||
返回服务列表
|
||||
</Button>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<Row gutter={[40, 40]}>
|
||||
<Col xs={24} md={16}>
|
||||
<div style={{ textAlign: 'left', marginBottom: 40 }}>
|
||||
<Title level={1} style={{ color: '#fff' }}>
|
||||
{service.title}
|
||||
</Title>
|
||||
<Paragraph style={{ color: '#888', fontSize: 18 }}>
|
||||
{service.description}
|
||||
</Paragraph>
|
||||
|
||||
<div style={{
|
||||
marginTop: 30,
|
||||
background: 'rgba(255,255,255,0.03)',
|
||||
padding: '24px',
|
||||
borderRadius: 16,
|
||||
border: '1px solid rgba(255,255,255,0.08)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
boxShadow: '0 8px 32px rgba(0,0,0,0.2)'
|
||||
}}>
|
||||
<Title level={4} style={{ color: '#fff', marginBottom: 20, display: 'flex', alignItems: 'center' }}>
|
||||
<div style={{ width: 4, height: 18, background: service.color, marginRight: 10, borderRadius: 2 }} />
|
||||
服务详情
|
||||
</Title>
|
||||
<Descriptions
|
||||
column={1}
|
||||
labelStyle={{ color: '#888', fontWeight: 'normal' }}
|
||||
contentStyle={{ color: '#fff', fontWeight: '500' }}
|
||||
>
|
||||
<Descriptions.Item label={<span style={{ display: 'flex', alignItems: 'center' }}><ClockCircleOutlined style={{ marginRight: 8, color: service.color }} /> 交付周期</span>}>
|
||||
{service.delivery_time || '待沟通'}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={<span style={{ display: 'flex', alignItems: 'center' }}><GiftOutlined style={{ marginRight: 8, color: service.color }} /> 交付内容</span>}>
|
||||
{service.delivery_content || '根据需求定制'}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{service.display_detail_image ? (
|
||||
<div style={{
|
||||
width: '100%',
|
||||
maxWidth: '900px',
|
||||
margin: '0 auto',
|
||||
background: '#111',
|
||||
borderRadius: 12,
|
||||
overflow: 'hidden',
|
||||
boxShadow: `0 10px 40px ${service.color}22`,
|
||||
border: `1px solid ${service.color}33`
|
||||
}}>
|
||||
<img
|
||||
src={service.display_detail_image}
|
||||
alt={service.title}
|
||||
style={{ width: '100%', display: 'block', height: 'auto' }}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ textAlign: 'center', padding: 100, background: '#111', borderRadius: 12, color: '#666' }}>
|
||||
暂无详情图片
|
||||
</div>
|
||||
)}
|
||||
</Col>
|
||||
|
||||
<Col xs={24} md={8}>
|
||||
<div style={{ position: 'sticky', top: 100 }}>
|
||||
<div style={{
|
||||
background: '#1f1f1f',
|
||||
padding: 30,
|
||||
borderRadius: 16,
|
||||
border: `1px solid ${service.color}44`,
|
||||
boxShadow: `0 0 20px ${service.color}11`
|
||||
}}>
|
||||
<Title level={3} style={{ color: '#fff', marginTop: 0 }}>服务报价</Title>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', marginBottom: 20 }}>
|
||||
<span style={{ fontSize: 36, color: service.color, fontWeight: 'bold' }}>¥{service.price}</span>
|
||||
<span style={{ color: '#888', marginLeft: 8 }}>/ {service.unit} 起</span>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 25, display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
|
||||
{service.features_list && service.features_list.map((feat, i) => (
|
||||
<Tag
|
||||
key={i}
|
||||
style={{
|
||||
margin: 0,
|
||||
padding: '4px 12px',
|
||||
background: `${service.color}11`,
|
||||
color: service.color,
|
||||
border: `1px solid ${service.color}66`,
|
||||
borderRadius: '6px',
|
||||
fontSize: '14px',
|
||||
backdropFilter: 'blur(4px)',
|
||||
whiteSpace: 'normal',
|
||||
height: 'auto',
|
||||
textAlign: 'left'
|
||||
}}
|
||||
>
|
||||
{feat}
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
block
|
||||
icon={<ShoppingCartOutlined />}
|
||||
style={{
|
||||
height: 50,
|
||||
background: service.color,
|
||||
borderColor: service.color,
|
||||
color: '#000',
|
||||
fontWeight: 'bold'
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!user) {
|
||||
message.info('请先登录后再进行咨询');
|
||||
showLoginModal();
|
||||
return;
|
||||
}
|
||||
setIsModalOpen(true);
|
||||
}}
|
||||
>
|
||||
立即咨询 / 购买
|
||||
</Button>
|
||||
<p style={{ color: '#666', marginTop: 15, fontSize: 12, textAlign: 'center' }}>
|
||||
* 具体价格可能因需求复杂度而异，提交需求后我们将提供详细报价单
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</motion.div>
|
||||
|
||||
{/* Purchase Modal */}
|
||||
<Modal
|
||||
title={`咨询/购买 - ${service.title}`}
|
||||
open={isModalOpen}
|
||||
onCancel={() => setIsModalOpen(false)}
|
||||
footer={null}
|
||||
destroyOnHidden
|
||||
>
|
||||
<p style={{ marginBottom: 20, color: '#666' }}>请填写您的联系方式和需求，我们的技术顾问将在 24 小时内与您联系。</p>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handlePurchase}
|
||||
>
|
||||
<Form.Item label="您的姓名" name="customer_name" rules={[{ required: true, message: '请输入姓名' }]}>
|
||||
<Input placeholder="例如：张经理" />
|
||||
</Form.Item>
|
||||
<Form.Item label="公司/机构名称" name="company_name">
|
||||
<Input placeholder="例如：某某科技有限公司" />
|
||||
</Form.Item>
|
||||
<Form.Item label="联系电话" name="phone_number" rules={[{ required: true, message: '请输入电话' }]}>
|
||||
<Input placeholder="13800000000" />
|
||||
</Form.Item>
|
||||
<Form.Item label="电子邮箱" name="email" rules={[{ type: 'email' }]}>
|
||||
<Input placeholder="example@company.com" />
|
||||
</Form.Item>
|
||||
<Form.Item label="需求描述" name="requirements">
|
||||
<Input.TextArea rows={4} placeholder="请简单描述您的业务场景或具体需求..." />
|
||||
</Form.Item>
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, marginTop: 20 }}>
|
||||
<Button onClick={() => setIsModalOpen(false)}>取消</Button>
|
||||
<Button type="primary" htmlType="submit" loading={submitting}>提交需求</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServiceDetail;
|
||||
553
frontend/src/pages/VCCourseDetail.jsx
Normal file
553
frontend/src/pages/VCCourseDetail.jsx
Normal file
@@ -0,0 +1,553 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useParams, useNavigate, useSearchParams, useLocation } from 'react-router-dom';
|
||||
import { Typography, Button, Spin, Empty, Descriptions, Tag, Row, Col, Modal, Form, Input, message } from 'antd';
|
||||
import { ArrowLeftOutlined, ClockCircleOutlined, UserOutlined, BookOutlined, FormOutlined, CalendarOutlined, PlayCircleOutlined, LockOutlined } from '@ant-design/icons';
|
||||
import { getVCCourseDetail, createOrder, nativePay, queryOrderStatus } from '../api';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import { QRCodeSVG } from 'qrcode.react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import remarkMath from 'remark-math';
|
||||
import rehypeKatex from 'rehype-katex';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import rehypeRaw from 'rehype-raw';
|
||||
import 'katex/dist/katex.min.css';
|
||||
import styles from './VCCourseDetail.module.less';
|
||||
import CodeBlock from '../components/CodeBlock';
|
||||
|
||||
const { Title, Paragraph } = Typography;
|
||||
|
||||
const VCCourseDetail = () => {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [searchParams] = useSearchParams();
|
||||
const { user, showLoginModal } = useAuth();
|
||||
const [course, setCourse] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
// Payment states
|
||||
const [payMode, setPayMode] = useState(false);
|
||||
const [qrCodeUrl, setQrCodeUrl] = useState(null);
|
||||
const [currentOrderId, setCurrentOrderId] = useState(null);
|
||||
const [paySuccess, setPaySuccess] = useState(false);
|
||||
|
||||
// 优先从 URL 获取，如果没有则从 localStorage 获取
|
||||
const refCode = searchParams.get('ref') || localStorage.getItem('ref_code');
|
||||
|
||||
const markdownComponents = {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
code({node, inline, className, children, ...props}) {
|
||||
const match = /language-(\w+)/.exec(className || '')
|
||||
return !inline && match ? (
|
||||
<CodeBlock
|
||||
language={match[1]}
|
||||
{...props}
|
||||
>
|
||||
{String(children).replace(/\n$/, '')}
|
||||
</CodeBlock>
|
||||
) : (
|
||||
<code className={className} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
)
|
||||
},
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
img({node, ...props}) {
|
||||
return (
|
||||
<img
|
||||
{...props}
|
||||
style={{ maxHeight: 400, borderRadius: 8, maxWidth: '100%', margin: '10px 0' }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchDetail = async () => {
|
||||
try {
|
||||
const response = await getVCCourseDetail(id);
|
||||
console.log('Course detail:', response.data);
|
||||
setCourse(response.data);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch course detail:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchDetail();
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isModalOpen) {
|
||||
// Reset payment state when modal opens
|
||||
setPayMode(false);
|
||||
setQrCodeUrl(null);
|
||||
setCurrentOrderId(null);
|
||||
setPaySuccess(false);
|
||||
|
||||
if (user && user.phone_number) {
|
||||
form.setFieldsValue({
|
||||
phone_number: user.phone_number
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [isModalOpen, user, form]);
|
||||
|
||||
// Polling for payment status
|
||||
useEffect(() => {
|
||||
let timer;
|
||||
if (payMode && !paySuccess && currentOrderId) {
|
||||
timer = setInterval(async () => {
|
||||
try {
|
||||
const response = await queryOrderStatus(currentOrderId);
|
||||
if (response.data.status === 'paid') {
|
||||
setPaySuccess(true);
|
||||
message.success('支付成功！报名已完成。');
|
||||
setTimeout(() => {
|
||||
setIsModalOpen(false);
|
||||
// 刷新课程详情以获取解锁后的视频URL
|
||||
const fetchDetail = async () => {
|
||||
try {
|
||||
const res = await getVCCourseDetail(id);
|
||||
setCourse(res.data);
|
||||
} catch (error) {
|
||||
console.error("Failed to refresh course detail:", error);
|
||||
}
|
||||
};
|
||||
fetchDetail();
|
||||
}, 2000); // Wait 2 seconds before closing
|
||||
clearInterval(timer);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Check payment status failed:', error);
|
||||
}
|
||||
}, 3000);
|
||||
}
|
||||
return () => clearInterval(timer);
|
||||
}, [payMode, paySuccess, currentOrderId, id]);
|
||||
|
||||
const handleEnroll = async (values) => {
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const isFree = course.price === 0 || parseFloat(course.price) === 0;
|
||||
|
||||
if (isFree) {
|
||||
const orderData = {
|
||||
course: course.id,
|
||||
customer_name: values.customer_name,
|
||||
phone_number: values.phone_number,
|
||||
ref_code: refCode || "",
|
||||
quantity: 1,
|
||||
// 将其他信息放入收货地址字段中
|
||||
shipping_address: `[课程报名] 微信号: ${values.wechat_id || '无'}, 邮箱: ${values.email || '无'}, 备注: ${values.message || '无'}`
|
||||
};
|
||||
|
||||
await createOrder(orderData);
|
||||
message.success('报名成功！您已成功加入课程。');
|
||||
setIsModalOpen(false);
|
||||
} else {
|
||||
// Paid course - use nativePay to generate QR code
|
||||
const orderData = {
|
||||
goodid: course.id,
|
||||
type: 'course',
|
||||
quantity: 1,
|
||||
customer_name: values.customer_name,
|
||||
phone_number: values.phone_number,
|
||||
ref_code: refCode || "",
|
||||
shipping_address: `[课程报名] 微信号: ${values.wechat_id || '无'}, 邮箱: ${values.email || '无'}, 备注: ${values.message || '无'}`
|
||||
};
|
||||
|
||||
const response = await nativePay(orderData);
|
||||
if (response.data && response.data.code_url) {
|
||||
setQrCodeUrl(response.data.code_url);
|
||||
setCurrentOrderId(response.data.order_id);
|
||||
setPayMode(true);
|
||||
message.success('订单创建成功，请扫码支付');
|
||||
} else {
|
||||
throw new Error('Failed to generate payment QR code');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error('提交失败，请重试');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ textAlign: 'center', padding: '100px 0' }}>
|
||||
<Spin size="large" />
|
||||
<div style={{ marginTop: 20 }}>Loading...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!course) {
|
||||
return (
|
||||
<div style={{ textAlign: 'center', padding: '100px 0' }}>
|
||||
<Empty description="Course not found" />
|
||||
<Button type="primary" onClick={() => navigate('/courses')} style={{ marginTop: 20 }}>
|
||||
Return to Courses
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ padding: '20px 0', minHeight: '80vh' }}>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<ArrowLeftOutlined />}
|
||||
style={{ color: '#fff', marginBottom: 20 }}
|
||||
onClick={() => navigate('/courses')}
|
||||
>
|
||||
返回课程列表
|
||||
</Button>
|
||||
|
||||
<div>
|
||||
<Row gutter={[40, 40]}>
|
||||
<Col xs={24} md={16}>
|
||||
<div style={{ textAlign: 'left', marginBottom: 40 }}>
|
||||
<div style={{ display: 'flex', gap: '10px', marginBottom: 10 }}>
|
||||
{course.tag && <Tag color="volcano">{course.tag}</Tag>}
|
||||
<Tag color={course.course_type === 'hardware' ? 'purple' : 'cyan'}>
|
||||
{course.course_type_display || (course.course_type === 'hardware' ? '硬件课程' : '软件课程')}
|
||||
</Tag>
|
||||
</div>
|
||||
<Title level={1} style={{ color: '#fff', marginTop: 0 }}>
|
||||
{course.title}
|
||||
</Title>
|
||||
<Paragraph style={{ color: '#888', fontSize: 18 }}>
|
||||
{course.description}
|
||||
</Paragraph>
|
||||
|
||||
{/* 视频课程播放区域 */}
|
||||
{course.is_video_course && (
|
||||
<div style={{
|
||||
margin: '30px 0',
|
||||
background: '#000',
|
||||
borderRadius: 16,
|
||||
overflow: 'hidden',
|
||||
border: '1px solid rgba(0, 240, 255, 0.2)',
|
||||
boxShadow: '0 8px 32px rgba(0,0,0,0.3)',
|
||||
position: 'relative',
|
||||
aspectRatio: '16/9'
|
||||
}}>
|
||||
{course.video_embed_code ? (
|
||||
<div
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
dangerouslySetInnerHTML={{ __html: course.video_embed_code }}
|
||||
/>
|
||||
) : course.video_url ? (
|
||||
<video
|
||||
src={course.video_url}
|
||||
controls
|
||||
style={{ width: '100%', height: '100%', objectFit: 'contain' }}
|
||||
poster={course.cover_image_url}
|
||||
>
|
||||
您的浏览器不支持视频播放。
|
||||
</video>
|
||||
) : (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '100%',
|
||||
color: '#fff',
|
||||
background: `linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(${course.cover_image_url}) no-repeat center/cover`
|
||||
}}>
|
||||
<LockOutlined style={{ fontSize: 48, color: '#00f0ff', marginBottom: 20 }} />
|
||||
<Title level={4} style={{ color: '#fff', marginBottom: 10 }}>课程视频内容已锁定</Title>
|
||||
<p style={{ color: '#ccc', fontSize: 16 }}>
|
||||
请购买或报名该课程以解锁完整视频内容
|
||||
</p>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlayCircleOutlined />}
|
||||
size="large"
|
||||
style={{
|
||||
marginTop: 20,
|
||||
background: '#00f0ff',
|
||||
borderColor: '#00f0ff',
|
||||
color: '#000',
|
||||
fontWeight: 'bold'
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!user) {
|
||||
message.info('请先登录后再进行报名或购买');
|
||||
showLoginModal();
|
||||
return;
|
||||
}
|
||||
setIsModalOpen(true);
|
||||
}}
|
||||
>
|
||||
立即解锁观看
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{
|
||||
marginTop: 30,
|
||||
background: 'rgba(255,255,255,0.03)',
|
||||
padding: '24px',
|
||||
borderRadius: 16,
|
||||
border: '1px solid rgba(255,255,255,0.08)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
boxShadow: '0 8px 32px rgba(0,0,0,0.2)'
|
||||
}}>
|
||||
<Title level={4} style={{ color: '#fff', marginBottom: 20, display: 'flex', alignItems: 'center' }}>
|
||||
<div style={{ width: 4, height: 18, background: '#00f0ff', marginRight: 10, borderRadius: 2 }} />
|
||||
课程信息
|
||||
</Title>
|
||||
<Descriptions
|
||||
column={{ xs: 1, sm: 2, md: 3 }}
|
||||
labelStyle={{ color: '#888', fontWeight: 'normal' }}
|
||||
contentStyle={{ color: '#fff', fontWeight: '500' }}
|
||||
>
|
||||
<Descriptions.Item label={<span style={{ display: 'flex', alignItems: 'center' }}><UserOutlined style={{ marginRight: 8, color: '#00f0ff' }} /> 讲师</span>}>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
{course.instructor_avatar_url && (
|
||||
<img src={course.instructor_avatar_url} alt="avatar" style={{ width: 24, height: 24, borderRadius: '50%', marginRight: 8, objectFit: 'cover' }} />
|
||||
)}
|
||||
<span>{course.instructor}</span>
|
||||
{course.instructor_title && (
|
||||
<span style={{
|
||||
fontSize: 12,
|
||||
background: 'rgba(0, 240, 255, 0.1)',
|
||||
color: '#00f0ff',
|
||||
padding: '2px 6px',
|
||||
borderRadius: 4,
|
||||
marginLeft: 8
|
||||
}}>
|
||||
{course.instructor_title}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={<span style={{ display: 'flex', alignItems: 'center' }}><ClockCircleOutlined style={{ marginRight: 8, color: '#00f0ff' }} /> 时长</span>}>
|
||||
{course.duration}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={<span style={{ display: 'flex', alignItems: 'center' }}><BookOutlined style={{ marginRight: 8, color: '#00f0ff' }} /> 课时</span>}>
|
||||
{course.lesson_count} 课时
|
||||
</Descriptions.Item>
|
||||
{course.is_fixed_schedule && (course.start_time || course.end_time) && (
|
||||
<Descriptions.Item span={3} label={<span style={{ display: 'flex', alignItems: 'center' }}><CalendarOutlined style={{ marginRight: 8, color: '#00f0ff' }} /> 开课时间</span>}>
|
||||
<div style={{ display: 'flex', gap: '30px', alignItems: 'center', flexWrap: 'wrap' }}>
|
||||
{course.start_time && (
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<span style={{ fontSize: 12, color: '#888', marginBottom: 2 }}>开始时间</span>
|
||||
<span style={{ fontSize: 16, color: '#fff', fontFamily: 'DIN Alternate, Consolas, monospace', letterSpacing: 1 }}>
|
||||
{new Date(course.start_time).toLocaleString('zh-CN', {year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit'})}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{course.start_time && course.end_time && (
|
||||
<div style={{ width: 30, height: 1, background: '#333' }} />
|
||||
)}
|
||||
{course.end_time && (
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<span style={{ fontSize: 12, color: '#888', marginBottom: 2 }}>结束时间</span>
|
||||
<span style={{ fontSize: 16, color: '#fff', fontFamily: 'DIN Alternate, Consolas, monospace', letterSpacing: 1 }}>
|
||||
{new Date(course.end_time).toLocaleString('zh-CN', {year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit'})}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Descriptions.Item>
|
||||
)}
|
||||
</Descriptions>
|
||||
|
||||
{/* 讲师简介 */}
|
||||
{course.instructor_desc && (
|
||||
<div style={{ marginTop: 20, paddingTop: 20, borderTop: '1px solid rgba(255,255,255,0.05)', color: '#aaa', fontSize: 14 }}>
|
||||
<span style={{ color: '#666', marginRight: 10 }}>讲师简介:</span>
|
||||
{course.instructor_desc}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 课程详细内容区域 */}
|
||||
{course.content && (
|
||||
<div style={{ marginTop: 40 }}>
|
||||
<Title level={3} style={{ color: '#fff', marginBottom: 20 }}>课程大纲与详情</Title>
|
||||
<div className={styles['markdown-body']}>
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkMath, remarkGfm]}
|
||||
rehypePlugins={[rehypeKatex, rehypeRaw]}
|
||||
components={markdownComponents}
|
||||
>
|
||||
{course.content}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{course.display_detail_image ? (
|
||||
<div style={{
|
||||
width: '100%',
|
||||
maxWidth: '900px',
|
||||
margin: '40px auto 0',
|
||||
background: '#111',
|
||||
borderRadius: 12,
|
||||
overflow: 'hidden',
|
||||
boxShadow: `0 10px 40px rgba(0, 240, 255, 0.1)`,
|
||||
border: `1px solid rgba(0, 240, 255, 0.2)`
|
||||
}}>
|
||||
<img
|
||||
src={course.display_detail_image}
|
||||
alt={course.title}
|
||||
style={{ width: '100%', display: 'block', height: 'auto' }}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</Col>
|
||||
|
||||
<Col xs={24} md={8}>
|
||||
<div style={{ position: 'sticky', top: 100 }}>
|
||||
<div style={{
|
||||
background: '#1f1f1f',
|
||||
padding: 30,
|
||||
borderRadius: 16,
|
||||
border: `1px solid rgba(0, 240, 255, 0.2)`,
|
||||
boxShadow: `0 0 20px rgba(0, 240, 255, 0.05)`
|
||||
}}>
|
||||
<Title level={3} style={{ color: '#fff', marginTop: 0 }}>
|
||||
{course.is_video_course ? '购买课程' : '报名咨询'}
|
||||
</Title>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', marginBottom: 20 }}>
|
||||
{parseFloat(course.price) > 0 ? (
|
||||
<>
|
||||
<span style={{ fontSize: 36, color: '#00f0ff', fontWeight: 'bold' }}>¥{course.price}</span>
|
||||
</>
|
||||
) : (
|
||||
<span style={{ fontSize: 36, color: '#00f0ff', fontWeight: 'bold' }}>免费咨询</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
block
|
||||
icon={course.is_video_course ? <PlayCircleOutlined /> : <FormOutlined />}
|
||||
disabled={course.is_purchased}
|
||||
style={{
|
||||
height: 50,
|
||||
background: course.is_purchased ? '#333' : '#00f0ff',
|
||||
borderColor: course.is_purchased ? '#444' : '#00f0ff',
|
||||
color: course.is_purchased ? '#888' : '#000',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '16px',
|
||||
cursor: course.is_purchased ? 'not-allowed' : 'pointer'
|
||||
}}
|
||||
onClick={() => {
|
||||
if (course.is_purchased) return;
|
||||
if (!user) {
|
||||
message.info('请先登录后再进行报名或购买');
|
||||
showLoginModal();
|
||||
return;
|
||||
}
|
||||
setIsModalOpen(true);
|
||||
}}
|
||||
>
|
||||
{course.is_purchased ? '已购买' : (course.is_video_course ? '购买视频课程' : '立即报名 / 咨询')}
|
||||
</Button>
|
||||
<p style={{ color: '#666', marginTop: 15, fontSize: 12, textAlign: 'center' }}>
|
||||
{course.is_purchased
|
||||
? '* 您已拥有该课程，可直接观看视频'
|
||||
: (course.is_video_course
|
||||
? '* 支付成功后自动解锁视频内容'
|
||||
: '* 提交后我们的顾问将尽快与您联系确认')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
{/* Enroll Modal */}
|
||||
<Modal
|
||||
title={payMode ? '微信扫码支付' : `${course.is_video_course ? '购买课程' : '报名/咨询'} - ${course.title}`}
|
||||
open={isModalOpen}
|
||||
onCancel={() => setIsModalOpen(false)}
|
||||
footer={null}
|
||||
destroyOnHidden
|
||||
width={payMode ? 400 : 520}
|
||||
>
|
||||
{payMode ? (
|
||||
<div style={{ textAlign: 'center', padding: '20px 0' }}>
|
||||
{paySuccess ? (
|
||||
<div style={{ color: '#52c41a' }}>
|
||||
<div style={{ fontSize: 48, marginBottom: 16 }}>🎉</div>
|
||||
<h3>支付成功！</h3>
|
||||
<p>正在跳转...</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div style={{ background: '#fff', padding: '10px', borderRadius: '4px', display: 'inline-block', border: '1px solid #eee' }}>
|
||||
{qrCodeUrl ? (
|
||||
<QRCodeSVG value={qrCodeUrl} size={200} />
|
||||
) : (
|
||||
<Spin size="large" />
|
||||
)}
|
||||
</div>
|
||||
<p style={{ marginTop: 20, fontSize: 16, fontWeight: 'bold' }}>¥{course.price}</p>
|
||||
<p style={{ color: '#666', marginTop: 10 }}>请使用微信扫一扫支付</p>
|
||||
<div style={{ marginTop: 20, fontSize: 12, color: '#999' }}>
|
||||
支付完成后将自动{course.is_video_course ? '解锁视频' : '完成报名'}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<p style={{ marginBottom: 20, color: '#666' }}>
|
||||
{course.is_video_course
|
||||
? '请确认您的联系方式，以便我们记录您的购买信息。'
|
||||
: '请填写您的联系方式，我们将为您安排课程顾问。'}
|
||||
</p>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleEnroll}
|
||||
>
|
||||
<Form.Item label="您的姓名" name="customer_name" rules={[{ required: true, message: '请输入姓名' }]}>
|
||||
<Input placeholder="例如：李同学" />
|
||||
</Form.Item>
|
||||
<Form.Item label="联系电话" name="phone_number" rules={[{ required: true, message: '请输入电话' }]}>
|
||||
<Input placeholder="13800000000" />
|
||||
</Form.Item>
|
||||
<Form.Item label="微信号" name="wechat_id">
|
||||
<Input placeholder="选填，方便微信沟通" />
|
||||
</Form.Item>
|
||||
<Form.Item label="电子邮箱" name="email" rules={[{ type: 'email' }]}>
|
||||
<Input placeholder="example@email.com" />
|
||||
</Form.Item>
|
||||
<Form.Item label="备注/留言" name="message">
|
||||
<Input.TextArea rows={4} placeholder="您想了解的任何问题..." />
|
||||
</Form.Item>
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, marginTop: 20 }}>
|
||||
<Button onClick={() => setIsModalOpen(false)}>取消</Button>
|
||||
<Button type="primary" htmlType="submit" loading={submitting}>
|
||||
{parseFloat(course.price) > 0 ? '去支付' : '提交报名'}
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</>
|
||||
)}
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VCCourseDetail;
|
||||
109
frontend/src/pages/VCCourseDetail.module.less
Normal file
109
frontend/src/pages/VCCourseDetail.module.less
Normal file
@@ -0,0 +1,109 @@
|
||||
.markdown-body {
|
||||
color: #ddd;
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #fff;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
h1 { font-size: 2em; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 0.3em; }
|
||||
h2 { font-size: 1.5em; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 0.3em; }
|
||||
h3 { font-size: 1.25em; }
|
||||
h4 { font-size: 1em; }
|
||||
h5 { font-size: 0.875em; }
|
||||
h6 { font-size: 0.85em; color: #888; }
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #1890ff;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
li {
|
||||
word-wrap: break-all;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 16px;
|
||||
padding: 0 1em;
|
||||
color: #8b949e;
|
||||
border-left: 0.25em solid #30363d;
|
||||
}
|
||||
|
||||
/* Table Styles */
|
||||
table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
|
||||
thead {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
tr {
|
||||
background-color: transparent;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
/* Ensure text color is readable */
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
td {
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
/* Inline Code */
|
||||
code:not([class*="language-"]) {
|
||||
padding: 0.2em 0.4em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
background-color: rgba(110, 118, 129, 0.4);
|
||||
border-radius: 6px;
|
||||
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
img {
|
||||
max-width: 100%;
|
||||
box-sizing: content-box;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
121
frontend/src/pages/VCCourses.jsx
Normal file
121
frontend/src/pages/VCCourses.jsx
Normal file
@@ -0,0 +1,121 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Button, Spin, Row, Col, Empty, Tag } from 'antd';
|
||||
import { ReadOutlined, ClockCircleOutlined, UserOutlined, BookOutlined } from '@ant-design/icons';
|
||||
import { getVCCourses } from '../api';
|
||||
|
||||
|
||||
|
||||
const VCCourses = () => {
|
||||
const [courses, setCourses] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
const fetchCourses = async () => {
|
||||
try {
|
||||
const res = await getVCCourses();
|
||||
setCourses(res.data);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch VC Courses:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
fetchCourses();
|
||||
}, []);
|
||||
|
||||
if (loading) return <div style={{ textAlign: 'center', padding: 100 }}><Spin size="large" /></div>;
|
||||
|
||||
return (
|
||||
<div style={{ padding: '40px 0', minHeight: '80vh', position: 'relative' }}>
|
||||
|
||||
{courses.length === 0 ? (
|
||||
<div style={{ textAlign: 'center', marginTop: 100, zIndex: 2, position: 'relative' }}>
|
||||
<Empty description={<span style={{ color: '#666' }}>暂无课程内容</span>} />
|
||||
</div>
|
||||
) : (
|
||||
<Row gutter={[32, 32]} justify="center" style={{ padding: '0 20px', position: 'relative', zIndex: 2 }}>
|
||||
{courses.map((item, index) => (
|
||||
<Col xs={24} md={12} lg={8} key={item.id}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
onClick={() => navigate(`/courses/${item.id}`)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<div style={{
|
||||
background: 'rgba(255,255,255,0.05)',
|
||||
border: '1px solid rgba(0,240,255,0.2)',
|
||||
borderRadius: 12,
|
||||
overflow: 'hidden',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}}>
|
||||
<div style={{ height: 200, background: '#000', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
|
||||
{item.display_cover_image ? (
|
||||
<img src={item.display_cover_image} alt={item.title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
|
||||
) : (
|
||||
<ReadOutlined style={{ fontSize: 40, color: '#333' }} />
|
||||
)}
|
||||
<div style={{ position: 'absolute', top: 10, right: 10, display: 'flex', gap: '5px' }}>
|
||||
{item.tag && (
|
||||
<Tag color="volcano" style={{ marginRight: 0 }}>{item.tag}</Tag>
|
||||
)}
|
||||
<Tag color={item.course_type === 'hardware' ? 'purple' : 'cyan'}>
|
||||
{item.course_type_display || (item.course_type === 'hardware' ? '硬件课程' : '软件课程')}
|
||||
</Tag>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ padding: 20, flex: 1, display: 'flex', flexDirection: 'column' }}>
|
||||
<h3 style={{ color: '#fff', fontSize: 20, marginBottom: 10 }}>{item.title}</h3>
|
||||
<div style={{ color: '#888', marginBottom: 15, fontSize: 14 }}>
|
||||
<span style={{ marginRight: 15 }}><UserOutlined /> {item.instructor}</span>
|
||||
<span style={{ marginRight: 15 }}><ClockCircleOutlined /> {item.duration}</span>
|
||||
<span><BookOutlined /> {item.lesson_count} 课时</span>
|
||||
</div>
|
||||
<p style={{ color: '#aaa', marginBottom: 20, flex: 1 }}>{item.description}</p>
|
||||
<Button type="primary" block ghost style={{ borderColor: '#00f0ff', color: '#00f0ff' }}>
|
||||
点击报名
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
)}
|
||||
|
||||
{/* 装饰性背景 */}
|
||||
<div style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
background: `
|
||||
radial-gradient(circle at 50% 50%, rgba(0, 240, 255, 0.05) 0%, transparent 50%)
|
||||
`,
|
||||
zIndex: 0,
|
||||
pointerEvents: 'none'
|
||||
}} />
|
||||
|
||||
<div style={{
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
width: '100%',
|
||||
height: '300px',
|
||||
background: `linear-gradient(to top, rgba(0,0,0,0.8), transparent)`,
|
||||
zIndex: 1,
|
||||
pointerEvents: 'none'
|
||||
}} />
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VCCourses;
|
||||
631
frontend/src/pages/activity/Detail.jsx
Normal file
631
frontend/src/pages/activity/Detail.jsx
Normal file
@@ -0,0 +1,631 @@
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { motion, useScroll, useTransform } from 'framer-motion';
|
||||
import { ArrowLeftOutlined, ShareAltOutlined, CalendarOutlined, ClockCircleOutlined, EnvironmentOutlined, UserOutlined, UploadOutlined, PayCircleOutlined, CopyOutlined, CheckOutlined } from '@ant-design/icons';
|
||||
import confetti from 'canvas-confetti';
|
||||
import { message, Spin, Button, Result, Modal, Form, Input, Select, Radio, Checkbox, Upload } from 'antd';
|
||||
import { getActivityDetail, signUpActivity, queryOrderStatus } from '../../api';
|
||||
import styles from '../../components/activity/activity.module.less';
|
||||
import { pageTransition, buttonTap } from '../../animation';
|
||||
import LoginModal from '../../components/LoginModal';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import rehypeRaw from 'rehype-raw';
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
||||
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
||||
import { QRCodeSVG } from 'qrcode.react';
|
||||
|
||||
const CodeBlock = ({ inline, className, children, ...props }) => {
|
||||
const [copied, setCopied] = useState(false);
|
||||
const match = /language-(\w+)/.exec(className || '');
|
||||
const codeString = String(children).replace(/\n$/, '');
|
||||
|
||||
const handleCopy = () => {
|
||||
navigator.clipboard.writeText(codeString);
|
||||
setCopied(true);
|
||||
message.success('代码已复制');
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
return !inline && match ? (
|
||||
<div className={styles.codeBlockWrapper}>
|
||||
<div
|
||||
className={styles.copyButton}
|
||||
onClick={handleCopy}
|
||||
>
|
||||
{copied ? <CheckOutlined /> : <CopyOutlined />}
|
||||
<span style={{ marginLeft: 4 }}>{copied ? '已复制' : '复制'}</span>
|
||||
</div>
|
||||
<SyntaxHighlighter
|
||||
style={vscDarkPlus}
|
||||
language={match[1]}
|
||||
PreTag="div"
|
||||
{...props}
|
||||
>
|
||||
{codeString}
|
||||
</SyntaxHighlighter>
|
||||
</div>
|
||||
) : (
|
||||
<code className={className} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
};
|
||||
|
||||
const ActivityDetail = () => {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const { scrollY } = useScroll();
|
||||
const { login, user } = useAuth();
|
||||
const [loginVisible, setLoginVisible] = useState(false);
|
||||
const [signupFormVisible, setSignupFormVisible] = useState(false);
|
||||
const [paymentModalVisible, setPaymentModalVisible] = useState(false);
|
||||
const [paymentInfo, setPaymentInfo] = useState(null);
|
||||
const [paymentStatus, setPaymentStatus] = useState('unpaid'); // 'unpaid' | 'paying' | 'paid'
|
||||
const [form] = Form.useForm();
|
||||
|
||||
// Header animation: transparent to white with shadow
|
||||
const headerBg = useTransform(scrollY, [0, 60], ['rgba(255,255,255,0)', 'rgba(255,255,255,1)']);
|
||||
const headerShadow = useTransform(scrollY, [0, 60], ['none', '0 2px 8px rgba(0,0,0,0.1)']);
|
||||
const headerColor = useTransform(scrollY, [0, 60], ['rgba(255,255,255,1)', 'rgba(0,0,0,0.85)']);
|
||||
const titleOpacity = useTransform(scrollY, [100, 200], [0, 1]);
|
||||
|
||||
const { data: activity, isLoading, error } = useQuery({
|
||||
queryKey: ['activity', id],
|
||||
queryFn: async () => {
|
||||
try {
|
||||
const res = await getActivityDetail(id);
|
||||
const data = res.data;
|
||||
// Map status logic
|
||||
// is_signed_up is only true if status='confirmed'
|
||||
// my_signup_status can be 'unpaid', 'pending', 'confirmed'
|
||||
return data;
|
||||
} catch (err) {
|
||||
throw new Error(err.response?.data?.detail || 'Failed to load activity');
|
||||
}
|
||||
},
|
||||
staleTime: 0,
|
||||
refetchOnMount: 'always',
|
||||
});
|
||||
|
||||
const [countdown, setCountdown] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (!activity) return;
|
||||
|
||||
const updateCountdown = () => {
|
||||
// 优先使用 signup_deadline，如果没有则使用 start_time
|
||||
const targetTime = activity.signup_deadline || activity.start_time;
|
||||
if (!targetTime) {
|
||||
setCountdown('待定');
|
||||
return;
|
||||
}
|
||||
|
||||
const targetDate = new Date(targetTime);
|
||||
const now = new Date();
|
||||
const diff = targetDate - now;
|
||||
|
||||
if (diff <= 0) {
|
||||
setCountdown('已截止');
|
||||
return;
|
||||
}
|
||||
|
||||
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
||||
|
||||
setCountdown(`${days}天 ${hours}小时 ${minutes}分`);
|
||||
};
|
||||
|
||||
updateCountdown();
|
||||
// 每分钟更新一次
|
||||
const timer = setInterval(updateCountdown, 60000);
|
||||
return () => clearInterval(timer);
|
||||
}, [activity]);
|
||||
|
||||
// Auto-fill form fields when the signup form becomes visible
|
||||
useEffect(() => {
|
||||
if (signupFormVisible && user && activity?.signup_form_config) {
|
||||
const initialValues = {};
|
||||
|
||||
activity.signup_form_config.forEach(field => {
|
||||
// Auto-fill phone number
|
||||
if (field.name === 'phone' && user.phone_number) {
|
||||
initialValues[field.name] = user.phone_number;
|
||||
}
|
||||
// Auto-fill name (nickname) if the field name is 'name'
|
||||
if (field.name === 'name' && user.nickname) {
|
||||
initialValues[field.name] = user.nickname;
|
||||
}
|
||||
});
|
||||
|
||||
if (Object.keys(initialValues).length > 0) {
|
||||
form.setFieldsValue(initialValues);
|
||||
}
|
||||
}
|
||||
}, [signupFormVisible, user, activity, form]);
|
||||
|
||||
const signUpMutation = useMutation({
|
||||
mutationFn: (values) => signUpActivity(id, { signup_info: values || {} }),
|
||||
onSuccess: (response) => {
|
||||
// API returns axios response object, so we need to access .data
|
||||
const data = response.data || response; // Fallback in case it was already unwrapped
|
||||
console.log('Signup response:', data);
|
||||
|
||||
// 检查是否需要支付
|
||||
if (data.payment_required) {
|
||||
setPaymentInfo(data);
|
||||
setPaymentStatus('paying');
|
||||
|
||||
// 不关闭报名表单，直接打开支付弹窗
|
||||
// 延迟一点点时间打开支付弹窗，避免状态更新冲突
|
||||
setTimeout(() => {
|
||||
setPaymentModalVisible(true);
|
||||
}, 300);
|
||||
// 不再显示 message，避免遮挡
|
||||
return;
|
||||
}
|
||||
|
||||
message.success('报名成功！');
|
||||
setSignupFormVisible(false);
|
||||
setPaymentStatus('paid'); // In case it was free but we track it
|
||||
confetti({
|
||||
particleCount: 150,
|
||||
spread: 70,
|
||||
origin: { y: 0.6 },
|
||||
colors: ['#00b96b', '#1890ff', '#ffffff']
|
||||
});
|
||||
queryClient.invalidateQueries(['activity', id]);
|
||||
queryClient.invalidateQueries(['activities']);
|
||||
},
|
||||
onError: (err) => {
|
||||
message.error(err.response?.data?.detail || err.response?.data?.error || '报名失败，请稍后重试');
|
||||
}
|
||||
});
|
||||
|
||||
// Polling for payment status
|
||||
useEffect(() => {
|
||||
let timer;
|
||||
if (paymentModalVisible && paymentInfo?.order_id) {
|
||||
timer = setInterval(async () => {
|
||||
try {
|
||||
const response = await queryOrderStatus(paymentInfo.order_id);
|
||||
if (response.data.status === 'paid') {
|
||||
message.success('支付成功，请点击“完成报名”！');
|
||||
setPaymentModalVisible(false);
|
||||
setPaymentInfo(null);
|
||||
setPaymentStatus('paid');
|
||||
|
||||
// Trigger success effects
|
||||
confetti({
|
||||
particleCount: 150,
|
||||
spread: 70,
|
||||
origin: { y: 0.6 },
|
||||
colors: ['#1890ff', '#40a9ff', '#ffffff']
|
||||
});
|
||||
queryClient.invalidateQueries(['activity', id]);
|
||||
queryClient.invalidateQueries(['activities']);
|
||||
|
||||
clearInterval(timer);
|
||||
}
|
||||
} catch {
|
||||
// ignore error during polling
|
||||
}
|
||||
}, 3000);
|
||||
}
|
||||
return () => clearInterval(timer);
|
||||
}, [paymentModalVisible, paymentInfo, id, queryClient]);
|
||||
|
||||
const getButtonText = () => {
|
||||
if (signUpMutation.isPending) return '提交中...';
|
||||
if (activity.is_signed_up) return '已报名';
|
||||
if (activity.my_signup_status === 'pending') return '审核中';
|
||||
if (activity.my_signup_status === 'unpaid') return '去支付';
|
||||
|
||||
const isEnded = new Date(activity.end_time) < new Date();
|
||||
if (isEnded) return '活动已结束';
|
||||
|
||||
const isFull = activity.max_participants > 0 && (activity.current_signups || 0) >= activity.max_participants;
|
||||
if (isFull) return '名额已满';
|
||||
|
||||
return '立即报名';
|
||||
};
|
||||
|
||||
const isButtonDisabled = () => {
|
||||
if (signUpMutation.isPending) return true;
|
||||
if (activity.is_signed_up) return true;
|
||||
if (activity.my_signup_status === 'pending') return true;
|
||||
// 'unpaid' is NOT disabled, allows payment retry
|
||||
if (activity.my_signup_status === 'unpaid') return false;
|
||||
|
||||
const isEnded = new Date(activity.end_time) < new Date();
|
||||
if (isEnded) return true;
|
||||
|
||||
const isFull = activity.max_participants > 0 && (activity.current_signups || 0) >= activity.max_participants;
|
||||
if (isFull) return true;
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
const handleShare = async () => {
|
||||
const url = window.location.href;
|
||||
if (navigator.share) {
|
||||
try {
|
||||
await navigator.share({
|
||||
title: activity?.title,
|
||||
text: '来看看这个精彩活动！',
|
||||
url: url
|
||||
});
|
||||
} catch {
|
||||
console.log('Share canceled');
|
||||
}
|
||||
} else {
|
||||
navigator.clipboard.writeText(url);
|
||||
message.success('链接已复制到剪贴板');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSignUp = () => {
|
||||
if (!localStorage.getItem('token')) {
|
||||
message.warning('请先登录后报名');
|
||||
setLoginVisible(true);
|
||||
return;
|
||||
}
|
||||
|
||||
setPaymentStatus('unpaid');
|
||||
setPaymentInfo(null);
|
||||
|
||||
// Check if we need to collect info OR if it's a paid activity
|
||||
// We want to use the modal for payment flow as well
|
||||
if ((activity.signup_form_config && activity.signup_form_config.length > 0) || (activity.is_paid && activity.price > 0)) {
|
||||
setSignupFormVisible(true);
|
||||
} else {
|
||||
// Direct signup if no info needed and free
|
||||
signUpMutation.mutate({});
|
||||
}
|
||||
};
|
||||
|
||||
const handleFormSubmit = (values) => {
|
||||
// Handle file uploads if any (convert to base64 or just warn if not supported)
|
||||
// For now, we just pass values.
|
||||
// Note: File objects won't serialize to JSON well.
|
||||
signUpMutation.mutate(values);
|
||||
};
|
||||
|
||||
const normFile = (e) => {
|
||||
if (Array.isArray(e)) {
|
||||
return e;
|
||||
}
|
||||
return e?.fileList;
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', background: '#1f1f1f' }}>
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div style={{ padding: 40, background: '#1f1f1f', minHeight: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<Result
|
||||
status="error"
|
||||
title="加载失败"
|
||||
subTitle={error.message}
|
||||
extra={[
|
||||
<Button type="primary" key="back" onClick={() => navigate(-1)}>
|
||||
返回列表
|
||||
</Button>
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!activity) {
|
||||
return (
|
||||
<div style={{ padding: 40, background: '#1f1f1f', minHeight: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<Result
|
||||
status="404"
|
||||
title="活动未找到"
|
||||
subTitle="抱歉，该活动可能已被删除或不存在。"
|
||||
extra={[
|
||||
<Button type="primary" key="back" onClick={() => navigate(-1)}>
|
||||
返回列表
|
||||
</Button>
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const cleanUrl = (url) => {
|
||||
if (!url) return '';
|
||||
return url.replace(/[`\s]/g, '');
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
variants={pageTransition}
|
||||
style={{ background: '#1f1f1f', minHeight: '100vh', color: '#fff' }}
|
||||
>
|
||||
{/* Sticky Header */}
|
||||
<motion.div
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: 60,
|
||||
zIndex: 100,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: '0 20px',
|
||||
background: headerBg,
|
||||
boxShadow: headerShadow,
|
||||
}}
|
||||
>
|
||||
<motion.div
|
||||
onClick={() => navigate(-1)}
|
||||
style={{ cursor: 'pointer', color: headerColor, fontSize: 20 }}
|
||||
>
|
||||
<ArrowLeftOutlined />
|
||||
</motion.div>
|
||||
<motion.div
|
||||
style={{ color: headerColor, fontWeight: 600, opacity: titleOpacity }}
|
||||
>
|
||||
{activity.title}
|
||||
</motion.div>
|
||||
<motion.div
|
||||
onClick={handleShare}
|
||||
style={{ cursor: 'pointer', color: headerColor, fontSize: 20 }}
|
||||
>
|
||||
<ShareAltOutlined />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Hero Image with LayoutId for shared transition */}
|
||||
<div className={styles.detailHeader}>
|
||||
<motion.img
|
||||
layoutId={`activity-card-${id}`}
|
||||
src={activity.display_banner_url || cleanUrl(activity.banner_url) || activity.cover_image || 'https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=800&h=600&fit=crop'}
|
||||
alt={activity.title}
|
||||
className={styles.detailImage}
|
||||
/>
|
||||
<div className={styles.headerGradient} />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className={styles.detailContent}>
|
||||
<div className={styles.infoCard}>
|
||||
<h1 className={styles.activityTitle}>{activity.title}</h1>
|
||||
|
||||
<div className={styles.metaInfo}>
|
||||
<div className={styles.metaItem}>
|
||||
<CalendarOutlined />
|
||||
<span>{activity.start_time ? new Date(activity.start_time).toLocaleDateString() : 'TBD'}</span>
|
||||
</div>
|
||||
<div className={styles.metaItem}>
|
||||
<ClockCircleOutlined />
|
||||
<span>{activity.start_time ? new Date(activity.start_time).toLocaleTimeString() : 'TBD'}</span>
|
||||
</div>
|
||||
<div className={styles.metaItem}>
|
||||
<EnvironmentOutlined />
|
||||
<span>{activity.location || '线上活动'}</span>
|
||||
</div>
|
||||
<div className={styles.metaItem}>
|
||||
<UserOutlined />
|
||||
<span>{activity.current_signups || 0} / {activity.max_participants} 已报名</span>
|
||||
</div>
|
||||
<div className={styles.metaItem}>
|
||||
<PayCircleOutlined />
|
||||
<span>{activity.is_paid ? `¥${activity.price}` : '免费'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.statusWrapper}>
|
||||
<span className={styles.statusTag}>
|
||||
{activity.status || (new Date() < new Date(activity.start_time) ? '报名中' : '已结束')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.richText}>
|
||||
<h3>活动详情</h3>
|
||||
<div style={{ color: '#ccc', lineHeight: '1.8' }}>
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
rehypePlugins={[rehypeRaw]}
|
||||
components={{
|
||||
code: CodeBlock
|
||||
}}
|
||||
>
|
||||
{activity.description || activity.content || '暂无详情描述'}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Fixed Footer */}
|
||||
<div className={styles.fixedFooter}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<span style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)' }}>距离报名截止</span>
|
||||
<span style={{ color: '#1890ff', fontWeight: 'bold' }}>
|
||||
{countdown || '计算中...'}
|
||||
</span>
|
||||
</div>
|
||||
<motion.button
|
||||
className={styles.actionBtn}
|
||||
variants={buttonTap}
|
||||
whileTap="tap"
|
||||
onClick={handleSignUp}
|
||||
disabled={isButtonDisabled()}
|
||||
>
|
||||
{getButtonText()}
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
<LoginModal
|
||||
visible={loginVisible}
|
||||
onClose={() => setLoginVisible(false)}
|
||||
onLoginSuccess={(userData) => {
|
||||
login(userData);
|
||||
// Auto trigger signup after login if needed, or just let user click again
|
||||
}}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
title="填写报名信息"
|
||||
open={signupFormVisible}
|
||||
onCancel={() => setSignupFormVisible(false)}
|
||||
footer={[
|
||||
<Button key="cancel" onClick={() => setSignupFormVisible(false)}>
|
||||
取消
|
||||
</Button>,
|
||||
(activity?.is_paid && activity?.price > 0) ? (
|
||||
<React.Fragment key="paid-actions">
|
||||
<Button
|
||||
key="pay"
|
||||
type="primary"
|
||||
onClick={form.submit}
|
||||
loading={signUpMutation.isPending && paymentStatus === 'unpaid'}
|
||||
disabled={paymentStatus === 'paid'}
|
||||
>
|
||||
{paymentStatus === 'paid' ? '已支付' : `支付 ¥${activity.price}`}
|
||||
</Button>
|
||||
<Button
|
||||
key="complete"
|
||||
type="primary"
|
||||
onClick={() => setSignupFormVisible(false)}
|
||||
disabled={paymentStatus !== 'paid'}
|
||||
>
|
||||
完成报名
|
||||
</Button>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<Button key="submit" type="primary" onClick={form.submit} loading={signUpMutation.isPending}>
|
||||
提交报名
|
||||
</Button>
|
||||
)
|
||||
]}
|
||||
destroyOnHidden
|
||||
>
|
||||
<Form form={form} onFinish={handleFormSubmit} layout="vertical">
|
||||
{activity.signup_form_config && activity.signup_form_config.map(field => {
|
||||
let inputNode;
|
||||
const commonProps = {
|
||||
placeholder: field.placeholder || `请输入${field.label}`,
|
||||
};
|
||||
|
||||
switch (field.type) {
|
||||
case 'select':
|
||||
inputNode = (
|
||||
<Select placeholder={field.placeholder || `请选择${field.label}`}>
|
||||
{field.options?.map(opt => (
|
||||
<Select.Option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
);
|
||||
break;
|
||||
case 'radio':
|
||||
inputNode = (
|
||||
<Radio.Group>
|
||||
{field.options?.map(opt => (
|
||||
<Radio key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</Radio>
|
||||
))}
|
||||
</Radio.Group>
|
||||
);
|
||||
break;
|
||||
case 'checkbox':
|
||||
inputNode = (
|
||||
<Checkbox.Group>
|
||||
{field.options?.map(opt => (
|
||||
<Checkbox key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</Checkbox>
|
||||
))}
|
||||
</Checkbox.Group>
|
||||
);
|
||||
break;
|
||||
case 'textarea':
|
||||
inputNode = <Input.TextArea {...commonProps} rows={4} />;
|
||||
break;
|
||||
case 'file':
|
||||
inputNode = (
|
||||
<Upload beforeUpload={() => false} maxCount={1}>
|
||||
<Button icon={<UploadOutlined />}>点击上传</Button>
|
||||
</Upload>
|
||||
);
|
||||
break;
|
||||
default:
|
||||
inputNode = <Input {...commonProps} type={field.type === 'tel' ? 'tel' : 'text'} />;
|
||||
}
|
||||
|
||||
const itemProps = {
|
||||
key: field.name,
|
||||
name: field.name,
|
||||
label: field.label,
|
||||
rules: [{ required: field.required, message: `请填写${field.label}` }],
|
||||
};
|
||||
|
||||
if (field.type === 'file') {
|
||||
itemProps.valuePropName = 'fileList';
|
||||
itemProps.getValueFromEvent = normFile;
|
||||
}
|
||||
|
||||
return (
|
||||
<Form.Item {...itemProps}>
|
||||
{inputNode}
|
||||
</Form.Item>
|
||||
);
|
||||
})}
|
||||
</Form>
|
||||
</Modal>
|
||||
<Modal
|
||||
title="微信支付"
|
||||
open={paymentModalVisible}
|
||||
onCancel={() => setPaymentModalVisible(false)}
|
||||
footer={null}
|
||||
destroyOnHidden
|
||||
width={360}
|
||||
zIndex={1001} // 确保层级高于其他弹窗
|
||||
>
|
||||
<div style={{ textAlign: 'center', padding: '20px 0' }}>
|
||||
{paymentInfo?.code_url ? (
|
||||
<>
|
||||
<div style={{ background: '#fff', padding: 10, display: 'inline-block' }}>
|
||||
<QRCodeSVG value={paymentInfo.code_url} size={200} />
|
||||
</div>
|
||||
<p style={{ marginTop: 20, fontSize: 18, fontWeight: 'bold' }}>¥{paymentInfo.price}</p>
|
||||
<p style={{ color: '#666' }}>请使用微信扫一扫支付</p>
|
||||
</>
|
||||
) : (
|
||||
<Spin tip="正在生成二维码..." />
|
||||
)}
|
||||
<div style={{ marginTop: 20 }}>
|
||||
<Button type="primary" onClick={() => window.location.reload()}>
|
||||
我已支付
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActivityDetail;
|
||||
69
frontend/src/theme.module.less
Normal file
69
frontend/src/theme.module.less
Normal file
@@ -0,0 +1,69 @@
|
||||
|
||||
/* Global Theme Variables */
|
||||
:global {
|
||||
:root {
|
||||
/* Colors */
|
||||
--primary-color: #1890ff;
|
||||
--secondary-color: #40a9ff;
|
||||
--background-dark: #1f1f1f;
|
||||
--background-card: #2a2a2a;
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: rgba(255, 255, 255, 0.65);
|
||||
--border-color: rgba(255, 255, 255, 0.1);
|
||||
|
||||
/* Typography */
|
||||
--font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--font-size-base: 14px;
|
||||
--font-size-lg: 16px;
|
||||
--font-size-xl: 20px;
|
||||
|
||||
/* Layout */
|
||||
--border-radius-base: 8px;
|
||||
--border-radius-lg: 16px;
|
||||
|
||||
/* Spacing */
|
||||
--spacing-xs: 4px;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 16px;
|
||||
--spacing-lg: 24px;
|
||||
|
||||
/* Shadows */
|
||||
--box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
--box-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mixins (Less Variables for module usage if needed) */
|
||||
@primary-color: var(--primary-color);
|
||||
@secondary-color: var(--secondary-color);
|
||||
@background-dark: var(--background-dark);
|
||||
@background-card: var(--background-card);
|
||||
@text-primary: var(--text-primary);
|
||||
@text-secondary: var(--text-secondary);
|
||||
@border-radius-base: var(--border-radius-base);
|
||||
|
||||
.glass-panel {
|
||||
background: rgba(42, 42, 42, 0.6);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: var(--border-radius-lg);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
61
frontend/vite.config.js
Normal file
61
frontend/vite.config.js
Normal file
@@ -0,0 +1,61 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
//123
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 5173,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://backend:8000',
|
||||
changeOrigin: true,
|
||||
},
|
||||
'/admin': {
|
||||
target: 'http://backend:8000',
|
||||
changeOrigin: true,
|
||||
},
|
||||
'/static': {
|
||||
target: 'http://backend:8000',
|
||||
changeOrigin: true,
|
||||
},
|
||||
'/media': {
|
||||
target: 'http://backend:8000',
|
||||
changeOrigin: true,
|
||||
},
|
||||
'/judge': {
|
||||
target: 'http://backend:8000',
|
||||
changeOrigin: true,
|
||||
}
|
||||
}
|
||||
},
|
||||
preview: {
|
||||
host: '0.0.0.0',
|
||||
port: 15173,
|
||||
allowedHosts: ['market.quant-speed.com'],
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://backend:8000',
|
||||
changeOrigin: true,
|
||||
},
|
||||
'/admin': {
|
||||
target: 'http://backend:8000',
|
||||
changeOrigin: true,
|
||||
},
|
||||
'/static': {
|
||||
target: 'http://backend:8000',
|
||||
changeOrigin: true,
|
||||
},
|
||||
'/media': {
|
||||
target: 'http://backend:8000',
|
||||
changeOrigin: true,
|
||||
},
|
||||
'/judge': {
|
||||
target: 'http://backend:8000',
|
||||
changeOrigin: true,
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user