feat(ValueForum): 优化页面布局和加载状态
- 添加响应式左右 padding - 使用 PageLoader 统一加载样式 - 修复预测市场数据格式处理 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -16,7 +16,6 @@ import {
|
|||||||
InputGroup,
|
InputGroup,
|
||||||
InputLeftElement,
|
InputLeftElement,
|
||||||
Select,
|
Select,
|
||||||
Spinner,
|
|
||||||
Center,
|
Center,
|
||||||
useDisclosure,
|
useDisclosure,
|
||||||
Flex,
|
Flex,
|
||||||
@@ -38,6 +37,7 @@ import PredictionTopicCard from './components/PredictionTopicCard';
|
|||||||
import CreatePostModal from './components/CreatePostModal';
|
import CreatePostModal from './components/CreatePostModal';
|
||||||
import CreatePredictionModal from './components/CreatePredictionModal';
|
import CreatePredictionModal from './components/CreatePredictionModal';
|
||||||
import PredictionGuideModal from './components/PredictionGuideModal';
|
import PredictionGuideModal from './components/PredictionGuideModal';
|
||||||
|
import PageLoader from '@components/Loading/PageLoader';
|
||||||
|
|
||||||
const MotionBox = motion(Box);
|
const MotionBox = motion(Box);
|
||||||
|
|
||||||
@@ -97,10 +97,15 @@ const ValueForum = () => {
|
|||||||
setLoading(true);
|
setLoading(true);
|
||||||
const response = await getTopics({ status: 'active', sort_by: sortBy });
|
const response = await getTopics({ status: 'active', sort_by: sortBy });
|
||||||
if (response.success) {
|
if (response.success) {
|
||||||
setPredictionTopics(response.data);
|
// 支持两种返回格式:直接数组或带分页的对象
|
||||||
|
const topicsData = Array.isArray(response.data)
|
||||||
|
? response.data
|
||||||
|
: (response.data?.topics || []);
|
||||||
|
setPredictionTopics(topicsData);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取预测话题失败:', error);
|
console.error('获取预测话题失败:', error);
|
||||||
|
setPredictionTopics([]);
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
@@ -153,8 +158,8 @@ const ValueForum = () => {
|
|||||||
pt="80px"
|
pt="80px"
|
||||||
pb="20"
|
pb="20"
|
||||||
>
|
>
|
||||||
{/* padding 由 MainLayout 统一设置 */}
|
{/* 内容区域 */}
|
||||||
<Box>
|
<Box px={{ base: "4", md: "6", lg: "8" }} maxW="1600px" mx="auto">
|
||||||
{/* 顶部横幅 */}
|
{/* 顶部横幅 */}
|
||||||
<MotionBox
|
<MotionBox
|
||||||
initial={{ opacity: 0, y: -20 }}
|
initial={{ opacity: 0, y: -20 }}
|
||||||
@@ -345,17 +350,7 @@ const ValueForum = () => {
|
|||||||
{/* 普通帖子标签页 */}
|
{/* 普通帖子标签页 */}
|
||||||
<TabPanel p="0">
|
<TabPanel p="0">
|
||||||
{loading && page === 1 ? (
|
{loading && page === 1 ? (
|
||||||
<Center py="20">
|
<PageLoader inline />
|
||||||
<VStack spacing="4">
|
|
||||||
<Spinner
|
|
||||||
size="xl"
|
|
||||||
thickness="4px"
|
|
||||||
speed="0.8s"
|
|
||||||
color={forumColors.primary[500]}
|
|
||||||
/>
|
|
||||||
<Text color={forumColors.text.secondary}>加载中...</Text>
|
|
||||||
</VStack>
|
|
||||||
</Center>
|
|
||||||
) : posts.length === 0 ? (
|
) : posts.length === 0 ? (
|
||||||
<Center py="20">
|
<Center py="20">
|
||||||
<VStack spacing="4">
|
<VStack spacing="4">
|
||||||
@@ -420,17 +415,7 @@ const ValueForum = () => {
|
|||||||
{/* 预测市场标签页 */}
|
{/* 预测市场标签页 */}
|
||||||
<TabPanel p="0">
|
<TabPanel p="0">
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<Center py="20">
|
<PageLoader inline />
|
||||||
<VStack spacing="4">
|
|
||||||
<Spinner
|
|
||||||
size="xl"
|
|
||||||
thickness="4px"
|
|
||||||
speed="0.8s"
|
|
||||||
color={forumColors.primary[500]}
|
|
||||||
/>
|
|
||||||
<Text color={forumColors.text.secondary}>加载中...</Text>
|
|
||||||
</VStack>
|
|
||||||
</Center>
|
|
||||||
) : predictionTopics.length === 0 ? (
|
) : predictionTopics.length === 0 ? (
|
||||||
<Center py="20">
|
<Center py="20">
|
||||||
<VStack spacing="4">
|
<VStack spacing="4">
|
||||||
|
|||||||
Reference in New Issue
Block a user