diff --git a/src/mocks/data/company.js b/src/mocks/data/company.js index 67207525..41184bea 100644 --- a/src/mocks/data/company.js +++ b/src/mocks/data/company.js @@ -70,66 +70,219 @@ export const PINGAN_BANK_DATA = { { stat_item: '前10大股东', holding_ratio: 62.93, ratio_change: -0.22, end_date: '2024-06-30' }, ], - // 高管信息 + // 高管信息(包含高管、董事、监事、其他) management: [ + // === 高管 === { name: '谢永林', - position: '董事长', + position_name: '董事长', + position_category: '高管', gender: '男', - age: 56, + birth_year: '1968', education: '硕士', - appointment_date: '2019-01-01', - annual_compensation: 723.8, - shareholding: 0, - background: '中国平安保险(集团)股份有限公司副总经理兼首席保险业务执行官', + nationality: '中国', + start_date: '2019-01-01', status: 'active' }, { name: '冀光恒', - position: '行长', + position_name: '行长', + position_category: '高管', gender: '男', - age: 52, + birth_year: '1972', education: '博士', - appointment_date: '2023-08-01', - annual_compensation: 650.5, - shareholding: 0, - background: '原中国工商银行总行部门总经理', + nationality: '中国', + start_date: '2023-08-01', status: 'active' }, { name: '周强', - position: '执行董事、副行长、董事会秘书', + position_name: '副行长、董事会秘书', + position_category: '高管', gender: '男', - age: 54, + birth_year: '1970', education: '硕士', - appointment_date: '2016-06-01', - annual_compensation: 542.3, - shareholding: 0.002, - background: '历任平安银行深圳分行行长', + nationality: '中国', + start_date: '2016-06-01', status: 'active' }, { name: '郭世邦', - position: '执行董事、副行长、首席财务官', + position_name: '副行长、首席财务官', + position_category: '高管', gender: '男', - age: 52, + birth_year: '1972', education: '博士', - appointment_date: '2018-03-01', - annual_compensation: 498.6, - shareholding: 0.001, - background: '历任中国平安集团财务负责人', + nationality: '中国', + start_date: '2018-03-01', status: 'active' }, { name: '项有志', - position: '副行长、首席信息官', + position_name: '副行长、首席信息官', + position_category: '高管', gender: '男', - age: 49, + birth_year: '1975', education: '硕士', - appointment_date: '2019-09-01', - annual_compensation: 425.1, - shareholding: 0, - background: '历任中国平安科技公司总经理', + nationality: '中国', + start_date: '2019-09-01', + status: 'active' + }, + { + name: '张小璐', + position_name: '副行长、首席风险官', + position_category: '高管', + gender: '女', + birth_year: '1973', + education: '硕士', + nationality: '中国', + start_date: '2020-03-15', + status: 'active' + }, + // === 董事 === + { + name: '马明哲', + position_name: '非执行董事', + position_category: '董事', + gender: '男', + birth_year: '1955', + education: '博士', + nationality: '中国', + start_date: '2012-06-15', + status: 'active' + }, + { + name: '孙建一', + position_name: '非执行董事', + position_category: '董事', + gender: '男', + birth_year: '1960', + education: '硕士', + nationality: '中国', + start_date: '2016-08-20', + status: 'active' + }, + { + name: '陈心颖', + position_name: '非执行董事', + position_category: '董事', + gender: '女', + birth_year: '1977', + education: '硕士', + nationality: '新加坡', + start_date: '2018-06-01', + status: 'active' + }, + { + name: '黄宝新', + position_name: '独立非执行董事', + position_category: '董事', + gender: '男', + birth_year: '1962', + education: '博士', + nationality: '中国', + start_date: '2019-06-20', + status: 'active' + }, + { + name: '王志良', + position_name: '独立非执行董事', + position_category: '董事', + gender: '男', + birth_year: '1958', + education: '博士', + nationality: '美国', + start_date: '2020-06-18', + status: 'active' + }, + { + name: '李曙光', + position_name: '独立非执行董事', + position_category: '董事', + gender: '男', + birth_year: '1963', + education: '博士', + nationality: '中国', + start_date: '2021-06-25', + status: 'active' + }, + // === 监事 === + { + name: '王选庆', + position_name: '监事会主席', + position_category: '监事', + gender: '男', + birth_year: '1965', + education: '硕士', + nationality: '中国', + start_date: '2017-06-15', + status: 'active' + }, + { + name: '杨峻', + position_name: '职工监事', + position_category: '监事', + gender: '男', + birth_year: '1970', + education: '本科', + nationality: '中国', + start_date: '2019-06-20', + status: 'active' + }, + { + name: '刘春华', + position_name: '外部监事', + position_category: '监事', + gender: '女', + birth_year: '1968', + education: '硕士', + nationality: '中国', + start_date: '2020-06-18', + status: 'active' + }, + { + name: '张伟民', + position_name: '外部监事', + position_category: '监事', + gender: '男', + birth_year: '1966', + education: '博士', + nationality: '中国', + start_date: '2021-06-25', + status: 'active' + }, + // === 其他 === + { + name: '陈敏', + position_name: '合规总监', + position_category: '其他', + gender: '女', + birth_year: '1975', + education: '硕士', + nationality: '中国', + start_date: '2018-09-01', + status: 'active' + }, + { + name: '李明', + position_name: '审计部总经理', + position_category: '其他', + gender: '男', + birth_year: '1978', + education: '硕士', + nationality: '中国', + start_date: '2019-03-15', + status: 'active' + }, + { + name: '王建国', + position_name: '法务部总经理', + position_category: '其他', + gender: '男', + birth_year: '1972', + education: '博士', + nationality: '中国', + start_date: '2017-06-01', status: 'active' } ], @@ -1033,11 +1186,24 @@ export const generateCompanyData = (stockCode, stockName = '示例公司') => { { stat_item: '前10大股东', holding_ratio: 72.18, ratio_change: -0.20, end_date: '2024-06-30' }, ], management: [ - { name: '张三', position: '董事长', gender: '男', age: 55, education: '硕士', annual_compensation: 320.5, status: 'active' }, - { name: '李四', position: '总经理', gender: '男', age: 50, education: '硕士', annual_compensation: 280.3, status: 'active' }, - { name: '王五', position: '董事会秘书', gender: '女', age: 45, education: '本科', annual_compensation: 180.2, status: 'active' }, - { name: '赵六', position: '财务总监', gender: '男', age: 48, education: '硕士', annual_compensation: 200.5, status: 'active' }, - { name: '钱七', position: '技术总监', gender: '男', age: 42, education: '博士', annual_compensation: 250.8, status: 'active' }, + // 高管 + { name: '张三', position_name: '董事长', position_category: '高管', gender: '男', birth_year: '1969', education: '硕士', nationality: '中国', start_date: '2018-06-01', status: 'active' }, + { name: '李四', position_name: '总经理', position_category: '高管', gender: '男', birth_year: '1974', education: '硕士', nationality: '中国', start_date: '2019-03-15', status: 'active' }, + { name: '王五', position_name: '董事会秘书', position_category: '高管', gender: '女', birth_year: '1979', education: '本科', nationality: '中国', start_date: '2020-01-10', status: 'active' }, + { name: '赵六', position_name: '财务总监', position_category: '高管', gender: '男', birth_year: '1976', education: '硕士', nationality: '中国', start_date: '2017-09-01', status: 'active' }, + { name: '钱七', position_name: '技术总监', position_category: '高管', gender: '男', birth_year: '1982', education: '博士', nationality: '中国', start_date: '2021-06-01', status: 'active' }, + // 董事 + { name: '孙八', position_name: '非执行董事', position_category: '董事', gender: '男', birth_year: '1965', education: '博士', nationality: '中国', start_date: '2016-06-15', status: 'active' }, + { name: '周九', position_name: '非执行董事', position_category: '董事', gender: '男', birth_year: '1968', education: '硕士', nationality: '中国', start_date: '2018-06-20', status: 'active' }, + { name: '吴十', position_name: '独立董事', position_category: '董事', gender: '女', birth_year: '1972', education: '博士', nationality: '美国', start_date: '2019-06-18', status: 'active' }, + { name: '郑十一', position_name: '独立董事', position_category: '董事', gender: '男', birth_year: '1970', education: '博士', nationality: '中国', start_date: '2020-06-25', status: 'active' }, + // 监事 + { name: '冯十二', position_name: '监事会主席', position_category: '监事', gender: '男', birth_year: '1967', education: '硕士', nationality: '中国', start_date: '2017-06-15', status: 'active' }, + { name: '陈十三', position_name: '职工监事', position_category: '监事', gender: '女', birth_year: '1975', education: '本科', nationality: '中国', start_date: '2019-06-20', status: 'active' }, + { name: '楚十四', position_name: '外部监事', position_category: '监事', gender: '男', birth_year: '1971', education: '硕士', nationality: '中国', start_date: '2020-06-18', status: 'active' }, + // 其他 + { name: '卫十五', position_name: '合规负责人', position_category: '其他', gender: '男', birth_year: '1978', education: '硕士', nationality: '中国', start_date: '2018-09-01', status: 'active' }, + { name: '蒋十六', position_name: '内审部负责人', position_category: '其他', gender: '女', birth_year: '1980', education: '硕士', nationality: '中国', start_date: '2019-03-15', status: 'active' }, ], topCirculationShareholders: [ { shareholder_rank: 1, shareholder_name: '某控股集团有限公司', holding_shares: 560000000, circulation_share_ratio: 35.50, shareholder_type: '法人', end_date: '2024-09-30' }, diff --git a/src/views/Company/components/CompanyOverview/CompanyHeaderCard.tsx b/src/views/Company/components/CompanyOverview/CompanyHeaderCard.tsx deleted file mode 100644 index 75f28176..00000000 --- a/src/views/Company/components/CompanyOverview/CompanyHeaderCard.tsx +++ /dev/null @@ -1,135 +0,0 @@ -// src/views/Company/components/CompanyOverview/CompanyHeaderCard.tsx -// 公司头部信息卡片组件 - 黑金主题 - -import React from "react"; -import { - VStack, - HStack, - Text, - Card, - CardBody, - Heading, - SimpleGrid, - Divider, - Icon, - Box, - Link, -} from "@chakra-ui/react"; -import { - FaBuilding, - FaMapMarkerAlt, - FaCalendarAlt, - FaGlobe, - FaCoins, -} from "react-icons/fa"; -import { ExternalLinkIcon } from "@chakra-ui/icons"; - -import type { CompanyHeaderCardProps } from "./types"; -import { formatRegisteredCapital, formatDate } from "./utils"; - -// 黑金主题色 -const THEME = { - bg: "gray.900", - cardBg: "gray.800", - gold: "#D4AF37", - goldLight: "#F0D78C", - textPrimary: "white", - textSecondary: "gray.400", - border: "rgba(212, 175, 55, 0.3)", -}; - -/** - * 公司头部信息卡片组件 - * 三区块布局:身份分类 | 关键属性 | 公司介绍 - * 黑金主题 - */ -const CompanyHeaderCard: React.FC = ({ basicInfo }) => { - return ( - - - - - {/* 区块二:关键属性网格 */} - - - - - 成立日期 - - {formatDate(basicInfo.establish_date)} - - - - - - - 注册资本 - - {formatRegisteredCapital(basicInfo.reg_capital)} - - - - - - - 所在地 - - {basicInfo.province} {basicInfo.city} - - - - - - - 官网 - - {basicInfo.website ? ( - <>访问官网 - ) : ( - "暂无" - )} - - - - - - - - {/* 区块三:公司介绍 */} - - - {basicInfo.company_intro} - - {basicInfo.company_intro && basicInfo.company_intro.length > 100 && ( - - 查看完整介绍 - - )} - - - - - ); -}; - -export default CompanyHeaderCard; diff --git a/src/views/Company/components/CompanyOverview/index.tsx b/src/views/Company/components/CompanyOverview/index.tsx index 8a499a42..936b1f71 100644 --- a/src/views/Company/components/CompanyOverview/index.tsx +++ b/src/views/Company/components/CompanyOverview/index.tsx @@ -1,57 +1,29 @@ // src/views/Company/components/CompanyOverview/index.tsx -// 公司概览 - 主组件(组合层) -// 懒加载优化:只加载头部卡片数据,BasicInfoTab 内部懒加载各 Tab 数据 +// 公司档案 - 主组件(组合层) import React from "react"; -import { VStack, Spinner, Center, Text } from "@chakra-ui/react"; +import { VStack } from "@chakra-ui/react"; import { useBasicInfo } from "./hooks/useBasicInfo"; -import CompanyHeaderCard from "./CompanyHeaderCard"; import type { CompanyOverviewProps } from "./types"; // 子组件(暂保持 JS) import BasicInfoTab from "./BasicInfoTab"; /** - * 公司概览组件 + * 公司档案组件 * * 功能: - * - 显示公司头部信息卡片(useBasicInfo) * - 显示基本信息 Tab(内部懒加载各子 Tab 数据) * * 懒加载策略: - * - 主组件只加载 basicInfo(1 个 API) - * - BasicInfoTab 内部根据 Tab 切换懒加载其他数据 + * - BasicInfoTab 内部根据 Tab 切换懒加载数据 */ const CompanyOverview: React.FC = ({ stockCode }) => { - const { basicInfo, loading, error } = useBasicInfo(stockCode); - - // 加载状态 - if (loading && !basicInfo) { - return ( -
- - - 正在加载公司概览数据... - -
- ); - } - - // 错误状态 - if (error && !basicInfo) { - return ( -
- {error} -
- ); - } + const { basicInfo } = useBasicInfo(stockCode); return ( - {/* 公司头部信息卡片 */} - {basicInfo && } - {/* 基本信息内容 - 传入 stockCode,内部懒加载各 Tab 数据 */} = ({ isWatchlistLoading = false, onWatchlistToggle, onShare, + basicInfo, }) => { // 处理分享点击 const handleShare = () => { @@ -160,10 +165,10 @@ const StockQuoteCard: React.FC = ({ - {/* 三栏布局 */} + {/* 1:2 布局 */} - {/* 左栏:价格信息 */} - + {/* 左栏:价格信息 (flex=1) */} + {formatPrice(data.currentPrice)} @@ -212,86 +217,148 @@ const StockQuoteCard: React.FC = ({ - {/* 中栏:关键指标 */} - - - 关键指标 - - - - 市盈率(PE): - - {data.pe.toFixed(2)} - - - - 市净率(PB): - - {data.pb.toFixed(2)} - - - - 流通市值: - - {data.marketCap} - - - - 52周波动: - - {formatPrice(data.week52Low)}-{formatPrice(data.week52High)} - - - - + {/* 右栏:关键指标 + 主力动态 (flex=2) */} + + {/* 关键指标 */} + + + 关键指标 + + + + 市盈率(PE): + + {data.pe.toFixed(2)} + + + + 市净率(PB): + + {data.pb.toFixed(2)} + + + + 流通市值: + + {data.marketCap} + + + + 52周波动: + + {formatPrice(data.week52Low)}-{formatPrice(data.week52High)} + + + + - {/* 右栏:主力动态 */} - - - 主力动态 - - - - 主力净流入: - - {formatNetInflow(data.mainNetInflow)} - - - - 机构持仓: - - {data.institutionHolding.toFixed(2)}% - - - {/* 买卖比例条 */} - - div': { bg: upColor }, - }} - bg={downColor} - borderRadius="full" - /> - - 买入{data.buyRatio}% - 卖出{data.sellRatio}% + {/* 主力动态 */} + + + 主力动态 + + + + 主力净流入: + + {formatNetInflow(data.mainNetInflow)} + + + + 机构持仓: + + {data.institutionHolding.toFixed(2)}% + + + {/* 买卖比例条 */} + + div': { bg: upColor }, + }} + bg={downColor} + borderRadius="full" + /> + + 买入{data.buyRatio}% + 卖出{data.sellRatio}% + + + + + + + + {/* 公司信息区块 - 1:2 布局 */} + {basicInfo && ( + <> + + + {/* 左侧:公司关键属性 (flex=1) */} + + + + + 成立: + + {formatDate(basicInfo.establish_date)} + + + + + 注册资本: + + {formatRegisteredCapital(basicInfo.reg_capital)} + + + + + 所在地: + + {basicInfo.province} {basicInfo.city} + + + + + {basicInfo.website ? ( + + 访问官网 + + ) : ( + 暂无官网 + )} + - - - + + {/* 右侧:公司简介 (flex=2) */} + + + 公司简介: + {basicInfo.company_intro || '暂无'} + + + + + )} ); diff --git a/src/views/Company/components/StockQuoteCard/types.ts b/src/views/Company/components/StockQuoteCard/types.ts index 73107ba5..a1d2a788 100644 --- a/src/views/Company/components/StockQuoteCard/types.ts +++ b/src/views/Company/components/StockQuoteCard/types.ts @@ -2,6 +2,8 @@ * StockQuoteCard 组件类型定义 */ +import type { BasicInfo } from '../CompanyOverview/types'; + /** * 股票行情卡片数据 */ @@ -53,4 +55,6 @@ export interface StockQuoteCardProps { onWatchlistToggle?: () => void; // 自选股切换回调 // 分享 onShare?: () => void; // 分享回调 + // 公司基本信息 + basicInfo?: BasicInfo; } diff --git a/src/views/Company/index.js b/src/views/Company/index.js index a1f1b66b..b1e01435 100644 --- a/src/views/Company/index.js +++ b/src/views/Company/index.js @@ -11,6 +11,7 @@ import { useCompanyStock } from './hooks/useCompanyStock'; import { useCompanyWatchlist } from './hooks/useCompanyWatchlist'; import { useCompanyEvents } from './hooks/useCompanyEvents'; import { useStockQuote } from './hooks/useStockQuote'; +import { useBasicInfo } from './components/CompanyOverview/hooks/useBasicInfo'; // 页面组件 import CompanyHeader from './components/CompanyHeader'; @@ -46,6 +47,9 @@ const CompanyIndex = () => { // 2. 获取股票行情数据 const { data: quoteData, isLoading: isQuoteLoading } = useStockQuote(stockCode); + // 2.1 获取公司基本信息 + const { basicInfo } = useBasicInfo(stockCode); + // 3. 再初始化事件追踪(传入 stockCode) const { trackStockSearched, @@ -88,13 +92,14 @@ const CompanyIndex = () => { bgColor="#1A202C" /> - {/* 股票行情卡片:价格、关键指标、主力动态、自选股按钮 */} + {/* 股票行情卡片:价格、关键指标、主力动态、公司信息 */} {/* Tab 切换区域:概览、行情、财务、预测 */}