fix(ValueChainCard): 视图切换按钮始终靠右显示

使用 ml="auto" 确保切换按钮在流向关系视图时保持右侧位置

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/views/Company/components/CompanyOverview/BasicInfoTab/components/AnnouncementsPanel.tsx

@@ -8,7 +8,6 @@ import {
   HStack,
   Text,
   Badge,
-  Icon,
   Card,
   CardBody,
   IconButton,
@@ -23,7 +22,6 @@ import {
   ModalFooter,
   useDisclosure,
 } from "@chakra-ui/react";
-import { FaBullhorn } from "react-icons/fa";
 import { ExternalLinkIcon } from "@chakra-ui/icons";
 
 import { useAnnouncementsData } from "../../hooks/useAnnouncementsData";
@@ -55,10 +53,6 @@ const AnnouncementsPanel: React.FC<AnnouncementsPanelProps> = ({ stockCode }) =>
       <VStack spacing={4} align="stretch">
         {/* 最新公告 */}
         <Box>
-          <HStack mb={3}>
-            <Icon as={FaBullhorn} color={THEME.gold} />
-            <Text fontWeight="bold" color={THEME.textPrimary}>最新公告</Text>
-          </HStack>
           <VStack spacing={2} align="stretch">
             {announcements.map((announcement: any, idx: number) => (
               <Card

src/views/Company/components/CompanyOverview/BasicInfoTab/components/DisclosureSchedulePanel.tsx

@@ -5,15 +5,12 @@ import React from "react";
 import {
   Box,
   VStack,
-  HStack,
   Text,
   Badge,
-  Icon,
   Card,
   CardBody,
   SimpleGrid,
 } from "@chakra-ui/react";
-import { FaCalendarAlt } from "react-icons/fa";
 
 import { useDisclosureData } from "../../hooks/useDisclosureData";
 import { THEME } from "../config";
@@ -42,10 +39,6 @@ const DisclosureSchedulePanel: React.FC<DisclosureSchedulePanelProps> = ({ stock
   return (
     <VStack spacing={4} align="stretch">
       <Box>
-        <HStack mb={3}>
-          <Icon as={FaCalendarAlt} color={THEME.gold} />
-          <Text fontWeight="bold" color={THEME.textPrimary}>财报披露日程</Text>
-        </HStack>
         <SimpleGrid columns={{ base: 2, md: 4 }} spacing={3}>
           {disclosureSchedule.map((schedule: any, idx: number) => (
             <Card

src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/CompetitiveAnalysisCard.tsx

@@ -234,10 +234,10 @@ const CompetitiveAnalysisCard: React.FC<CompetitiveAnalysisCardProps> = memo(
           </CardHeader>
           <CardBody>
             {/* 主要竞争对手 */}
-            {/* {competitors.length > 0 && <CompetitorTags competitors={competitors} />} */}
+            {competitors.length > 0 && <CompetitorTags competitors={competitors} />}
 
             {/* 评分和雷达图 */}
-            {/* <Grid templateColumns="repeat(2, 1fr)" gap={6}>
+            <Grid templateColumns="repeat(2, 1fr)" gap={6}>
               <GridItem colSpan={GRID_COLSPAN}>
                 <ScoreSection scores={competitivePosition.scores} />
               </GridItem>
@@ -251,9 +251,9 @@ const CompetitiveAnalysisCard: React.FC<CompetitiveAnalysisCardProps> = memo(
                   />
                 )}
               </GridItem>
-            </Grid> */}
+            </Grid>
 
-            {/* <Divider my={4} borderColor="yellow.600" /> */}
+            <Divider my={4} borderColor="yellow.600" />
 
             {/* 竞争优势和劣势 */}
             <AdvantagesSection

src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/ValueChainCard.tsx

@@ -155,24 +155,28 @@ const ValueChainCard: React.FC<ValueChainCardProps> = memo(({
           align="center"
           flexWrap="wrap"
         >
-          {/* 左侧：流程式导航 */}
+          {/* 左侧：流程式导航 - 仅在层级视图显示 */}
-          <ProcessNavigation
+          {viewMode === 'hierarchy' && (
-            activeTab={activeTab}
+            <ProcessNavigation
-            onTabChange={setActiveTab}
+              activeTab={activeTab}
-            upstreamCount={upstreamNodes.length}
+              onTabChange={setActiveTab}
-            coreCount={coreNodes.length}
+              upstreamCount={upstreamNodes.length}
-            downstreamCount={downstreamNodes.length}
+              coreCount={coreNodes.length}
-          />
+              downstreamCount={downstreamNodes.length}
+            />
+          )}
 
-          {/* 右侧：筛选与视图切换 */}
+          {/* 右侧：筛选与视图切换 - 始终靠右 */}
-          <ValueChainFilterBar
+          <Box ml="auto">
-            typeFilter={typeFilter}
+            <ValueChainFilterBar
-            onTypeChange={setTypeFilter}
+              typeFilter={typeFilter}
-            importanceFilter={importanceFilter}
+              onTypeChange={setTypeFilter}
-            onImportanceChange={setImportanceFilter}
+              importanceFilter={importanceFilter}
-            viewMode={viewMode}
+              onImportanceChange={setImportanceFilter}
-            onViewModeChange={setViewMode}
+              viewMode={viewMode}
-          />
+              onViewModeChange={setViewMode}
+            />
+          </Box>
         </Flex>
 
         {/* 内容区域 */}

src/views/Company/components/ForecastReport/components/DetailTable.tsx

@@ -1,8 +1,9 @@
 /**
- * 详细数据表格 - 纯 Ant Design 黑金主题
+ * 详细数据表格 - 黑金主题
  */
 
 import React, { useMemo } from 'react';
+import { Box, Text } from '@chakra-ui/react';
 import { Table, ConfigProvider, Tag, theme as antTheme } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import type { DetailTableProps, DetailTableRow } from '../types';
@@ -12,7 +13,7 @@ const BLACK_GOLD_THEME = {
   algorithm: antTheme.darkAlgorithm,
   token: {
     colorPrimary: '#D4AF37',
-    colorBgContainer: '#1A202C',
+    colorBgContainer: 'transparent',
     colorBgElevated: '#1a1a2e',
     colorBorder: 'rgba(212, 175, 55, 0.3)',
     colorText: '#e0e0e0',
@@ -34,26 +35,6 @@ const BLACK_GOLD_THEME = {
 
 // 表格样式
 const tableStyles = `
-  .forecast-detail-table {
-    background: #1A202C;
-    border: 1px solid rgba(212, 175, 55, 0.3);
-    border-radius: 6px;
-    overflow: hidden;
-  }
-  .forecast-detail-table .table-header {
-    padding: 12px 16px;
-    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
-    background: rgba(212, 175, 55, 0.1);
-  }
-  .forecast-detail-table .table-header h4 {
-    margin: 0;
-    color: #D4AF37;
-    font-size: 14px;
-    font-weight: 600;
-  }
-  .forecast-detail-table .table-body {
-    padding: 16px;
-  }
   .forecast-detail-table .ant-table-cell-fix-left,
   .forecast-detail-table .ant-table-cell-fix-right {
     background: #1A202C !important;
@@ -62,15 +43,9 @@ const tableStyles = `
   .forecast-detail-table .ant-table-thead .ant-table-cell-fix-right {
     background: rgba(26, 32, 44, 0.95) !important;
   }
-  .forecast-detail-table .ant-table-tbody > tr:hover > td {
-    background: rgba(212, 175, 55, 0.08) !important;
-  }
   .forecast-detail-table .ant-table-tbody > tr:hover > td.ant-table-cell-fix-left {
     background: #242d3d !important;
   }
-  .forecast-detail-table .ant-table-tbody > tr > td {
-    background: #1A202C !important;
-  }
   .forecast-detail-table .metric-tag {
     background: rgba(212, 175, 55, 0.15);
     border-color: rgba(212, 175, 55, 0.3);
@@ -124,24 +99,22 @@ const DetailTable: React.FC<DetailTableProps> = ({ data }) => {
   }, [rows]);
 
   return (
-    <div className="forecast-detail-table">
+    <Box className="forecast-detail-table">
       <style>{tableStyles}</style>
-      <div className="table-header">
+      <Text fontSize="md" fontWeight="bold" color="#D4AF37" mb={3}>
-        <h4>详细数据表格</h4>
+        详细数据表格
-      </div>
+      </Text>
-      <div className="table-body">
+      <ConfigProvider theme={BLACK_GOLD_THEME}>
-        <ConfigProvider theme={BLACK_GOLD_THEME}>
+        <Table<TableRowData>
-          <Table<TableRowData>
+          columns={columns}
-            columns={columns}
+          dataSource={dataSource}
-            dataSource={dataSource}
+          pagination={false}
-            pagination={false}
+          size="small"
-            size="small"
+          scroll={{ x: 'max-content' }}
-            scroll={{ x: 'max-content' }}
+          bordered
-            bordered
+        />
-          />
+      </ConfigProvider>
-        </ConfigProvider>
+    </Box>
-      </div>
-    </div>
   );
 };