From d27cf5b7d889c39140333d433fbf8a791edb3ba7 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Tue, 16 Dec 2025 15:19:40 +0800
Subject: [PATCH] =?UTF-8?q?style(StockSummaryCard):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E9=BB=91=E9=87=91=E4=B8=BB=E9=A2=98=E5=8E=9F=E5=AD=90=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/StockSummaryCard/MetricCard.tsx |  4 ++--
 .../StockSummaryCard/StockHeaderCard.tsx       | 18 +++++++++---------
 .../StockSummaryCard/atoms/CardTitle.tsx       |  8 ++++----
 .../StockSummaryCard/atoms/DarkGoldCard.tsx    |  8 ++++----
 .../StockSummaryCard/atoms/MetricValue.tsx     |  6 +++---
 .../components/StockSummaryCard/index.tsx      | 16 ++++++++--------
 6 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/views/Company/components/MarketDataView/components/StockSummaryCard/MetricCard.tsx b/src/views/Company/components/MarketDataView/components/StockSummaryCard/MetricCard.tsx
index 3ffc1e88..8be9af42 100644
--- a/src/views/Company/components/MarketDataView/components/StockSummaryCard/MetricCard.tsx
+++ b/src/views/Company/components/MarketDataView/components/StockSummaryCard/MetricCard.tsx
@@ -38,7 +38,7 @@ const MetricCard: React.FC<MetricCardProps> = ({
       rightIcon={rightIcon}
     />
 
-    <VStack align="start" spacing={1} mb={3}>
+    <VStack align="start" spacing={0.5} mb={2}>
       <MetricValue
         label={mainLabel}
         value={mainValue}
@@ -47,7 +47,7 @@ const MetricCard: React.FC<MetricCardProps> = ({
       />
     </VStack>
 
-    <Box color={darkGoldTheme.textMuted} fontSize="sm">
+    <Box color={darkGoldTheme.textMuted} fontSize="xs">
       {subText}
     </Box>
   </DarkGoldCard>
diff --git a/src/views/Company/components/MarketDataView/components/StockSummaryCard/StockHeaderCard.tsx b/src/views/Company/components/MarketDataView/components/StockSummaryCard/StockHeaderCard.tsx
index 35e2f2e2..8d7a339f 100644
--- a/src/views/Company/components/MarketDataView/components/StockSummaryCard/StockHeaderCard.tsx
+++ b/src/views/Company/components/MarketDataView/components/StockSummaryCard/StockHeaderCard.tsx
@@ -41,43 +41,43 @@ const StockHeaderCard: React.FC<StockHeaderCardProps> = ({
       />
 
       {/* 股票名称和代码 */}
-      <HStack spacing={2} mb={3}>
+      <HStack spacing={1.5} mb={2}>
         <Text
           color={darkGoldTheme.textPrimary}
-          fontSize="xl"
+          fontSize="md"
           fontWeight="bold"
         >
           {stockName}
         </Text>
-        <Text color={darkGoldTheme.textMuted} fontSize="md">
+        <Text color={darkGoldTheme.textMuted} fontSize="xs">
           ({stockCode})
         </Text>
       </HStack>
 
       {/* 价格和涨跌幅 */}
-      <HStack spacing={3} align="baseline" mb={2}>
+      <HStack spacing={2} align="baseline" mb={1.5}>
         <Text
           color={priceColor}
-          fontSize="4xl"
+          fontSize="2xl"
           fontWeight="bold"
           lineHeight="1"
         >
           {price.toFixed(2)}
         </Text>
-        <HStack spacing={1} align="center">
+        <HStack spacing={0.5} align="center">
           <Icon
             as={isUp ? TrendingUp : TrendingDown}
             color={priceColor}
-            boxSize={5}
+            boxSize={3}
           />
-          <Text color={priceColor} fontSize="lg" fontWeight="bold">
+          <Text color={priceColor} fontSize="sm" fontWeight="bold">
             {isUp ? '+' : ''}{changePercent.toFixed(2)}%
           </Text>
         </HStack>
       </HStack>
 
       {/* 走势简述 */}
-      <Text color={darkGoldTheme.textMuted} fontSize="sm">
+      <Text color={darkGoldTheme.textMuted} fontSize="xs">
         走势简述：
         <Text as="span" color={priceColor} fontWeight="medium">
           {trendDesc}
diff --git a/src/views/Company/components/MarketDataView/components/StockSummaryCard/atoms/CardTitle.tsx b/src/views/Company/components/MarketDataView/components/StockSummaryCard/atoms/CardTitle.tsx
index f99da16c..1cd5d2cd 100644
--- a/src/views/Company/components/MarketDataView/components/StockSummaryCard/atoms/CardTitle.tsx
+++ b/src/views/Company/components/MarketDataView/components/StockSummaryCard/atoms/CardTitle.tsx
@@ -19,13 +19,13 @@ const CardTitle: React.FC<CardTitleProps> = ({
   leftIcon,
   rightIcon,
 }) => (
-  <Flex justify="space-between" align="center" mb={4}>
-    <HStack spacing={2}>
+  <Flex justify="space-between" align="center" mb={2}>
+    <HStack spacing={1.5}>
       <Box color={darkGoldTheme.gold}>{leftIcon}</Box>
-      <Text color={darkGoldTheme.gold} fontSize="lg" fontWeight="bold">
+      <Text color={darkGoldTheme.gold} fontSize="sm" fontWeight="bold">
         {title}
       </Text>
-      <Text color={darkGoldTheme.textMuted} fontSize="sm">
+      <Text color={darkGoldTheme.textMuted} fontSize="xs">
         ({subtitle})
       </Text>
     </HStack>
diff --git a/src/views/Company/components/MarketDataView/components/StockSummaryCard/atoms/DarkGoldCard.tsx b/src/views/Company/components/MarketDataView/components/StockSummaryCard/atoms/DarkGoldCard.tsx
index 6d4493e9..e7992070 100644
--- a/src/views/Company/components/MarketDataView/components/StockSummaryCard/atoms/DarkGoldCard.tsx
+++ b/src/views/Company/components/MarketDataView/components/StockSummaryCard/atoms/DarkGoldCard.tsx
@@ -18,18 +18,18 @@ const DarkGoldCard: React.FC<DarkGoldCardProps> = ({
 }) => (
   <Box
     bg={darkGoldTheme.bgCard}
-    borderRadius="xl"
+    borderRadius="lg"
     border="1px solid"
     borderColor={darkGoldTheme.border}
-    p={5}
+    p={3}
     transition="all 0.3s ease"
     _hover={
       hoverable
         ? {
             bg: darkGoldTheme.bgCardHover,
             borderColor: darkGoldTheme.borderHover,
-            transform: 'translateY(-2px)',
-            boxShadow: '0 8px 24px rgba(0, 0, 0, 0.4)',
+            transform: 'translateY(-1px)',
+            boxShadow: '0 4px 16px rgba(0, 0, 0, 0.4)',
           }
         : undefined
     }
diff --git a/src/views/Company/components/MarketDataView/components/StockSummaryCard/atoms/MetricValue.tsx b/src/views/Company/components/MarketDataView/components/StockSummaryCard/atoms/MetricValue.tsx
index 4a7a9855..987fa4e4 100644
--- a/src/views/Company/components/MarketDataView/components/StockSummaryCard/atoms/MetricValue.tsx
+++ b/src/views/Company/components/MarketDataView/components/StockSummaryCard/atoms/MetricValue.tsx
@@ -12,9 +12,9 @@ interface MetricValueProps {
 }
 
 const sizeMap = {
-  sm: { label: 'sm', value: '2xl', suffix: 'md' },
-  md: { label: 'md', value: '3xl', suffix: 'lg' },
-  lg: { label: 'md', value: '4xl', suffix: 'xl' },
+  sm: { label: 'xs', value: 'lg', suffix: 'sm' },
+  md: { label: 'xs', value: 'xl', suffix: 'md' },
+  lg: { label: 'xs', value: '2xl', suffix: 'md' },
 };
 
 /**
diff --git a/src/views/Company/components/MarketDataView/components/StockSummaryCard/index.tsx b/src/views/Company/components/MarketDataView/components/StockSummaryCard/index.tsx
index 4a5b7164..bd1ba208 100644
--- a/src/views/Company/components/MarketDataView/components/StockSummaryCard/index.tsx
+++ b/src/views/Company/components/MarketDataView/components/StockSummaryCard/index.tsx
@@ -31,7 +31,7 @@ const StockSummaryCard: React.FC<StockSummaryCardProps> = ({ summary }) => {
     : { text: '-', color: darkGoldTheme.textMuted };
 
   return (
-    <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={4}>
+    <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={3}>
       {/* 卡片1: 股票信息 */}
       {latest_trade && (
         <StockHeaderCard
@@ -45,8 +45,8 @@ const StockSummaryCard: React.FC<StockSummaryCardProps> = ({ summary }) => {
         <MetricCard
           title="交易热度"
           subtitle="流动性"
-          leftIcon={<Flame size={22} />}
-          rightIcon={<Coins size={22} />}
+          leftIcon={<Flame size={14} />}
+          rightIcon={<Coins size={14} />}
           mainLabel="成交额"
           mainValue={latest_trade ? formatNumber(latest_trade.amount) : '-'}
           mainColor={darkGoldTheme.orange}
@@ -68,13 +68,13 @@ const StockSummaryCard: React.FC<StockSummaryCardProps> = ({ summary }) => {
         <MetricCard
           title="估值 VS 安全"
           subtitle="便宜否"
-          leftIcon={<DollarSign size={22} />}
-          rightIcon={<Shield size={22} />}
+          leftIcon={<DollarSign size={14} />}
+          rightIcon={<Shield size={14} />}
           mainLabel="市盈率(PE)"
           mainValue={latest_trade?.pe_ratio?.toFixed(2) || '-'}
           mainColor={darkGoldTheme.orange}
           subText={
-            <VStack align="start" spacing={1}>
+            <VStack align="start" spacing={0.5}>
               <Text color={peStatus.color} fontWeight="medium">
                 {peStatus.text}
               </Text>
@@ -92,14 +92,14 @@ const StockSummaryCard: React.FC<StockSummaryCardProps> = ({ summary }) => {
         <MetricCard
           title="情绪与风险"
           subtitle="资金面"
-          leftIcon={<Flame size={22} />}
+          leftIcon={<Flame size={14} />}
           mainLabel="融资余额"
           mainValue={latest_funding ? formatNumber(latest_funding.financing_balance) : '-'}
           mainColor={darkGoldTheme.green}
           subText={
             <VStack align="start" spacing={0}>
               <Text color={darkGoldTheme.textMuted}>(强调做多力量)</Text>
-              <HStack spacing={1} flexWrap="wrap" mt={1}>
+              <HStack spacing={1} flexWrap="wrap" mt={0.5}>
                 <Text>
                   融券 {latest_funding ? formatNumber(latest_funding.securities_balance) : '-'}
                 </Text>