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

使用 ml="auto" 确保切换按钮在流向关系视图时保持右侧位置 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
refactor(CompanyOverview): 优化多个面板显示逻辑
2025-12-16 20:53:08 +08:00 · 2025-12-16 20:51:27 +08:00 · 2025-12-16 20:43:05 +08:00
5 changed files with 43 additions and 79 deletions
--- a/src/views/Company/components/CompanyOverview/BasicInfoTab/components/AnnouncementsPanel.tsx
+++ b/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
--- a/src/views/Company/components/CompanyOverview/BasicInfoTab/components/DisclosureSchedulePanel.tsx
+++ b/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
--- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/CompetitiveAnalysisCard.tsx
+++ b/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
--- a/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/ValueChainCard.tsx
+++ b/src/views/Company/components/CompanyOverview/DeepAnalysisTab/components/ValueChainCard.tsx
@@ -155,24 +155,28 @@ const ValueChainCard: React.FC<ValueChainCardProps> = memo(({
          align="center"
          flexWrap="wrap"
        >
-          {/* 左侧：流程式导航 */}
-          <ProcessNavigation
-            activeTab={activeTab}
-            onTabChange={setActiveTab}
-            upstreamCount={upstreamNodes.length}
-            coreCount={coreNodes.length}
-            downstreamCount={downstreamNodes.length}
-          />
+          {/* 左侧：流程式导航 - 仅在层级视图显示 */}
+          {viewMode === 'hierarchy' && (
+            <ProcessNavigation
+              activeTab={activeTab}
+              onTabChange={setActiveTab}
+              upstreamCount={upstreamNodes.length}
+              coreCount={coreNodes.length}
+              downstreamCount={downstreamNodes.length}
+            />
+          )}

-          {/* 右侧：筛选与视图切换 */}
-          <ValueChainFilterBar
-            typeFilter={typeFilter}
-            onTypeChange={setTypeFilter}
-            importanceFilter={importanceFilter}
-            onImportanceChange={setImportanceFilter}
-            viewMode={viewMode}
-            onViewModeChange={setViewMode}
-          />
+          {/* 右侧：筛选与视图切换 - 始终靠右 */}
+          <Box ml="auto">
+            <ValueChainFilterBar
+              typeFilter={typeFilter}
+              onTypeChange={setTypeFilter}
+              importanceFilter={importanceFilter}
+              onImportanceChange={setImportanceFilter}
+              viewMode={viewMode}
+              onViewModeChange={setViewMode}
+            />
+          </Box>
        </Flex>

        {/* 内容区域 */}
--- a/src/views/Company/components/ForecastReport/components/DetailTable.tsx
+++ b/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">
-        <h4>详细数据表格</h4>
-      </div>
-      <div className="table-body">
-        <ConfigProvider theme={BLACK_GOLD_THEME}>
-          <Table<TableRowData>
-            columns={columns}
-            dataSource={dataSource}
-            pagination={false}
-            size="small"
-            scroll={{ x: 'max-content' }}
-            bordered
-          />
-        </ConfigProvider>
-      </div>
-    </div>
+      <Text fontSize="md" fontWeight="bold" color="#D4AF37" mb={3}>
+        详细数据表格
+      </Text>
+      <ConfigProvider theme={BLACK_GOLD_THEME}>
+        <Table<TableRowData>
+          columns={columns}
+          dataSource={dataSource}
+          pagination={false}
+          size="small"
+          scroll={{ x: 'max-content' }}
+          bordered
+        />
+      </ConfigProvider>
+    </Box>
  );
 };