✨ feat(stock-chart): 实现ProfitDisplay组件的响应式设计

- 添加移动端适配，引入useIsMobile钩子判断设备类型
- 实现移动端点击展开/收起详细信息的交互功能
- 优化布局结构，区分移动端和桌面端显示内容
- 调整字体大小和间距，提升移动端显示效果
- 添加展开/收起状态指示器，优化用户体验

src/client/mobile/components/stock/components/stock-chart/src/components/ProfitDisplay.tsx

@@ -1,65 +1,126 @@
-import React from 'react';
+import React, { useState } from 'react';
 import type { ProfitSummary } from '../types/index';
+import { useIsMobile } from '@/client/hooks/use-mobile';
 
 interface ProfitDisplayProps {
   profitSummary: ProfitSummary;
 }
 
-export const ProfitDisplay: React.FC<ProfitDisplayProps> = ({ 
-  profitSummary 
+export const ProfitDisplay: React.FC<ProfitDisplayProps> = ({
+  profitSummary
 }: ProfitDisplayProps) => {
   const { totalProfit, dailyStats } = profitSummary;
-  
-  return (
-    <div className="flex justify-between items-center p-4 bg-gray-800 text-white shadow-lg">
-      {/* 累计收益率（采用答题卡的计算方式） */}
+  const isMobile = useIsMobile();
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // 移动端点击展开/收起详细信息
+  const handleToggleExpand = () => {
+    if (isMobile) {
+      setIsExpanded(!isExpanded);
+    }
+  };
+
+  // 移动端优先显示的关键信息
+  const keyInfo = (
+    <div className="flex items-center justify-between w-full">
+      {/* 累计收益率 */}
       <div className="flex items-center space-x-2">
-        <span className="text-gray-400">累计收益率</span>
-        <span className={`text-xl font-bold ${totalProfit >= 0 ? 'text-red-500' : 'text-green-500'}`}>
+        <span className="text-gray-400 text-sm md:text-base">累计收益率</span>
+        <span className={`text-lg md:text-xl font-bold ${totalProfit >= 0 ? 'text-red-500' : 'text-green-500'}`}>
           {totalProfit >= 0 ? '+' : ''}{(totalProfit * 100).toFixed(2)}%
         </span>
       </div>
 
-      {/* 行情数据 */}
-      <div className="flex items-center space-x-6">
-        {/* 日期 */}
-        <div className="flex flex-col items-center">
-          <span className="text-gray-400 text-sm">日期</span>
-          <span className="font-medium">{dailyStats.date}</span>
+      {/* 移动端：日期和涨跌幅 */}
+      {isMobile && (
+        <div className="flex items-center space-x-4">
+          <div className="flex flex-col items-center">
+            <span className="text-gray-400 text-xs">日期</span>
+            <span className="font-medium text-sm">{dailyStats.date}</span>
+          </div>
+          <div className="flex flex-col items-center">
+            <span className="text-gray-400 text-xs">涨跌幅</span>
+            <span className={`font-medium text-sm ${dailyStats.change >= 0 ? 'text-red-500' : 'text-green-500'}`}>
+              {dailyStats.change >= 0 ? '+' : ''}{dailyStats.change.toFixed(2)}%
+            </span>
+          </div>
         </div>
+      )}
 
-        {/* 开盘价 */}
-        <div className="flex flex-col items-center">
-          <span className="text-gray-400 text-sm">开</span>
-          <span className="font-medium">{dailyStats.open.toFixed(2)}</span>
+      {/* 桌面端：完整行情数据 */}
+      {!isMobile && (
+        <div className="flex items-center space-x-6">
+          <div className="flex flex-col items-center">
+            <span className="text-gray-400 text-sm">日期</span>
+            <span className="font-medium">{dailyStats.date}</span>
+          </div>
+          <div className="flex flex-col items-center">
+            <span className="text-gray-400 text-sm">开</span>
+            <span className="font-medium">{dailyStats.open.toFixed(2)}</span>
+          </div>
+          <div className="flex flex-col items-center">
+            <span className="text-gray-400 text-sm">高</span>
+            <span className="font-medium text-red-500">{dailyStats.high.toFixed(2)}</span>
+          </div>
+          <div className="flex flex-col items-center">
+            <span className="text-gray-400 text-sm">收</span>
+            <span className="font-medium">{dailyStats.close.toFixed(2)}</span>
+          </div>
+          <div className="flex flex-col items-center">
+            <span className="text-gray-400 text-sm">低</span>
+            <span className="font-medium text-green-500">{dailyStats.low.toFixed(2)}</span>
+          </div>
+          <div className="flex flex-col items-center">
+            <span className="text-gray-400 text-sm">涨跌幅</span>
+            <span className={`font-medium ${dailyStats.change >= 0 ? 'text-red-500' : 'text-green-500'}`}>
+              {dailyStats.change >= 0 ? '+' : ''}{dailyStats.change.toFixed(2)}%
+            </span>
+          </div>
         </div>
+      )}
+    </div>
+  );
 
-        {/* 最高价 */}
+  // 移动端展开时的详细信息
+  const expandedInfo = isMobile && isExpanded && (
+    <div className="mt-3 pt-3 border-t border-gray-700">
+      <div className="grid grid-cols-3 gap-4">
         <div className="flex flex-col items-center">
-          <span className="text-gray-400 text-sm">高</span>
-          <span className="font-medium text-red-500">{dailyStats.high.toFixed(2)}</span>
+          <span className="text-gray-400 text-xs">开盘</span>
+          <span className="font-medium text-sm">{dailyStats.open.toFixed(2)}</span>
         </div>
-
-        {/* 收盘价 */}
         <div className="flex flex-col items-center">
-          <span className="text-gray-400 text-sm">收</span>
-          <span className="font-medium">{dailyStats.close.toFixed(2)}</span>
+          <span className="text-gray-400 text-xs">最高</span>
+          <span className="font-medium text-sm text-red-500">{dailyStats.high.toFixed(2)}</span>
         </div>
-
-        {/* 最低价 */}
         <div className="flex flex-col items-center">
-          <span className="text-gray-400 text-sm">低</span>
-          <span className="font-medium text-green-500">{dailyStats.low.toFixed(2)}</span>
+          <span className="text-gray-400 text-xs">最低</span>
+          <span className="font-medium text-sm text-green-500">{dailyStats.low.toFixed(2)}</span>
         </div>
-
-        {/* 涨跌幅 */}
         <div className="flex flex-col items-center">
-          <span className="text-gray-400 text-sm">涨跌幅</span>
-          <span className={`font-medium ${dailyStats.change >= 0 ? 'text-red-500' : 'text-green-500'}`}>
-            {dailyStats.change >= 0 ? '+' : ''}{dailyStats.change.toFixed(2)}%
-          </span>
+          <span className="text-gray-400 text-xs">收盘</span>
+          <span className="font-medium text-sm">{dailyStats.close.toFixed(2)}</span>
         </div>
       </div>
     </div>
   );
+
+  return (
+    <div
+      className={`bg-gray-800 text-white shadow-lg ${isMobile ? 'p-3 cursor-pointer active:bg-gray-700 transition-colors' : 'p-4'}`}
+      onClick={handleToggleExpand}
+    >
+      {keyInfo}
+      {expandedInfo}
+
+      {/* 移动端展开/收起指示器 */}
+      {isMobile && (
+        <div className="flex justify-center mt-2">
+          <span className="text-gray-400 text-xs">
+            {isExpanded ? '收起' : '展开查看更多'}
+          </span>
+        </div>
+      )}
+    </div>
+  );
 };