From 9423094af2174de379aa184e793131350fad96fc Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Tue, 9 Dec 2025 19:26:52 +0800
Subject: [PATCH] =?UTF-8?q?pref:=20=E7=A7=BB=E9=99=A4=20useColorModeValue?=
 =?UTF-8?q?=20UI=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CompanyHeader/SearchBar.js     |  8 +++-
 .../Company/components/CompanyHeader/index.js | 14 +------
 .../components/CompanyTabs/TabNavigation.js   | 38 ++++++++++++-------
 .../Company/components/CompanyTabs/index.js   |  9 ++---
 .../components/StockQuoteCard/index.tsx       |  6 +--
 src/views/Company/index.js                    | 12 ++----
 6 files changed, 44 insertions(+), 43 deletions(-)

diff --git a/src/views/Company/components/CompanyHeader/SearchBar.js b/src/views/Company/components/CompanyHeader/SearchBar.js
index ed556ad1..ce0aa93b 100644
--- a/src/views/Company/components/CompanyHeader/SearchBar.js
+++ b/src/views/Company/components/CompanyHeader/SearchBar.js
@@ -38,6 +38,8 @@ const SearchBar = ({
           onChange={(e) => onInputChange(e.target.value)}
           onKeyPress={onKeyPress}
           borderRadius="md"
+          color="white"
+          _placeholder={{ color: 'whiteAlpha.600' }}
           _focus={{
             borderColor: 'blue.500',
             boxShadow: '0 0 0 1px #3182ce',
@@ -45,10 +47,14 @@ const SearchBar = ({
         />
       </InputGroup>
       <Button
-        colorScheme="blue"
         size="lg"
         onClick={onSearch}
         leftIcon={<SearchIcon />}
+        bg="#1A202C"
+        color="#C9A961"
+        borderWidth="1px"
+        borderColor="#C9A961"
+        _hover={{ bg: '#1a1a1a' }}
       >
         查询
       </Button>
diff --git a/src/views/Company/components/CompanyHeader/index.js b/src/views/Company/components/CompanyHeader/index.js
index e46c7e30..6a1d3d8a 100644
--- a/src/views/Company/components/CompanyHeader/index.js
+++ b/src/views/Company/components/CompanyHeader/index.js
@@ -52,8 +52,8 @@ const CompanyHeader = ({
         <HStack justify="space-between" align="center">
           {/* 标题区域 */}
           <VStack align="start" spacing={1}>
-            <Heading size="lg">个股详情</Heading>
-            <Text color="gray.600" fontSize="sm">
+            <Heading size="lg" color="white">个股详情</Heading>
+            <Text color="white" fontSize="sm">
               查看股票实时行情、财务数据和盈利预测
             </Text>
           </VStack>
@@ -76,16 +76,6 @@ const CompanyHeader = ({
             />
           </HStack>
         </HStack>
-
-        {/* 当前股票信息 */}
-        <HStack mt={4} spacing={4}>
-          <Badge colorScheme="blue" fontSize="md" px={3} py={1}>
-            股票代码: {stockCode}
-          </Badge>
-          <Text fontSize="sm" color="gray.600">
-            更新时间: {new Date().toLocaleString()}
-          </Text>
-        </HStack>
       </CardBody>
     </Card>
   );
diff --git a/src/views/Company/components/CompanyTabs/TabNavigation.js b/src/views/Company/components/CompanyTabs/TabNavigation.js
index bfdf7c4c..1abd9f9d 100644
--- a/src/views/Company/components/CompanyTabs/TabNavigation.js
+++ b/src/views/Company/components/CompanyTabs/TabNavigation.js
@@ -1,5 +1,5 @@
 // src/views/Company/components/CompanyTabs/TabNavigation.js
-// Tab 导航组件 - 动态渲染 Tab 按钮
+// Tab 导航组件 - 动态渲染 Tab 按钮（黑金主题）
 
 import React from 'react';
 import {
@@ -10,31 +10,41 @@ import {
   Text,
 } from '@chakra-ui/react';
 
-import { COMPANY_TABS, TAB_SELECTED_STYLE } from '../../constants';
+import { COMPANY_TABS } from '../../constants';
+
+// 黑金主题颜色配置
+const THEME_COLORS = {
+  bg: '#1A202C',           // 背景纯黑
+  selectedBg: '#C9A961',   // 选中项金色背景
+  selectedText: '#FFFFFF', // 选中项白色文字
+  unselectedText: '#999999', // 未选中项深灰色
+};
 
 /**
- * Tab 导航组件
- *
- * @param {Object} props
- * @param {string} props.tabBg - Tab 列表背景色
- * @param {string} props.activeBg - 激活状态背景色
+ * Tab 导航组件（黑金主题）
  */
-const TabNavigation = ({ tabBg, activeBg }) => {
+const TabNavigation = () => {
   return (
-    <TabList p={4} bg={tabBg}>
+    <TabList py={4} bg={THEME_COLORS.bg} borderTopLeftRadius="16px" borderTopRightRadius="16px">
       {COMPANY_TABS.map((tab, index) => (
         <Tab
           key={tab.key}
+          color={THEME_COLORS.unselectedText}
+          borderRadius="full"
+          px={4}
+          py={2}
           _selected={{
-            bg: activeBg,
-            color: 'white',
-            ...TAB_SELECTED_STYLE,
+            bg: THEME_COLORS.selectedBg,
+            color: THEME_COLORS.selectedText,
+          }}
+          _hover={{
+            color: THEME_COLORS.selectedText,
           }}
           mr={index < COMPANY_TABS.length - 1 ? 2 : 0}
         >
           <HStack spacing={2}>
-            <Icon as={tab.icon} />
-            <Text>{tab.name}</Text>
+            <Icon as={tab.icon} boxSize="18px" />
+            <Text fontSize="15px">{tab.name}</Text>
           </HStack>
         </Tab>
       ))}
diff --git a/src/views/Company/components/CompanyTabs/index.js b/src/views/Company/components/CompanyTabs/index.js
index 652f7783..3e7ee98f 100644
--- a/src/views/Company/components/CompanyTabs/index.js
+++ b/src/views/Company/components/CompanyTabs/index.js
@@ -46,9 +46,8 @@ const TAB_COMPONENTS = {
  * @param {Object} props
  * @param {string} props.stockCode - 当前股票代码
  * @param {Function} props.onTabChange - Tab 变更回调 (index, tabName, prevIndex) => void
- * @param {string} props.bgColor - 背景颜色
  */
-const CompanyTabs = ({ stockCode, onTabChange, bgColor }) => {
+const CompanyTabs = ({ stockCode, onTabChange }) => {
   const [currentIndex, setCurrentIndex] = useState(0);
 
   /**
@@ -65,7 +64,7 @@ const CompanyTabs = ({ stockCode, onTabChange, bgColor }) => {
   };
 
   return (
-    <Card bg={bgColor} shadow="lg">
+    <Card shadow="lg" bg='#1A202C'>
       <CardBody p={0}>
         <Tabs
           variant="soft-rounded"
@@ -74,8 +73,8 @@ const CompanyTabs = ({ stockCode, onTabChange, bgColor }) => {
           index={currentIndex}
           onChange={handleTabChange}
         >
-          {/* Tab 导航 */}
-          <TabNavigation tabBg="gray.50" activeBg="blue.500" />
+          {/* Tab 导航（黑金主题） */}
+          <TabNavigation />
 
           <Divider />
 
diff --git a/src/views/Company/components/StockQuoteCard/index.tsx b/src/views/Company/components/StockQuoteCard/index.tsx
index aa00053d..e8477b89 100644
--- a/src/views/Company/components/StockQuoteCard/index.tsx
+++ b/src/views/Company/components/StockQuoteCard/index.tsx
@@ -52,7 +52,7 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
   isLoading = false,
 }) => {
   // 黑金主题颜色配置
-  const cardBg = '#000000';
+  const cardBg = '#1A202C';
   const borderColor = '#C9A961';
   const labelColor = '#C9A961';
   const valueColor = '#F4D03F';
@@ -76,9 +76,9 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
 
   return (
     <Card bg={cardBg} shadow="sm" borderWidth="1px" borderColor={borderColor}>
-      <CardBody py={4} px={6}>
+      <CardBody>
         {/* 顶部：股票名称 + 更新时间 */}
-        <Flex justify="space-between" align="center" mb={4}>
+        <Flex justify="space-between" align="center">
           <HStack spacing={3}>
             <Text fontSize="24px" fontWeight="bold" color={valueColor}>
               {data.name}
diff --git a/src/views/Company/index.js b/src/views/Company/index.js
index bd40e48a..850d9695 100644
--- a/src/views/Company/index.js
+++ b/src/views/Company/index.js
@@ -64,8 +64,8 @@ const CompanyIndex = () => {
   }, [stockCode, trackStockSearched]);
 
   return (
-    <Container maxW="container.xl" py={5}>
-      <VStack align="stretch" spacing={5}>
+    <Container maxW="container.xl" py={0} bg='#1A202C'>
+      <VStack align="stretch" spacing={0}>
         {/* 页面头部：标题、搜索、自选股按钮 */}
         <CompanyHeader
           stockCode={stockCode}
@@ -76,18 +76,14 @@ const CompanyIndex = () => {
           isInWatchlist={isInWatchlist}
           isWatchlistLoading={isWatchlistLoading}
           onWatchlistToggle={handleWatchlistToggle}
-          bgColor="white"
+          bgColor="#1A202C"
         />
 
         {/* 股票行情卡片：价格、关键指标、主力动态 */}
         <StockQuoteCard />
 
         {/* Tab 切换区域：概览、行情、财务、预测 */}
-        <CompanyTabs
-          stockCode={stockCode}
-          onTabChange={trackTabChanged}
-          bgColor="white"
-        />
+        <CompanyTabs stockCode={stockCode} onTabChange={trackTabChanged}  bgColor="#1A202C"/>
       </VStack>
     </Container>
   );