fix coments trend

web/src/components/Analytics.tsx

@@ -1046,8 +1046,26 @@ const Analytics: React.FC = () => {
             comments: item.count
           }));
           
-          setTimelineData(mappedData);
-          setMaxTimelineCount(result.metadata.max_count || 1); // 避免除以零
+          // 只保留最近7天的数据
+          const last7DaysData = mappedData
+            .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()) // 按日期降序排序
+            .slice(0, 7) // 只取前7条
+            .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()); // 再按日期升序排序
+          
+          // 计算最大留言数（使用安全检查确保数组不为空）
+          let maxCount = 1; // 默认值为1
+          if (last7DaysData.length > 0) {
+            // 查找数据中的最大留言数
+            maxCount = Math.max(...last7DaysData.map(item => item.comments), 1);
+            console.log('留言趋势最大留言数:', maxCount, '数据:', JSON.stringify(last7DaysData));
+          }
+          
+          // 显式检查maxCount是否大于0，避免除以零的问题
+          if (maxCount <= 0) maxCount = 1;
+          
+          // 更新状态
+          setTimelineData(last7DaysData);
+          setMaxTimelineCount(maxCount);
           
           // 如果API返回了模拟数据标志
           if ('is_mock_data' in result && result.is_mock_data) {
@@ -1856,7 +1874,14 @@ const Analytics: React.FC = () => {
 
             {/* 留言趋势图 */}
             <div className="p-6 mb-8 bg-white rounded-lg shadow">
-              <h3 className="mb-4 text-lg font-medium text-gray-800">留言趋势</h3>
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-lg font-medium text-gray-800">最近七天留言趋势</h3>
+                <span className="text-xs text-gray-500">
+                  {timelineData.length > 0 ? 
+                    `${new Date(timelineData[0].date).toLocaleDateString('zh-CN')} - ${new Date(timelineData[timelineData.length - 1].date).toLocaleDateString('zh-CN')}` : 
+                    '暂无数据'}
+                </span>
+              </div>
               {trendLoading ? (
                 <div className="flex flex-col items-center justify-center h-64">
                   <div className="w-12 h-12 border-4 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
@@ -1870,30 +1895,42 @@ const Analytics: React.FC = () => {
               ) : timelineData.length === 0 ? (
                 <div className="flex flex-col items-center justify-center h-64 p-4 rounded-lg bg-gray-50">
                   <MessageSquare className="w-10 h-10 mb-2 text-gray-400" />
-                  <p className="text-center text-gray-600">没有找到留言趋势数据</p>
+                  <p className="text-center text-gray-600">没有找到最近七天的留言数据</p>
                 </div>
               ) : (
-                <div className="h-64">
-                  <div className="flex items-end space-x-0.5 h-52 overflow-x-auto">
+                <div className="flex flex-col h-64">
+                  {/* 完全重构的柱状图实现 */}
+                  <div className="flex items-end justify-between w-full h-48">
                     {timelineData.map((item, index) => (
-                      <div key={index} className="flex flex-col items-center justify-end min-w-[15px] group">
+                      <div key={index} className="flex flex-col items-center w-full">
+                        {/* 留言数标签 */}
+                        <div className="mb-1 text-xs text-gray-500">{item.comments}</div>
+                        
+                        {/* 柱状图 - 使用绝对高度值而非百分比 */}
                         <div 
-                          className="w-full transition-all duration-300 ease-in-out bg-blue-500 rounded-t-md hover:bg-blue-600 group-hover:relative"
-                          style={{ 
-                            height: `${(item.comments / maxTimelineCount) * 100}%`,
-                            minHeight: '4px'
+                          className="relative w-4/5 transition-all duration-300 bg-blue-500 hover:bg-blue-600 rounded-t-md"
+                          style={{
+                            height: item.comments === 0 ? '4px' : `${Math.max(8, Math.min(180, item.comments / 5))}px`
                           }}
                         >
-                          <div className="absolute invisible px-2 py-1 mb-1 text-xs text-white transform -translate-x-1/2 bg-gray-800 rounded bottom-full left-1/2 group-hover:visible whitespace-nowrap">
+                          {/* 悬停提示 */}
+                          <div className="absolute hidden px-2 py-1 mb-1 text-xs text-white transform -translate-x-1/2 bg-gray-800 rounded group-hover:block bottom-full left-1/2 whitespace-nowrap">
                             {item.comments} 留言
                           </div>
                         </div>
-                        <p className="mt-2 text-xs text-center truncate" style={{ writingMode: 'vertical-rl', textOrientation: 'mixed', transform: 'rotate(180deg)', maxHeight: '80px' }}>
+                        
+                        {/* 日期标签 */}
+                        <div className="mt-2 text-xs text-center text-gray-500">
                           {new Date(item.date).toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })}
-                        </p>
+                        </div>
                       </div>
                     ))}
                   </div>
+                  
+                  {/* 图表说明 */}
+                  <div className="mt-2 text-xs text-center text-gray-400">
+                    柱状图高度代表留言数量
+                  </div>
                 </div>
               )}
             </div>