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