feat: UI调整

src/views/Company/components/StockQuoteCard/index.tsx

@@ -16,8 +16,12 @@ import {
   Badge,
   Progress,
   Skeleton,
+  IconButton,
+  Tooltip,
 } from '@chakra-ui/react';
+import { Share2 } from 'lucide-react';
 
+import FavoriteButton from '@components/FavoriteButton';
 import type { StockQuoteCardProps } from './types';
 import { mockStockQuoteData } from './mockData';
 
@@ -50,7 +54,16 @@ const formatNetInflow = (value: number): string => {
 const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
   data = mockStockQuoteData,
   isLoading = false,
+  isInWatchlist = false,
+  isWatchlistLoading = false,
+  onWatchlistToggle,
+  onShare,
 }) => {
+  // 处理分享点击
+  const handleShare = () => {
+    onShare?.();
+  };
+
   // 黑金主题颜色配置
   const cardBg = '#1A202C';
   const borderColor = '#C9A961';
@@ -77,31 +90,47 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
   return (
     <Card bg={cardBg} shadow="sm" borderWidth="1px" borderColor={borderColor}>
       <CardBody>
-        {/* 顶部：股票名称 + 更新时间 */}
-        <Flex justify="space-between" align="center">
-          <HStack spacing={3}>
-            <Text fontSize="24px" fontWeight="bold" color={valueColor}>
-              {data.name}
+        {/* 顶部：股票名称 + 关注/分享按钮 + 更新时间 */}
+        <Flex justify="space-between" align="center" mb={4}>
+          {/* 左侧：名称（代码） | 指数标签 */}
+          <HStack spacing={2}>
+            <Text fontSize="22px" fontWeight="bold" color={valueColor}>
+              {data.name}（{data.code}）
+            </Text>
+            {data.indexTags.length > 0 && (
+              <>
+                <Text color={labelColor} fontSize="22px" fontWeight="light">|</Text>
+                <Text fontSize="16px" color={labelColor}>
+                  {data.indexTags.join('、')}
+                </Text>
+              </>
+            )}
+          </HStack>
+
+          {/* 右侧：关注 + 分享 + 时间 */}
+          <HStack spacing={3}>
+            <FavoriteButton
+              isFavorite={isInWatchlist}
+              isLoading={isWatchlistLoading}
+              onClick={onWatchlistToggle || (() => {})}
+              colorScheme="gold"
+              size="sm"
+            />
+            <Tooltip label="分享" placement="top">
+              <IconButton
+                aria-label="分享"
+                icon={<Share2 size={18} />}
+                variant="ghost"
+                color={labelColor}
+                size="sm"
+                onClick={handleShare}
+                _hover={{ bg: 'whiteAlpha.100' }}
+              />
+            </Tooltip>
+            <Text fontSize="14px" color={labelColor}>
+              {data.updateTime.split(' ')[1]}
             </Text>
-            <Text fontSize="24px" fontWeight="bold" color={labelColor}>
-              ({data.code})
-            </Text>
-            {data.indexTags.map((tag) => (
-              <Badge
-                key={tag}
-                variant="outline"
-                borderColor={borderColor}
-                color={labelColor}
-                fontSize="14px"
-                px={2}
-              >
-                {tag}
-              </Badge>
-            ))}
           </HStack>
-          <Text fontSize="14px" color={labelColor}>
-            更新时间：{data.updateTime}
-          </Text>
         </Flex>
 
         {/* 三栏布局 */}
@@ -124,19 +153,35 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
                 {formatChangePercent(data.changePercent)}
               </Badge>
             </HStack>
-            <HStack spacing={6} fontSize="14px">
+            {/* 次要行情：今开 | 昨收 | 最高 | 最低 */}
+            <HStack spacing={4} fontSize="14px" flexWrap="wrap">
               <Text color={labelColor}>
                 今开：
-                <Text as="span" color={valueColor} fontWeight="bold" fontSize="16px">
+                <Text as="span" color={valueColor} fontWeight="bold">
                   {formatPrice(data.todayOpen)}
                 </Text>
               </Text>
+              <Text color={borderColor}>|</Text>
               <Text color={labelColor}>
                 昨收：
-                <Text as="span" color={valueColor} fontWeight="bold" fontSize="16px">
+                <Text as="span" color={valueColor} fontWeight="bold">
                   {formatPrice(data.yesterdayClose)}
                 </Text>
               </Text>
+              <Text color={borderColor}>|</Text>
+              <Text color={labelColor}>
+                最高：
+                <Text as="span" color={upColor} fontWeight="bold">
+                  {formatPrice(data.todayHigh)}
+                </Text>
+              </Text>
+              <Text color={borderColor}>|</Text>
+              <Text color={labelColor}>
+                最低：
+                <Text as="span" color={downColor} fontWeight="bold">
+                  {formatPrice(data.todayLow)}
+                </Text>
+              </Text>
             </HStack>
           </Box>
 

src/views/Company/components/StockQuoteCard/mockData.ts

@@ -14,6 +14,8 @@ export const mockStockQuoteData: StockQuoteCardData = {
   changePercent: 3.65,
   todayOpen: 2156.0,
   yesterdayClose: 2101.0,
+  todayHigh: 2185.0,
+  todayLow: 2150.0,
 
   // 关键指标
   pe: 38.62,
@@ -30,4 +32,7 @@ export const mockStockQuoteData: StockQuoteCardData = {
 
   // 更新时间
   updateTime: '2025-12-03 14:30:25',
+
+  // 自选状态
+  isFavorite: false,
 };

src/views/Company/components/StockQuoteCard/types.ts

@@ -16,6 +16,8 @@ export interface StockQuoteCardData {
   changePercent: number; // 涨跌幅（百分比，如 3.65 表示 +3.65%）
   todayOpen: number; // 今开
   yesterdayClose: number; // 昨收
+  todayHigh: number; // 今日最高
+  todayLow: number; // 今日最低
 
   // 关键指标
   pe: number; // 市盈率
@@ -32,6 +34,9 @@ export interface StockQuoteCardData {
 
   // 更新时间
   updateTime: string; // 格式：YYYY-MM-DD HH:mm:ss
+
+  // 自选状态
+  isFavorite?: boolean; // 是否已加入自选
 }
 
 /**
@@ -40,4 +45,10 @@ export interface StockQuoteCardData {
 export interface StockQuoteCardProps {
   data?: StockQuoteCardData;
   isLoading?: boolean;
+  // 自选股相关（与 WatchlistButton 接口保持一致）
+  isInWatchlist?: boolean; // 是否在自选股中
+  isWatchlistLoading?: boolean; // 自选股操作加载中
+  onWatchlistToggle?: () => void; // 自选股切换回调
+  // 分享
+  onShare?: () => void; // 分享回调
 }