Compare commits
7 Commits
3abee6b907
...
514917c0eb
| Author | SHA1 | Date | |
|---|---|---|---|
|
514917c0eb | ||
|
|
6ce913d79b | ||
|
|
6d5594556b | ||
|
|
c32091e83e | ||
|
|
2994de98c2 | ||
|
|
c237a4dc0c | ||
|
|
395dc27fe2 |
@@ -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'
|
||||
}
|
||||
],
|
||||
@@ -137,91 +290,98 @@ export const PINGAN_BANK_DATA = {
|
||||
// 十大流通股东（字段名与组件期望格式匹配）
|
||||
topCirculationShareholders: [
|
||||
{ shareholder_rank: 1, shareholder_name: '中国平安保险（集团）股份有限公司', holding_shares: 10168542300, circulation_share_ratio: 52.38, shareholder_type: '法人', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 2, shareholder_name: '香港中央结算有限公司', holding_shares: 542138600, circulation_share_ratio: 2.79, shareholder_type: 'QFII', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 3, shareholder_name: '深圳市投资控股有限公司', holding_shares: 382456100, circulation_share_ratio: 1.97, shareholder_type: '法人', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 2, shareholder_name: '香港中央结算有限公司（陆股通）', holding_shares: 542138600, circulation_share_ratio: 2.79, shareholder_type: 'QFII', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 3, shareholder_name: '中国平安人寿保险股份有限公司-传统-普通保险产品', holding_shares: 382456100, circulation_share_ratio: 1.97, shareholder_type: '保险', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 4, shareholder_name: '中国证券金融股份有限公司', holding_shares: 298654200, circulation_share_ratio: 1.54, shareholder_type: '券商', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 5, shareholder_name: '中央汇金资产管理有限责任公司', holding_shares: 267842100, circulation_share_ratio: 1.38, shareholder_type: '法人', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 6, shareholder_name: '全国社保基金一零三组合', holding_shares: 156234500, circulation_share_ratio: 0.80, shareholder_type: '社保', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 7, shareholder_name: '全国社保基金一零一组合', holding_shares: 142356700, circulation_share_ratio: 0.73, shareholder_type: '社保', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 8, shareholder_name: '中国人寿保险股份有限公司', holding_shares: 128945600, circulation_share_ratio: 0.66, shareholder_type: '保险', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 9, shareholder_name: 'GIC PRIVATE LIMITED', holding_shares: 98765400, circulation_share_ratio: 0.51, shareholder_type: 'QFII', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 10, shareholder_name: '挪威中央银行', holding_shares: 87654300, circulation_share_ratio: 0.45, shareholder_type: 'QFII', end_date: '2024-09-30' }
|
||||
{ shareholder_rank: 7, shareholder_name: '华夏上证50交易型开放式指数证券投资基金', holding_shares: 142356700, circulation_share_ratio: 0.73, shareholder_type: '基金', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 8, shareholder_name: '中国人寿保险股份有限公司-分红-个人分红-005L-FH002深', holding_shares: 128945600, circulation_share_ratio: 0.66, shareholder_type: '保险', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 9, shareholder_name: '易方达沪深300交易型开放式指数发起式证券投资基金', holding_shares: 98765400, circulation_share_ratio: 0.51, shareholder_type: '基金', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 10, shareholder_name: '嘉实沪深300交易型开放式指数证券投资基金', holding_shares: 87654300, circulation_share_ratio: 0.45, shareholder_type: '基金', end_date: '2024-09-30' }
|
||||
],
|
||||
|
||||
// 十大股东（字段名与组件期望格式匹配）
|
||||
topShareholders: [
|
||||
{ shareholder_rank: 1, shareholder_name: '中国平安保险（集团）股份有限公司', holding_shares: 10168542300, total_share_ratio: 52.38, shareholder_type: '法人', share_nature: '流通A股', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 2, shareholder_name: '香港中央结算有限公司', holding_shares: 542138600, total_share_ratio: 2.79, shareholder_type: 'QFII', share_nature: '流通A股', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 3, shareholder_name: '深圳市投资控股有限公司', holding_shares: 382456100, total_share_ratio: 1.97, shareholder_type: '法人', share_nature: '流通A股', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 2, shareholder_name: '香港中央结算有限公司（陆股通）', holding_shares: 542138600, total_share_ratio: 2.79, shareholder_type: 'QFII', share_nature: '流通A股', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 3, shareholder_name: '中国平安人寿保险股份有限公司-传统-普通保险产品', holding_shares: 382456100, total_share_ratio: 1.97, shareholder_type: '保险', share_nature: '流通A股', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 4, shareholder_name: '中国证券金融股份有限公司', holding_shares: 298654200, total_share_ratio: 1.54, shareholder_type: '券商', share_nature: '流通A股', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 5, shareholder_name: '中央汇金资产管理有限责任公司', holding_shares: 267842100, total_share_ratio: 1.38, shareholder_type: '法人', share_nature: '流通A股', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 6, shareholder_name: '全国社保基金一零三组合', holding_shares: 156234500, total_share_ratio: 0.80, shareholder_type: '社保', share_nature: '流通A股', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 7, shareholder_name: '全国社保基金一零一组合', holding_shares: 142356700, total_share_ratio: 0.73, shareholder_type: '社保', share_nature: '流通A股', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 8, shareholder_name: '中国人寿保险股份有限公司', holding_shares: 128945600, total_share_ratio: 0.66, shareholder_type: '保险', share_nature: '流通A股', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 9, shareholder_name: 'GIC PRIVATE LIMITED', holding_shares: 98765400, total_share_ratio: 0.51, shareholder_type: 'QFII', share_nature: '流通A股', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 10, shareholder_name: '挪威中央银行', holding_shares: 87654300, total_share_ratio: 0.45, shareholder_type: 'QFII', share_nature: '流通A股', end_date: '2024-09-30' }
|
||||
{ shareholder_rank: 7, shareholder_name: '华夏上证50交易型开放式指数证券投资基金', holding_shares: 142356700, total_share_ratio: 0.73, shareholder_type: '基金', share_nature: '流通A股', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 8, shareholder_name: '中国人寿保险股份有限公司-分红-个人分红-005L-FH002深', holding_shares: 128945600, total_share_ratio: 0.66, shareholder_type: '保险', share_nature: '流通A股', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 9, shareholder_name: '易方达沪深300交易型开放式指数发起式证券投资基金', holding_shares: 98765400, total_share_ratio: 0.51, shareholder_type: '基金', share_nature: '流通A股', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 10, shareholder_name: '嘉实沪深300交易型开放式指数证券投资基金', holding_shares: 87654300, total_share_ratio: 0.45, shareholder_type: '基金', share_nature: '流通A股', end_date: '2024-09-30' }
|
||||
],
|
||||
|
||||
// 分支机构
|
||||
// 分支机构（字段与 BranchesPanel 组件匹配）
|
||||
branches: [
|
||||
{ name: '北京分行', address: '北京市朝阳区建国路88号SOHO现代城', phone: '010-85806888', type: '一级分行', establish_date: '2007-03-15' },
|
||||
{ name: '上海分行', address: '上海市浦东新区陆家嘴环路1366号', phone: '021-38637777', type: '一级分行', establish_date: '2007-05-20' },
|
||||
{ name: '广州分行', address: '广州市天河区珠江新城珠江东路32号', phone: '020-38390888', type: '一级分行', establish_date: '2007-06-10' },
|
||||
{ name: '深圳分行', address: '深圳市福田区益田路5033号', phone: '0755-82538888', type: '一级分行', establish_date: '1995-01-01' },
|
||||
{ name: '杭州分行', address: '杭州市江干区钱江路1366号', phone: '0571-87028888', type: '一级分行', establish_date: '2008-09-12' },
|
||||
{ name: '成都分行', address: '成都市武侯区人民南路四段13号', phone: '028-85266888', type: '一级分行', establish_date: '2009-04-25' },
|
||||
{ name: '南京分行', address: '南京市建邺区江东中路359号', phone: '025-86625888', type: '一级分行', establish_date: '2010-06-30' },
|
||||
{ name: '武汉分行', address: '武汉市江汉区建设大道568号', phone: '027-85712888', type: '一级分行', establish_date: '2011-08-15' },
|
||||
{ name: '西安分行', address: '西安市高新区唐延路35号', phone: '029-88313888', type: '一级分行', establish_date: '2012-10-20' },
|
||||
{ name: '天津分行', address: '天津市和平区南京路189号', phone: '022-23399888', type: '一级分行', establish_date: '2013-03-18' }
|
||||
{ branch_name: '平安银行股份有限公司北京分行', business_status: '存续', register_capital: '20亿元', legal_person: '张伟', register_date: '2007-03-15', related_company_count: 156 },
|
||||
{ branch_name: '平安银行股份有限公司上海分行', business_status: '存续', register_capital: '25亿元', legal_person: '李明', register_date: '2007-05-20', related_company_count: 203 },
|
||||
{ branch_name: '平安银行股份有限公司广州分行', business_status: '存续', register_capital: '18亿元', legal_person: '王芳', register_date: '2007-06-10', related_company_count: 142 },
|
||||
{ branch_name: '平安银行股份有限公司深圳分行', business_status: '存续', register_capital: '30亿元', legal_person: '陈强', register_date: '1995-01-01', related_company_count: 287 },
|
||||
{ branch_name: '平安银行股份有限公司杭州分行', business_status: '存续', register_capital: '15亿元', legal_person: '刘洋', register_date: '2008-09-12', related_company_count: 98 },
|
||||
{ branch_name: '平安银行股份有限公司成都分行', business_status: '存续', register_capital: '12亿元', legal_person: '赵静', register_date: '2009-04-25', related_company_count: 76 },
|
||||
{ branch_name: '平安银行股份有限公司南京分行', business_status: '存续', register_capital: '14亿元', legal_person: '周涛', register_date: '2010-06-30', related_company_count: 89 },
|
||||
{ branch_name: '平安银行股份有限公司武汉分行', business_status: '存续', register_capital: '10亿元', legal_person: '吴磊', register_date: '2011-08-15', related_company_count: 65 },
|
||||
{ branch_name: '平安银行股份有限公司西安分行', business_status: '存续', register_capital: '8亿元', legal_person: '郑华', register_date: '2012-10-20', related_company_count: 52 },
|
||||
{ branch_name: '平安银行股份有限公司天津分行', business_status: '存续', register_capital: '10亿元', legal_person: '孙丽', register_date: '2013-03-18', related_company_count: 71 },
|
||||
{ branch_name: '平安银行股份有限公司重庆分行', business_status: '存续', register_capital: '9亿元', legal_person: '钱峰', register_date: '2014-05-08', related_company_count: 58 },
|
||||
{ branch_name: '平安银行股份有限公司苏州分行', business_status: '存续', register_capital: '6亿元', legal_person: '冯雪', register_date: '2015-07-22', related_company_count: 45 },
|
||||
],
|
||||
|
||||
// 公告列表
|
||||
announcements: [
|
||||
{
|
||||
title: '平安银行股份有限公司2024年第三季度报告',
|
||||
publish_date: '2024-10-28',
|
||||
type: '定期报告',
|
||||
summary: '2024年前三季度实现营业收入1245.6亿元，同比增长8.2%；净利润402.3亿元，同比增长12.5%',
|
||||
announce_date: '2024-10-28',
|
||||
info_type: '定期报告',
|
||||
format: 'PDF',
|
||||
file_size: 2580,
|
||||
url: '/announcement/detail/ann_20241028_001'
|
||||
},
|
||||
{
|
||||
title: '关于召开2024年第一次临时股东大会的通知',
|
||||
publish_date: '2024-10-15',
|
||||
type: '临时公告',
|
||||
summary: '定于2024年11月5日召开2024年第一次临时股东大会，审议关于调整董事会成员等议案',
|
||||
announce_date: '2024-10-15',
|
||||
info_type: '临时公告',
|
||||
format: 'PDF',
|
||||
file_size: 156,
|
||||
url: '/announcement/detail/ann_20241015_001'
|
||||
},
|
||||
{
|
||||
title: '平安银行股份有限公司关于完成注册资本变更登记的公告',
|
||||
publish_date: '2024-09-20',
|
||||
type: '临时公告',
|
||||
summary: '公司已完成注册资本由人民币194.06亿元变更为194.06亿元的工商变更登记手续',
|
||||
announce_date: '2024-09-20',
|
||||
info_type: '临时公告',
|
||||
format: 'PDF',
|
||||
file_size: 89,
|
||||
url: '/announcement/detail/ann_20240920_001'
|
||||
},
|
||||
{
|
||||
title: '平安银行股份有限公司2024年半年度报告',
|
||||
publish_date: '2024-08-28',
|
||||
type: '定期报告',
|
||||
summary: '2024年上半年实现营业收入828.5亿元，同比增长7.8%；净利润265.4亿元，同比增长11.2%',
|
||||
announce_date: '2024-08-28',
|
||||
info_type: '定期报告',
|
||||
format: 'PDF',
|
||||
file_size: 3420,
|
||||
url: '/announcement/detail/ann_20240828_001'
|
||||
},
|
||||
{
|
||||
title: '关于2024年上半年利润分配预案的公告',
|
||||
publish_date: '2024-08-20',
|
||||
type: '分配方案',
|
||||
summary: '拟以总股本194.06亿股为基数，向全体股东每10股派发现金红利2.8元（含税）',
|
||||
announce_date: '2024-08-20',
|
||||
info_type: '分配方案',
|
||||
format: 'PDF',
|
||||
file_size: 245,
|
||||
url: '/announcement/detail/ann_20240820_001'
|
||||
}
|
||||
],
|
||||
|
||||
// 披露时间表
|
||||
disclosureSchedule: [
|
||||
{ report_type: '2024年年度报告', planned_date: '2025-04-30', status: '未披露' },
|
||||
{ report_type: '2024年第四季度报告', planned_date: '2025-01-31', status: '未披露' },
|
||||
{ report_type: '2024年第三季度报告', planned_date: '2024-10-31', status: '已披露' },
|
||||
{ report_type: '2024年半年度报告', planned_date: '2024-08-31', status: '已披露' },
|
||||
{ report_type: '2024年第一季度报告', planned_date: '2024-04-30', status: '已披露' }
|
||||
{ report_name: '2024年年度报告', is_disclosed: false, actual_date: null, latest_scheduled_date: '2025-04-30' },
|
||||
{ report_name: '2024年第四季度报告', is_disclosed: false, actual_date: null, latest_scheduled_date: '2025-01-31' },
|
||||
{ report_name: '2024年第三季度报告', is_disclosed: true, actual_date: '2024-10-28', latest_scheduled_date: '2024-10-31' },
|
||||
{ report_name: '2024年半年度报告', is_disclosed: true, actual_date: '2024-08-28', latest_scheduled_date: '2024-08-31' },
|
||||
{ report_name: '2024年第一季度报告', is_disclosed: true, actual_date: '2024-04-28', latest_scheduled_date: '2024-04-30' }
|
||||
],
|
||||
|
||||
// 综合分析 - 结构与组件期望格式匹配
|
||||
@@ -1028,43 +1188,66 @@ 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' },
|
||||
{ shareholder_rank: 2, shareholder_name: '香港中央结算有限公司（陆股通）', holding_shares: 156000000, circulation_share_ratio: 9.88, shareholder_type: 'QFII', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 3, shareholder_name: '中国平安人寿保险股份有限公司-传统-普通保险产品', holding_shares: 89000000, circulation_share_ratio: 5.64, shareholder_type: '保险', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 4, shareholder_name: '中国证券金融股份有限公司', holding_shares: 67000000, circulation_share_ratio: 4.24, shareholder_type: '券商', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 5, shareholder_name: '中央汇金资产管理有限责任公司', holding_shares: 45000000, circulation_share_ratio: 2.85, shareholder_type: '法人', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 6, shareholder_name: '全国社保基金一零三组合', holding_shares: 34000000, circulation_share_ratio: 2.15, shareholder_type: '社保', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 7, shareholder_name: '华夏上证50交易型开放式指数证券投资基金', holding_shares: 28000000, circulation_share_ratio: 1.77, shareholder_type: '基金', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 8, shareholder_name: '中国人寿保险股份有限公司-分红-个人分红-005L-FH002深', holding_shares: 23000000, circulation_share_ratio: 1.46, shareholder_type: '保险', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 9, shareholder_name: '易方达沪深300交易型开放式指数发起式证券投资基金', holding_shares: 19000000, circulation_share_ratio: 1.20, shareholder_type: '基金', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 10, shareholder_name: '嘉实沪深300交易型开放式指数证券投资基金', holding_shares: 15000000, circulation_share_ratio: 0.95, shareholder_type: '基金', end_date: '2024-09-30' }
|
||||
],
|
||||
topShareholders: [
|
||||
{ shareholder_rank: 1, shareholder_name: '某控股集团有限公司', holding_shares: 560000000, total_share_ratio: 35.50, shareholder_type: '法人', share_nature: '流通A股', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 2, shareholder_name: '香港中央结算有限公司（陆股通）', holding_shares: 156000000, total_share_ratio: 9.88, shareholder_type: 'QFII', share_nature: '流通A股', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 3, shareholder_name: '中国平安人寿保险股份有限公司-传统-普通保险产品', holding_shares: 89000000, total_share_ratio: 5.64, shareholder_type: '保险', share_nature: '流通A股', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 4, shareholder_name: '中国证券金融股份有限公司', holding_shares: 67000000, total_share_ratio: 4.24, shareholder_type: '券商', share_nature: '流通A股', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 5, shareholder_name: '中央汇金资产管理有限责任公司', holding_shares: 45000000, total_share_ratio: 2.85, shareholder_type: '法人', share_nature: '流通A股', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 6, shareholder_name: '全国社保基金一零三组合', holding_shares: 34000000, total_share_ratio: 2.15, shareholder_type: '社保', share_nature: '流通A股', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 7, shareholder_name: '华夏上证50交易型开放式指数证券投资基金', holding_shares: 28000000, total_share_ratio: 1.77, shareholder_type: '基金', share_nature: '流通A股', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 8, shareholder_name: '中国人寿保险股份有限公司-分红-个人分红-005L-FH002深', holding_shares: 23000000, total_share_ratio: 1.46, shareholder_type: '保险', share_nature: '流通A股', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 9, shareholder_name: '易方达沪深300交易型开放式指数发起式证券投资基金', holding_shares: 19000000, total_share_ratio: 1.20, shareholder_type: '基金', share_nature: '流通A股', end_date: '2024-09-30' },
|
||||
{ shareholder_rank: 10, shareholder_name: '嘉实沪深300交易型开放式指数证券投资基金', holding_shares: 15000000, total_share_ratio: 0.95, shareholder_type: '基金', share_nature: '流通A股', end_date: '2024-09-30' }
|
||||
],
|
||||
topCirculationShareholders: Array(10).fill(null).map((_, i) => ({
|
||||
shareholder_rank: i + 1,
|
||||
shareholder_name: `流通股东${i + 1}`,
|
||||
holding_shares: Math.floor(Math.random() * 100000000) + 10000000,
|
||||
circulation_share_ratio: parseFloat(((10 - i) * 0.8 + Math.random() * 2).toFixed(2)),
|
||||
shareholder_type: i < 3 ? '法人' : (i < 5 ? '基金' : (i < 7 ? '社保' : 'QFII')),
|
||||
end_date: '2024-09-30'
|
||||
})),
|
||||
topShareholders: Array(10).fill(null).map((_, i) => ({
|
||||
shareholder_rank: i + 1,
|
||||
shareholder_name: `股东${i + 1}`,
|
||||
holding_shares: Math.floor(Math.random() * 100000000) + 10000000,
|
||||
total_share_ratio: parseFloat(((10 - i) * 0.8 + Math.random() * 2).toFixed(2)),
|
||||
shareholder_type: i < 3 ? '法人' : (i < 5 ? '基金' : (i < 7 ? '社保' : 'QFII')),
|
||||
share_nature: i < 2 ? '限售股' : '流通A股',
|
||||
end_date: '2024-09-30'
|
||||
})),
|
||||
branches: [
|
||||
{ name: '北京分公司', address: '北京市朝阳区某路123号', phone: '010-12345678', type: '分公司', establish_date: '2012-05-01' },
|
||||
{ name: '上海分公司', address: '上海市浦东新区某路456号', phone: '021-12345678', type: '分公司', establish_date: '2013-08-15' },
|
||||
{ name: '广州分公司', address: '广州市天河区某路789号', phone: '020-12345678', type: '分公司', establish_date: '2014-03-20' },
|
||||
{ branch_name: `${stockName}北京分公司`, business_status: '存续', register_capital: '5000万元', legal_person: '张伟', register_date: '2012-05-01', related_company_count: 23 },
|
||||
{ branch_name: `${stockName}上海分公司`, business_status: '存续', register_capital: '8000万元', legal_person: '李明', register_date: '2013-08-15', related_company_count: 35 },
|
||||
{ branch_name: `${stockName}广州分公司`, business_status: '存续', register_capital: '3000万元', legal_person: '王芳', register_date: '2014-03-20', related_company_count: 18 },
|
||||
{ branch_name: `${stockName}深圳分公司`, business_status: '存续', register_capital: '6000万元', legal_person: '陈强', register_date: '2015-06-10', related_company_count: 28 },
|
||||
{ branch_name: `${stockName}成都分公司`, business_status: '存续', register_capital: '2000万元', legal_person: '刘洋', register_date: '2018-09-25', related_company_count: 12 },
|
||||
{ branch_name: `${stockName}武汉子公司`, business_status: '注销', register_capital: '1000万元', legal_person: '赵静', register_date: '2016-04-18', related_company_count: 5 },
|
||||
],
|
||||
announcements: [
|
||||
{ title: `${stockName}2024年第三季度报告`, publish_date: '2024-10-28', type: '定期报告', summary: '业绩稳步增长', url: '#' },
|
||||
{ title: `${stockName}2024年半年度报告`, publish_date: '2024-08-28', type: '定期报告', summary: '经营情况良好', url: '#' },
|
||||
{ title: `关于重大合同签订的公告`, publish_date: '2024-07-15', type: '临时公告', summary: '签订重要销售合同', url: '#' },
|
||||
{ title: `${stockName}2024年第三季度报告`, announce_date: '2024-10-28', info_type: '定期报告', format: 'PDF', file_size: 1850, url: '#' },
|
||||
{ title: `${stockName}2024年半年度报告`, announce_date: '2024-08-28', info_type: '定期报告', format: 'PDF', file_size: 2340, url: '#' },
|
||||
{ title: `关于重大合同签订的公告`, announce_date: '2024-07-15', info_type: '临时公告', format: 'PDF', file_size: 128, url: '#' },
|
||||
],
|
||||
disclosureSchedule: [
|
||||
{ report_type: '2024年年度报告', planned_date: '2025-04-30', status: '未披露' },
|
||||
{ report_type: '2024年第三季度报告', planned_date: '2024-10-31', status: '已披露' },
|
||||
{ report_type: '2024年半年度报告', planned_date: '2024-08-31', status: '已披露' },
|
||||
{ report_name: '2024年年度报告', is_disclosed: false, actual_date: null, latest_scheduled_date: '2025-04-30' },
|
||||
{ report_name: '2024年第三季度报告', is_disclosed: true, actual_date: '2024-10-28', latest_scheduled_date: '2024-10-31' },
|
||||
{ report_name: '2024年半年度报告', is_disclosed: true, actual_date: '2024-08-28', latest_scheduled_date: '2024-08-31' },
|
||||
],
|
||||
comprehensiveAnalysis: {
|
||||
qualitative_analysis: {
|
||||
|
||||
@@ -67,10 +67,19 @@ export const companyHandlers = [
|
||||
await delay(150);
|
||||
const { stockCode } = params;
|
||||
const data = getCompanyData(stockCode);
|
||||
const raw = data.actualControl;
|
||||
|
||||
// 数据已经是数组格式，只做数值转换（holding_ratio 从 0-100 转为 0-1）
|
||||
const formatted = Array.isArray(raw)
|
||||
? raw.map(item => ({
|
||||
...item,
|
||||
holding_ratio: item.holding_ratio > 1 ? item.holding_ratio / 100 : item.holding_ratio,
|
||||
}))
|
||||
: [];
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: data.actualControl
|
||||
data: formatted
|
||||
});
|
||||
}),
|
||||
|
||||
@@ -79,10 +88,19 @@ export const companyHandlers = [
|
||||
await delay(150);
|
||||
const { stockCode } = params;
|
||||
const data = getCompanyData(stockCode);
|
||||
const raw = data.concentration;
|
||||
|
||||
// 数据已经是数组格式，只做数值转换（holding_ratio 从 0-100 转为 0-1）
|
||||
const formatted = Array.isArray(raw)
|
||||
? raw.map(item => ({
|
||||
...item,
|
||||
holding_ratio: item.holding_ratio > 1 ? item.holding_ratio / 100 : item.holding_ratio,
|
||||
}))
|
||||
: [];
|
||||
|
||||
return HttpResponse.json({
|
||||
success: true,
|
||||
data: data.concentration
|
||||
data: formatted
|
||||
});
|
||||
}),
|
||||
|
||||
|
||||
@@ -6,44 +6,69 @@
|
||||
|
||||
```
|
||||
src/views/Company/
|
||||
├── index.js # 页面入口（95行，纯组合层）
|
||||
├── index.js # 页面入口（纯组合层）
|
||||
├── STRUCTURE.md # 本文档
|
||||
│
|
||||
├── components/ # UI 组件
|
||||
│ │
|
||||
│ ├── CompanyHeader/ # 页面头部
|
||||
│ │ ├── index.js # 组合导出
|
||||
│ │ ├── SearchBar.js # 股票搜索栏
|
||||
│ │ └── WatchlistButton.js # 自选股按钮
|
||||
│ │ └── SearchBar.js # 股票搜索栏
|
||||
│ │
|
||||
│ ├── CompanyTabs/ # Tab 切换容器
|
||||
│ │ ├── index.js # Tab 容器（状态管理 + 内容渲染）
|
||||
│ │ └── TabNavigation.js # Tab 导航栏
|
||||
│ │
|
||||
│ ├── CompanyOverview/ # Tab: 公司概览（TypeScript 拆分）
|
||||
│ │ ├── index.tsx # 主组件（组合层，约 50 行）
|
||||
│ │ ├── CompanyHeaderCard.tsx # 头部卡片组件（黑金主题，约 200 行）
|
||||
│ │ ├── BasicInfoTab/ # 基本信息 Tab（TypeScript 可配置化重构）
|
||||
│ │ │ ├── index.tsx # 主组件（可配置，约 120 行）
|
||||
│ │ │ ├── config.ts # Tab 配置 + 黑金主题（约 90 行）
|
||||
│ │ │ ├── utils.ts # 格式化工具函数（约 50 行）
|
||||
│ │ │ └── components/ # 子组件
|
||||
│ │ │ ├── index.ts # 组件统一导出
|
||||
│ │ │ ├── LoadingState.tsx # 加载状态组件（黑金主题 Spinner）
|
||||
│ │ │ ├── ShareholderPanel.tsx # 股权结构面板（实控人、十大股东、股权集中度）
|
||||
│ │ │ ├── ManagementPanel.tsx # 管理团队面板（高管列表表格）
|
||||
│ │ │ ├── AnnouncementsPanel.tsx # 公告信息面板（公告列表 + 披露日程）
|
||||
│ │ │ ├── BranchesPanel.tsx # 分支机构面板（分支列表表格）
|
||||
│ │ │ └── BusinessInfoPanel.tsx # 工商信息面板（注册资本、成立日期等）
|
||||
│ ├── StockQuoteCard/ # 股票行情卡片（TypeScript）
|
||||
│ │ ├── index.tsx # 主组件
|
||||
│ │ ├── types.ts # 类型定义
|
||||
│ │ └── mockData.ts # Mock 数据
|
||||
│ │
|
||||
│ ├── CompanyOverview/ # Tab: 公司概览（TypeScript）
|
||||
│ │ ├── index.tsx # 主组件（组合层）
|
||||
│ │ ├── types.ts # 类型定义
|
||||
│ │ ├── utils.ts # 格式化工具
|
||||
│ │ ├── DeepAnalysisTab.js # 深度分析 Tab
|
||||
│ │ ├── NewsEventsTab.js # 新闻事件 Tab
|
||||
│ │ ├── types.ts # 类型定义（约 120 行）
|
||||
│ │ ├── utils.ts # 格式化工具（约 20 行）
|
||||
│ │ └── hooks/
|
||||
│ │ └── useCompanyOverviewData.ts # 数据 Hook（约 100 行）
|
||||
│ │ │
|
||||
│ │ ├── hooks/ # 数据 Hooks
|
||||
│ │ │ ├── useBasicInfo.ts # 基本信息 Hook
|
||||
│ │ │ ├── useShareholderData.ts # 股权结构 Hook（4 APIs）
|
||||
│ │ │ ├── useManagementData.ts # 管理团队 Hook
|
||||
│ │ │ ├── useAnnouncementsData.ts # 公告数据 Hook
|
||||
│ │ │ ├── useBranchesData.ts # 分支机构 Hook
|
||||
│ │ │ ├── useDisclosureData.ts # 披露日程 Hook
|
||||
│ │ │ └── useCompanyOverviewData.ts # [已废弃] 原合并 Hook
|
||||
│ │ │
|
||||
│ │ ├── components/ # 股权结构子组件
|
||||
│ │ │ └── shareholder/
|
||||
│ │ │ ├── index.ts # 导出
|
||||
│ │ │ ├── ActualControlCard.tsx # 实控人卡片
|
||||
│ │ │ ├── ConcentrationCard.tsx # 股权集中度卡片
|
||||
│ │ │ └── ShareholdersTable.tsx # 股东表格
|
||||
│ │ │
|
||||
│ │ └── BasicInfoTab/ # 基本信息 Tab（可配置化）
|
||||
│ │ ├── index.tsx # 主组件（可配置）
|
||||
│ │ ├── config.ts # Tab 配置 + 黑金主题
|
||||
│ │ ├── utils.ts # 格式化工具函数
|
||||
│ │ └── components/ # 子组件
|
||||
│ │ ├── index.ts # 组件统一导出
|
||||
│ │ ├── LoadingState.tsx # 加载状态组件
|
||||
│ │ ├── ShareholderPanel.tsx # 股权结构面板
|
||||
│ │ ├── AnnouncementsPanel.tsx # 公告信息面板
|
||||
│ │ ├── BranchesPanel.tsx # 分支机构面板
|
||||
│ │ ├── BusinessInfoPanel.tsx # 工商信息面板
|
||||
│ │ ├── DisclosureSchedulePanel.tsx # 披露日程面板
|
||||
│ │ └── management/ # 管理团队模块
|
||||
│ │ ├── index.ts # 模块导出
|
||||
│ │ ├── types.ts # 类型定义
|
||||
│ │ ├── ManagementPanel.tsx # 主组件（useMemo）
|
||||
│ │ ├── CategorySection.tsx # 分类区块（memo）
|
||||
│ │ └── ManagementCard.tsx # 人员卡片（memo）
|
||||
│ │
|
||||
│ ├── MarketDataView/ # Tab: 股票行情（TypeScript 拆分）
|
||||
│ │ ├── index.tsx # 主组件入口（~1049 行）
|
||||
│ │ ├── types.ts # 类型定义（~383 行）
|
||||
│ ├── MarketDataView/ # Tab: 股票行情（TypeScript）
|
||||
│ │ ├── index.tsx # 主组件入口
|
||||
│ │ ├── types.ts # 类型定义
|
||||
│ │ ├── constants.ts # 主题配置、常量
|
||||
│ │ ├── services/
|
||||
│ │ │ └── marketService.ts # API 服务层
|
||||
@@ -51,7 +76,7 @@ src/views/Company/
|
||||
│ │ │ └── useMarketData.ts # 数据获取 Hook
|
||||
│ │ ├── utils/
|
||||
│ │ │ ├── formatUtils.ts # 格式化工具函数
|
||||
│ │ │ └── chartOptions.ts # ECharts 图表配置生成器
|
||||
│ │ │ └── chartOptions.ts # ECharts 图表配置
|
||||
│ │ └── components/
|
||||
│ │ ├── index.ts # 组件导出
|
||||
│ │ ├── ThemedCard.tsx # 主题化卡片
|
||||
@@ -59,16 +84,23 @@ src/views/Company/
|
||||
│ │ ├── StockSummaryCard.tsx # 股票概览卡片
|
||||
│ │ └── AnalysisModal.tsx # 涨幅分析模态框
|
||||
│ │
|
||||
│ ├── FinancialPanorama/ # Tab: 财务全景（2153 行，待拆分）
|
||||
│ ├── DeepAnalysis/ # Tab: 深度分析
|
||||
│ │ └── index.js
|
||||
│ │
|
||||
│ └── ForecastReport/ # Tab: 盈利预测（161 行，待拆分）
|
||||
│ ├── DynamicTracking/ # Tab: 动态跟踪
|
||||
│ │ └── index.js
|
||||
│ │
|
||||
│ ├── FinancialPanorama/ # Tab: 财务全景（待拆分）
|
||||
│ │ └── index.js
|
||||
│ │
|
||||
│ └── ForecastReport/ # Tab: 盈利预测（待拆分）
|
||||
│ └── index.js
|
||||
│
|
||||
├── hooks/ # 自定义 Hooks
|
||||
├── hooks/ # 页面级 Hooks
|
||||
│ ├── useCompanyStock.js # 股票代码管理（URL 同步）
|
||||
│ ├── useCompanyWatchlist.js # 自选股管理（Redux 集成）
|
||||
│ └── useCompanyEvents.js # PostHog 事件追踪
|
||||
│ ├── useCompanyEvents.js # PostHog 事件追踪
|
||||
│ └── useStockQuote.js # 股票行情数据 Hook
|
||||
│
|
||||
└── constants/ # 常量定义
|
||||
└── index.js # Tab 配置、Toast 消息、默认值
|
||||
@@ -468,4 +500,37 @@ MarketDataView/
|
||||
- **TypeScript 类型安全**：所有数据结构有完整类型定义
|
||||
- **服务层分离**：API 调用统一在 `marketService.ts` 中管理
|
||||
- **图表配置抽离**：复杂的 ECharts 配置集中在 `chartOptions.ts`
|
||||
- **组件复用**：通用组件（ThemedCard、MarkdownRenderer）可在其他模块使用
|
||||
- **组件复用**：通用组件（ThemedCard、MarkdownRenderer）可在其他模块使用
|
||||
|
||||
### 2025-12-10 ManagementPanel 拆分重构
|
||||
|
||||
**改动概述**：
|
||||
- `ManagementPanel.tsx` 从 **180 行** 拆分为 **5 个 TypeScript 文件**
|
||||
- 创建 `management/` 子目录，模块化管理
|
||||
- 添加性能优化（`useMemo`、`React.memo`）
|
||||
|
||||
**拆分后文件结构**：
|
||||
```
|
||||
components/management/
|
||||
├── index.ts # 模块导出
|
||||
├── types.ts # 类型定义（~35 行）
|
||||
├── ManagementPanel.tsx # 主组件（~105 行，useMemo 优化）
|
||||
├── CategorySection.tsx # 分类区块组件（~65 行，memo）
|
||||
└── ManagementCard.tsx # 人员卡片组件（~100 行，memo）
|
||||
```
|
||||
|
||||
**类型定义**（`types.ts`）：
|
||||
- `ManagementPerson` - 管理人员信息
|
||||
- `ManagementCategory` - 分类类型（高管/董事/监事/其他）
|
||||
- `CategorizedManagement` - 分类后的数据结构
|
||||
- `CategoryConfig` - 分类配置（图标、颜色）
|
||||
|
||||
**性能优化**：
|
||||
- `useMemo` - 缓存 `categorizeManagement()` 分类计算结果
|
||||
- `React.memo` - `ManagementCard` 和 `CategorySection` 使用 memo 包装
|
||||
- 常量提取 - `CATEGORY_CONFIG` 和 `CATEGORY_ORDER` 提取到组件外部
|
||||
|
||||
**设计原则**：
|
||||
- **职责分离**：卡片渲染、分类区块、数据处理各自独立
|
||||
- **类型安全**：消除 `any` 类型，完整的 TypeScript 类型定义
|
||||
- **可复用性**：`ManagementCard` 可独立使用
|
||||
@@ -11,8 +11,6 @@ import {
|
||||
Icon,
|
||||
Card,
|
||||
CardBody,
|
||||
SimpleGrid,
|
||||
Divider,
|
||||
IconButton,
|
||||
Button,
|
||||
Tag,
|
||||
@@ -25,11 +23,10 @@ import {
|
||||
ModalFooter,
|
||||
useDisclosure,
|
||||
} from "@chakra-ui/react";
|
||||
import { FaCalendarAlt, FaBullhorn } from "react-icons/fa";
|
||||
import { FaBullhorn } from "react-icons/fa";
|
||||
import { ExternalLinkIcon } from "@chakra-ui/icons";
|
||||
|
||||
import { useAnnouncementsData } from "../../hooks/useAnnouncementsData";
|
||||
import { useDisclosureData } from "../../hooks/useDisclosureData";
|
||||
import { THEME } from "../config";
|
||||
import { formatDate } from "../utils";
|
||||
import LoadingState from "./LoadingState";
|
||||
@@ -39,8 +36,7 @@ interface AnnouncementsPanelProps {
|
||||
}
|
||||
|
||||
const AnnouncementsPanel: React.FC<AnnouncementsPanelProps> = ({ stockCode }) => {
|
||||
const { announcements, loading: announcementsLoading } = useAnnouncementsData(stockCode);
|
||||
const { disclosureSchedule, loading: disclosureLoading } = useDisclosureData(stockCode);
|
||||
const { announcements, loading } = useAnnouncementsData(stockCode);
|
||||
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const [selectedAnnouncement, setSelectedAnnouncement] = useState<any>(null);
|
||||
@@ -50,8 +46,6 @@ const AnnouncementsPanel: React.FC<AnnouncementsPanelProps> = ({ stockCode }) =>
|
||||
onOpen();
|
||||
};
|
||||
|
||||
const loading = announcementsLoading || disclosureLoading;
|
||||
|
||||
if (loading) {
|
||||
return <LoadingState message="加载公告数据..." />;
|
||||
}
|
||||
@@ -59,47 +53,6 @@ const AnnouncementsPanel: React.FC<AnnouncementsPanelProps> = ({ stockCode }) =>
|
||||
return (
|
||||
<>
|
||||
<VStack spacing={4} align="stretch">
|
||||
{/* 财报披露日程 */}
|
||||
{disclosureSchedule.length > 0 && (
|
||||
<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.slice(0, 4).map((schedule: any, idx: number) => (
|
||||
<Card
|
||||
key={idx}
|
||||
bg={schedule.is_disclosed ? "green.900" : "orange.900"}
|
||||
border="1px solid"
|
||||
borderColor={schedule.is_disclosed ? "green.600" : "orange.600"}
|
||||
size="sm"
|
||||
>
|
||||
<CardBody p={3}>
|
||||
<VStack spacing={1}>
|
||||
<Badge colorScheme={schedule.is_disclosed ? "green" : "orange"}>
|
||||
{schedule.report_name}
|
||||
</Badge>
|
||||
<Text fontSize="sm" fontWeight="bold" color={THEME.textPrimary}>
|
||||
{schedule.is_disclosed ? "已披露" : "预计"}
|
||||
</Text>
|
||||
<Text fontSize="xs" color={THEME.textSecondary}>
|
||||
{formatDate(
|
||||
schedule.is_disclosed
|
||||
? schedule.actual_date
|
||||
: schedule.latest_scheduled_date
|
||||
)}
|
||||
</Text>
|
||||
</VStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Divider borderColor={THEME.border} />
|
||||
|
||||
{/* 最新公告 */}
|
||||
<Box>
|
||||
<HStack mb={3}>
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
// src/views/Company/components/CompanyOverview/BasicInfoTab/components/DisclosureSchedulePanel.tsx
|
||||
// 财报披露日程 Tab Panel
|
||||
|
||||
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";
|
||||
import { formatDate } from "../utils";
|
||||
import LoadingState from "./LoadingState";
|
||||
|
||||
interface DisclosureSchedulePanelProps {
|
||||
stockCode: string;
|
||||
}
|
||||
|
||||
const DisclosureSchedulePanel: React.FC<DisclosureSchedulePanelProps> = ({ stockCode }) => {
|
||||
const { disclosureSchedule, loading } = useDisclosureData(stockCode);
|
||||
|
||||
if (loading) {
|
||||
return <LoadingState message="加载披露日程..." />;
|
||||
}
|
||||
|
||||
if (disclosureSchedule.length === 0) {
|
||||
return (
|
||||
<Box textAlign="center" py={8}>
|
||||
<Text color={THEME.textSecondary}>暂无披露日程数据</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
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
|
||||
key={idx}
|
||||
bg={schedule.is_disclosed ? "green.900" : "orange.900"}
|
||||
border="1px solid"
|
||||
borderColor={schedule.is_disclosed ? "green.600" : "orange.600"}
|
||||
size="sm"
|
||||
>
|
||||
<CardBody p={3}>
|
||||
<VStack spacing={1}>
|
||||
<Badge colorScheme={schedule.is_disclosed ? "green" : "orange"}>
|
||||
{schedule.report_name}
|
||||
</Badge>
|
||||
<Text fontSize="sm" fontWeight="bold" color={THEME.textPrimary}>
|
||||
{schedule.is_disclosed ? "已披露" : "预计"}
|
||||
</Text>
|
||||
<Text fontSize="xs" color={THEME.textSecondary}>
|
||||
{formatDate(
|
||||
schedule.is_disclosed
|
||||
? schedule.actual_date
|
||||
: schedule.latest_scheduled_date
|
||||
)}
|
||||
</Text>
|
||||
</VStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default DisclosureSchedulePanel;
|
||||
@@ -1,179 +0,0 @@
|
||||
// src/views/Company/components/CompanyOverview/BasicInfoTab/components/ManagementPanel.tsx
|
||||
// 管理团队 Tab Panel
|
||||
|
||||
import React from "react";
|
||||
import {
|
||||
Box,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Heading,
|
||||
Badge,
|
||||
Icon,
|
||||
Card,
|
||||
CardBody,
|
||||
SimpleGrid,
|
||||
Avatar,
|
||||
Tag,
|
||||
} from "@chakra-ui/react";
|
||||
import {
|
||||
FaUserTie,
|
||||
FaCrown,
|
||||
FaEye,
|
||||
FaUsers,
|
||||
FaVenusMars,
|
||||
FaGraduationCap,
|
||||
FaPassport,
|
||||
} from "react-icons/fa";
|
||||
|
||||
import { useManagementData } from "../../hooks/useManagementData";
|
||||
import { THEME } from "../config";
|
||||
import { formatDate } from "../utils";
|
||||
import LoadingState from "./LoadingState";
|
||||
|
||||
interface ManagementPanelProps {
|
||||
stockCode: string;
|
||||
}
|
||||
|
||||
const ManagementPanel: React.FC<ManagementPanelProps> = ({ stockCode }) => {
|
||||
const { management, loading } = useManagementData(stockCode);
|
||||
|
||||
// 管理层职位分类
|
||||
const getManagementByCategory = () => {
|
||||
const categories: Record<string, any[]> = {
|
||||
高管: [],
|
||||
董事: [],
|
||||
监事: [],
|
||||
其他: [],
|
||||
};
|
||||
|
||||
management.forEach((person: any) => {
|
||||
if (
|
||||
person.position_category === "高管" ||
|
||||
person.position_name?.includes("总")
|
||||
) {
|
||||
categories["高管"].push(person);
|
||||
} else if (
|
||||
person.position_category === "董事" ||
|
||||
person.position_name?.includes("董事")
|
||||
) {
|
||||
categories["董事"].push(person);
|
||||
} else if (
|
||||
person.position_category === "监事" ||
|
||||
person.position_name?.includes("监事")
|
||||
) {
|
||||
categories["监事"].push(person);
|
||||
} else {
|
||||
categories["其他"].push(person);
|
||||
}
|
||||
});
|
||||
|
||||
return categories;
|
||||
};
|
||||
|
||||
const getCategoryIcon = (category: string) => {
|
||||
switch (category) {
|
||||
case "高管":
|
||||
return FaUserTie;
|
||||
case "董事":
|
||||
return FaCrown;
|
||||
case "监事":
|
||||
return FaEye;
|
||||
default:
|
||||
return FaUsers;
|
||||
}
|
||||
};
|
||||
|
||||
const getCategoryColor = (category: string) => {
|
||||
switch (category) {
|
||||
case "高管":
|
||||
return THEME.gold;
|
||||
case "董事":
|
||||
return THEME.goldLight;
|
||||
case "监事":
|
||||
return "green.400";
|
||||
default:
|
||||
return THEME.textSecondary;
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <LoadingState message="加载管理团队数据..." />;
|
||||
}
|
||||
|
||||
return (
|
||||
<VStack spacing={6} align="stretch">
|
||||
{Object.entries(getManagementByCategory()).map(
|
||||
([category, people]) =>
|
||||
people.length > 0 && (
|
||||
<Box key={category}>
|
||||
<HStack mb={4}>
|
||||
<Icon
|
||||
as={getCategoryIcon(category)}
|
||||
color={getCategoryColor(category)}
|
||||
boxSize={5}
|
||||
/>
|
||||
<Heading size="sm" color={THEME.textPrimary}>{category}</Heading>
|
||||
<Badge bg={THEME.gold} color="gray.900">{people.length}人</Badge>
|
||||
</HStack>
|
||||
|
||||
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={4}>
|
||||
{people.map((person: any, idx: number) => (
|
||||
<Card key={idx} bg={THEME.tableBg} border="1px solid" borderColor={THEME.border} size="sm">
|
||||
<CardBody>
|
||||
<HStack spacing={3} align="start">
|
||||
<Avatar
|
||||
name={person.name}
|
||||
size="md"
|
||||
bg={getCategoryColor(category)}
|
||||
/>
|
||||
<VStack align="start" spacing={1} flex={1}>
|
||||
<HStack>
|
||||
<Text fontWeight="bold" color={THEME.textPrimary}>{person.name}</Text>
|
||||
{person.gender && (
|
||||
<Icon
|
||||
as={FaVenusMars}
|
||||
color={person.gender === "男" ? "blue.400" : "pink.400"}
|
||||
boxSize={3}
|
||||
/>
|
||||
)}
|
||||
</HStack>
|
||||
<Text fontSize="sm" color={THEME.goldLight}>
|
||||
{person.position_name}
|
||||
</Text>
|
||||
<HStack spacing={2} flexWrap="wrap">
|
||||
{person.education && (
|
||||
<Tag size="sm" bg={THEME.tableHoverBg} color={THEME.textSecondary}>
|
||||
<Icon as={FaGraduationCap} mr={1} boxSize={3} />
|
||||
{person.education}
|
||||
</Tag>
|
||||
)}
|
||||
{person.birth_year && (
|
||||
<Tag size="sm" bg={THEME.tableHoverBg} color={THEME.textSecondary}>
|
||||
{new Date().getFullYear() - parseInt(person.birth_year)}岁
|
||||
</Tag>
|
||||
)}
|
||||
{person.nationality && person.nationality !== "中国" && (
|
||||
<Tag size="sm" bg="orange.600" color="white">
|
||||
<Icon as={FaPassport} mr={1} boxSize={3} />
|
||||
{person.nationality}
|
||||
</Tag>
|
||||
)}
|
||||
</HStack>
|
||||
<Text fontSize="xs" color={THEME.textSecondary}>
|
||||
任职日期：{formatDate(person.start_date)}
|
||||
</Text>
|
||||
</VStack>
|
||||
</HStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
)
|
||||
)}
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default ManagementPanel;
|
||||
@@ -1,82 +1,28 @@
|
||||
// src/views/Company/components/CompanyOverview/BasicInfoTab/components/ShareholderPanel.tsx
|
||||
// 股权结构 Tab Panel
|
||||
// 股权结构 Tab Panel - 使用拆分后的子组件
|
||||
|
||||
import React from "react";
|
||||
import {
|
||||
Box,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Heading,
|
||||
Badge,
|
||||
Icon,
|
||||
Card,
|
||||
CardBody,
|
||||
CardHeader,
|
||||
SimpleGrid,
|
||||
Table,
|
||||
Thead,
|
||||
Tbody,
|
||||
Tr,
|
||||
Th,
|
||||
Td,
|
||||
TableContainer,
|
||||
Tooltip,
|
||||
Stat,
|
||||
StatLabel,
|
||||
StatNumber,
|
||||
StatHelpText,
|
||||
} from "@chakra-ui/react";
|
||||
import {
|
||||
FaCrown,
|
||||
FaChartPie,
|
||||
FaUsers,
|
||||
FaChartLine,
|
||||
FaArrowUp,
|
||||
FaArrowDown,
|
||||
FaChartBar,
|
||||
FaBuilding,
|
||||
FaGlobe,
|
||||
FaShieldAlt,
|
||||
FaBriefcase,
|
||||
FaCircle,
|
||||
FaUserTie,
|
||||
} from "react-icons/fa";
|
||||
import { VStack, SimpleGrid, Box } from "@chakra-ui/react";
|
||||
|
||||
import { useShareholderData } from "../../hooks/useShareholderData";
|
||||
import { THEME } from "../config";
|
||||
import { formatPercentage, formatShares, formatDate } from "../utils";
|
||||
import {
|
||||
ActualControlCard,
|
||||
ConcentrationCard,
|
||||
ShareholdersTable,
|
||||
} from "../../components/shareholder";
|
||||
import LoadingState from "./LoadingState";
|
||||
|
||||
interface ShareholderPanelProps {
|
||||
stockCode: string;
|
||||
}
|
||||
|
||||
// 股东类型标签组件
|
||||
const ShareholderTypeBadge: React.FC<{ type: string }> = ({ type }) => {
|
||||
const typeConfig: Record<string, { color: string; icon: React.ElementType }> = {
|
||||
基金: { color: "blue", icon: FaChartBar },
|
||||
个人: { color: "green", icon: FaUserTie },
|
||||
法人: { color: "purple", icon: FaBuilding },
|
||||
QFII: { color: "orange", icon: FaGlobe },
|
||||
社保: { color: "red", icon: FaShieldAlt },
|
||||
保险: { color: "teal", icon: FaShieldAlt },
|
||||
信托: { color: "cyan", icon: FaBriefcase },
|
||||
券商: { color: "pink", icon: FaChartLine },
|
||||
};
|
||||
|
||||
const config = Object.entries(typeConfig).find(([key]) =>
|
||||
type?.includes(key)
|
||||
)?.[1] || { color: "gray", icon: FaCircle };
|
||||
|
||||
return (
|
||||
<Badge colorScheme={config.color} size="sm">
|
||||
<Icon as={config.icon} mr={1} boxSize={3} />
|
||||
{type}
|
||||
</Badge>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 股权结构面板
|
||||
* 使用拆分后的子组件：
|
||||
* - ActualControlCard: 实际控制人卡片
|
||||
* - ConcentrationCard: 股权集中度卡片
|
||||
* - ShareholdersTable: 股东表格（合并版，支持十大股东和十大流通股东）
|
||||
*/
|
||||
const ShareholderPanel: React.FC<ShareholderPanelProps> = ({ stockCode }) => {
|
||||
const {
|
||||
actualControl,
|
||||
@@ -86,226 +32,31 @@ const ShareholderPanel: React.FC<ShareholderPanelProps> = ({ stockCode }) => {
|
||||
loading,
|
||||
} = useShareholderData(stockCode);
|
||||
|
||||
// 计算股权集中度变化
|
||||
const getConcentrationTrend = () => {
|
||||
const grouped: Record<string, Record<string, any>> = {};
|
||||
concentration.forEach((item: any) => {
|
||||
if (!grouped[item.end_date]) {
|
||||
grouped[item.end_date] = {};
|
||||
}
|
||||
grouped[item.end_date][item.stat_item] = item;
|
||||
});
|
||||
return Object.entries(grouped)
|
||||
.sort((a, b) => b[0].localeCompare(a[0]))
|
||||
.slice(0, 5);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <LoadingState message="加载股权结构数据..." />;
|
||||
}
|
||||
|
||||
return (
|
||||
<VStack spacing={6} align="stretch">
|
||||
{/* 实际控制人 */}
|
||||
{actualControl.length > 0 && (
|
||||
{/* 实际控制人 + 股权集中度 左右分布 */}
|
||||
<SimpleGrid columns={{ base: 1, lg: 2 }} spacing={6}>
|
||||
<Box>
|
||||
<HStack mb={4}>
|
||||
<Icon as={FaCrown} color={THEME.gold} boxSize={5} />
|
||||
<Heading size="sm" color={THEME.textPrimary}>实际控制人</Heading>
|
||||
</HStack>
|
||||
<Card bg={THEME.tableBg} border="1px solid" borderColor={THEME.border}>
|
||||
<CardBody>
|
||||
<HStack justify="space-between">
|
||||
<VStack align="start">
|
||||
<Text fontWeight="bold" fontSize="lg" color={THEME.textPrimary}>
|
||||
{actualControl[0].actual_controller_name}
|
||||
</Text>
|
||||
<HStack>
|
||||
<Badge bg={THEME.gold} color="gray.900">
|
||||
{actualControl[0].control_type}
|
||||
</Badge>
|
||||
<Text fontSize="sm" color={THEME.textSecondary}>
|
||||
截至 {formatDate(actualControl[0].end_date)}
|
||||
</Text>
|
||||
</HStack>
|
||||
</VStack>
|
||||
<Stat textAlign="right">
|
||||
<StatLabel color={THEME.textSecondary}>控制比例</StatLabel>
|
||||
<StatNumber color={THEME.goldLight}>
|
||||
{formatPercentage(actualControl[0].holding_ratio)}
|
||||
</StatNumber>
|
||||
<StatHelpText color={THEME.textSecondary}>
|
||||
{formatShares(actualControl[0].holding_shares)}
|
||||
</StatHelpText>
|
||||
</Stat>
|
||||
</HStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<ActualControlCard actualControl={actualControl} />
|
||||
</Box>
|
||||
)}
|
||||
<Box>
|
||||
<ConcentrationCard concentration={concentration} />
|
||||
</Box>
|
||||
</SimpleGrid>
|
||||
|
||||
{/* 股权集中度 */}
|
||||
{concentration.length > 0 && (
|
||||
{/* 十大股东 + 十大流通股东 左右分布 */}
|
||||
<SimpleGrid columns={{ base: 1, lg: 2 }} spacing={6}>
|
||||
<Box>
|
||||
<HStack mb={4}>
|
||||
<Icon as={FaChartPie} color={THEME.gold} boxSize={5} />
|
||||
<Heading size="sm" color={THEME.textPrimary}>股权集中度</Heading>
|
||||
</HStack>
|
||||
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
|
||||
{getConcentrationTrend()
|
||||
.slice(0, 1)
|
||||
.map(([date, items]) => (
|
||||
<Card key={date} bg={THEME.tableBg} border="1px solid" borderColor={THEME.border}>
|
||||
<CardHeader pb={2}>
|
||||
<Text fontSize="sm" color={THEME.textSecondary}>
|
||||
{formatDate(date)}
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody pt={2}>
|
||||
<VStack spacing={3} align="stretch">
|
||||
{Object.entries(items).map(([key, item]: [string, any]) => (
|
||||
<HStack key={key} justify="space-between">
|
||||
<Text fontSize="sm" color={THEME.textPrimary}>{item.stat_item}</Text>
|
||||
<HStack>
|
||||
<Text fontWeight="bold" color={THEME.goldLight}>
|
||||
{formatPercentage(item.holding_ratio)}
|
||||
</Text>
|
||||
{item.ratio_change && (
|
||||
<Badge colorScheme={item.ratio_change > 0 ? "red" : "green"}>
|
||||
<Icon
|
||||
as={item.ratio_change > 0 ? FaArrowUp : FaArrowDown}
|
||||
mr={1}
|
||||
boxSize={3}
|
||||
/>
|
||||
{Math.abs(item.ratio_change).toFixed(2)}%
|
||||
</Badge>
|
||||
)}
|
||||
</HStack>
|
||||
</HStack>
|
||||
))}
|
||||
</VStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
<ShareholdersTable type="top" shareholders={topShareholders} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* 十大股东 */}
|
||||
{topShareholders.length > 0 && (
|
||||
<Box>
|
||||
<HStack mb={4}>
|
||||
<Icon as={FaUsers} color={THEME.gold} boxSize={5} />
|
||||
<Heading size="sm" color={THEME.textPrimary}>十大股东</Heading>
|
||||
<Badge bg={THEME.gold} color="gray.900">
|
||||
{formatDate(topShareholders[0].end_date)}
|
||||
</Badge>
|
||||
</HStack>
|
||||
<TableContainer>
|
||||
<Table size="sm" variant="unstyled">
|
||||
<Thead>
|
||||
<Tr borderBottom="1px solid" borderColor={THEME.border}>
|
||||
<Th color={THEME.textSecondary}>排名</Th>
|
||||
<Th color={THEME.textSecondary}>股东名称</Th>
|
||||
<Th color={THEME.textSecondary}>股东类型</Th>
|
||||
<Th isNumeric color={THEME.textSecondary}>持股数量</Th>
|
||||
<Th isNumeric color={THEME.textSecondary}>持股比例</Th>
|
||||
<Th color={THEME.textSecondary}>股份性质</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{topShareholders.slice(0, 10).map((shareholder: any, idx: number) => (
|
||||
<Tr key={idx} borderBottom="1px solid" borderColor={THEME.border} _hover={{ bg: THEME.tableHoverBg }}>
|
||||
<Td>
|
||||
<Badge bg={idx < 3 ? THEME.gold : "gray.600"} color={idx < 3 ? "gray.900" : THEME.textPrimary}>
|
||||
{shareholder.shareholder_rank}
|
||||
</Badge>
|
||||
</Td>
|
||||
<Td>
|
||||
<Tooltip label={shareholder.shareholder_name}>
|
||||
<Text noOfLines={1} maxW="200px" color={THEME.textPrimary}>
|
||||
{shareholder.shareholder_name}
|
||||
</Text>
|
||||
</Tooltip>
|
||||
</Td>
|
||||
<Td>
|
||||
<ShareholderTypeBadge type={shareholder.shareholder_type} />
|
||||
</Td>
|
||||
<Td isNumeric fontWeight="medium" color={THEME.textPrimary}>
|
||||
{formatShares(shareholder.holding_shares)}
|
||||
</Td>
|
||||
<Td isNumeric>
|
||||
<Text color={THEME.goldLight} fontWeight="bold">
|
||||
{formatPercentage(shareholder.total_share_ratio)}
|
||||
</Text>
|
||||
</Td>
|
||||
<Td>
|
||||
<Badge size="sm" bg="transparent" border="1px solid" borderColor={THEME.border} color={THEME.textSecondary}>
|
||||
{shareholder.share_nature || "流通股"}
|
||||
</Badge>
|
||||
</Td>
|
||||
</Tr>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<ShareholdersTable type="circulation" shareholders={topCirculationShareholders} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* 十大流通股东 */}
|
||||
{topCirculationShareholders.length > 0 && (
|
||||
<Box>
|
||||
<HStack mb={4}>
|
||||
<Icon as={FaChartLine} color={THEME.gold} boxSize={5} />
|
||||
<Heading size="sm" color={THEME.textPrimary}>十大流通股东</Heading>
|
||||
<Badge bg={THEME.gold} color="gray.900">
|
||||
{formatDate(topCirculationShareholders[0].end_date)}
|
||||
</Badge>
|
||||
</HStack>
|
||||
<TableContainer>
|
||||
<Table size="sm" variant="unstyled">
|
||||
<Thead>
|
||||
<Tr borderBottom="1px solid" borderColor={THEME.border}>
|
||||
<Th color={THEME.textSecondary}>排名</Th>
|
||||
<Th color={THEME.textSecondary}>股东名称</Th>
|
||||
<Th color={THEME.textSecondary}>股东类型</Th>
|
||||
<Th isNumeric color={THEME.textSecondary}>持股数量</Th>
|
||||
<Th isNumeric color={THEME.textSecondary}>流通股比例</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{topCirculationShareholders.slice(0, 10).map((shareholder: any, idx: number) => (
|
||||
<Tr key={idx} borderBottom="1px solid" borderColor={THEME.border} _hover={{ bg: THEME.tableHoverBg }}>
|
||||
<Td>
|
||||
<Badge bg={idx < 3 ? THEME.gold : "gray.600"} color={idx < 3 ? "gray.900" : THEME.textPrimary}>
|
||||
{shareholder.shareholder_rank}
|
||||
</Badge>
|
||||
</Td>
|
||||
<Td>
|
||||
<Tooltip label={shareholder.shareholder_name}>
|
||||
<Text noOfLines={1} maxW="250px" color={THEME.textPrimary}>
|
||||
{shareholder.shareholder_name}
|
||||
</Text>
|
||||
</Tooltip>
|
||||
</Td>
|
||||
<Td>
|
||||
<ShareholderTypeBadge type={shareholder.shareholder_type} />
|
||||
</Td>
|
||||
<Td isNumeric fontWeight="medium" color={THEME.textPrimary}>
|
||||
{formatShares(shareholder.holding_shares)}
|
||||
</Td>
|
||||
<Td isNumeric>
|
||||
<Text color={THEME.goldLight} fontWeight="bold">
|
||||
{formatPercentage(shareholder.circulation_share_ratio)}
|
||||
</Text>
|
||||
</Td>
|
||||
</Tr>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Box>
|
||||
)}
|
||||
</SimpleGrid>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
export { default as LoadingState } from "./LoadingState";
|
||||
export { default as ShareholderPanel } from "./ShareholderPanel";
|
||||
export { default as ManagementPanel } from "./ManagementPanel";
|
||||
export { ManagementPanel } from "./management";
|
||||
export { default as AnnouncementsPanel } from "./AnnouncementsPanel";
|
||||
export { default as BranchesPanel } from "./BranchesPanel";
|
||||
export { default as BusinessInfoPanel } from "./BusinessInfoPanel";
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
// src/views/Company/components/CompanyOverview/BasicInfoTab/components/management/CategorySection.tsx
|
||||
// 管理层分类区块组件
|
||||
|
||||
import React, { memo } from "react";
|
||||
import {
|
||||
Box,
|
||||
HStack,
|
||||
Heading,
|
||||
Badge,
|
||||
Icon,
|
||||
SimpleGrid,
|
||||
} from "@chakra-ui/react";
|
||||
import type { IconType } from "react-icons";
|
||||
|
||||
import { THEME } from "../../config";
|
||||
import ManagementCard from "./ManagementCard";
|
||||
import type { ManagementPerson, ManagementCategory } from "./types";
|
||||
|
||||
interface CategorySectionProps {
|
||||
category: ManagementCategory;
|
||||
people: ManagementPerson[];
|
||||
icon: IconType;
|
||||
color: string;
|
||||
}
|
||||
|
||||
const CategorySection: React.FC<CategorySectionProps> = ({
|
||||
category,
|
||||
people,
|
||||
icon,
|
||||
color,
|
||||
}) => {
|
||||
if (people.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* 分类标题 */}
|
||||
<HStack mb={4}>
|
||||
<Icon as={icon} color={color} boxSize={5} />
|
||||
<Heading size="sm" color={THEME.textPrimary}>
|
||||
{category}
|
||||
</Heading>
|
||||
<Badge bg={THEME.gold} color="gray.900">
|
||||
{people.length}人
|
||||
</Badge>
|
||||
</HStack>
|
||||
|
||||
{/* 人员卡片网格 */}
|
||||
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={4}>
|
||||
{people.map((person, idx) => (
|
||||
<ManagementCard
|
||||
key={`${person.name}-${idx}`}
|
||||
person={person}
|
||||
categoryColor={color}
|
||||
/>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(CategorySection);
|
||||
@@ -0,0 +1,100 @@
|
||||
// src/views/Company/components/CompanyOverview/BasicInfoTab/components/management/ManagementCard.tsx
|
||||
// 管理人员卡片组件
|
||||
|
||||
import React, { memo } from "react";
|
||||
import {
|
||||
HStack,
|
||||
VStack,
|
||||
Text,
|
||||
Icon,
|
||||
Card,
|
||||
CardBody,
|
||||
Avatar,
|
||||
Tag,
|
||||
} from "@chakra-ui/react";
|
||||
import {
|
||||
FaVenusMars,
|
||||
FaGraduationCap,
|
||||
FaPassport,
|
||||
} from "react-icons/fa";
|
||||
|
||||
import { THEME } from "../../config";
|
||||
import { formatDate } from "../../utils";
|
||||
import type { ManagementPerson } from "./types";
|
||||
|
||||
interface ManagementCardProps {
|
||||
person: ManagementPerson;
|
||||
categoryColor: string;
|
||||
}
|
||||
|
||||
const ManagementCard: React.FC<ManagementCardProps> = ({ person, categoryColor }) => {
|
||||
const currentYear = new Date().getFullYear();
|
||||
const age = person.birth_year ? currentYear - parseInt(person.birth_year, 10) : null;
|
||||
|
||||
return (
|
||||
<Card
|
||||
bg={THEME.tableBg}
|
||||
border="1px solid"
|
||||
borderColor={THEME.border}
|
||||
size="sm"
|
||||
>
|
||||
<CardBody>
|
||||
<HStack spacing={3} align="start">
|
||||
<Avatar
|
||||
name={person.name}
|
||||
size="md"
|
||||
bg={categoryColor}
|
||||
/>
|
||||
<VStack align="start" spacing={1} flex={1}>
|
||||
{/* 姓名和性别 */}
|
||||
<HStack>
|
||||
<Text fontWeight="bold" color={THEME.textPrimary}>
|
||||
{person.name}
|
||||
</Text>
|
||||
{person.gender && (
|
||||
<Icon
|
||||
as={FaVenusMars}
|
||||
color={person.gender === "男" ? "blue.400" : "pink.400"}
|
||||
boxSize={3}
|
||||
/>
|
||||
)}
|
||||
</HStack>
|
||||
|
||||
{/* 职位 */}
|
||||
<Text fontSize="sm" color={THEME.goldLight}>
|
||||
{person.position_name}
|
||||
</Text>
|
||||
|
||||
{/* 标签：学历、年龄、国籍 */}
|
||||
<HStack spacing={2} flexWrap="wrap">
|
||||
{person.education && (
|
||||
<Tag size="sm" bg={THEME.tableHoverBg} color={THEME.textSecondary}>
|
||||
<Icon as={FaGraduationCap} mr={1} boxSize={3} />
|
||||
{person.education}
|
||||
</Tag>
|
||||
)}
|
||||
{age && (
|
||||
<Tag size="sm" bg={THEME.tableHoverBg} color={THEME.textSecondary}>
|
||||
{age}岁
|
||||
</Tag>
|
||||
)}
|
||||
{person.nationality && person.nationality !== "中国" && (
|
||||
<Tag size="sm" bg="orange.600" color="white">
|
||||
<Icon as={FaPassport} mr={1} boxSize={3} />
|
||||
{person.nationality}
|
||||
</Tag>
|
||||
)}
|
||||
</HStack>
|
||||
|
||||
{/* 任职日期 */}
|
||||
<Text fontSize="xs" color={THEME.textSecondary}>
|
||||
任职日期：{formatDate(person.start_date)}
|
||||
</Text>
|
||||
</VStack>
|
||||
</HStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(ManagementCard);
|
||||
@@ -0,0 +1,105 @@
|
||||
// src/views/Company/components/CompanyOverview/BasicInfoTab/components/management/ManagementPanel.tsx
|
||||
// 管理团队 Tab Panel（重构版）
|
||||
|
||||
import React, { useMemo } from "react";
|
||||
import { VStack } from "@chakra-ui/react";
|
||||
import {
|
||||
FaUserTie,
|
||||
FaCrown,
|
||||
FaEye,
|
||||
FaUsers,
|
||||
} from "react-icons/fa";
|
||||
|
||||
import { useManagementData } from "../../../hooks/useManagementData";
|
||||
import { THEME } from "../../config";
|
||||
import LoadingState from "../LoadingState";
|
||||
import CategorySection from "./CategorySection";
|
||||
import type {
|
||||
ManagementPerson,
|
||||
ManagementCategory,
|
||||
CategorizedManagement,
|
||||
CategoryConfig,
|
||||
} from "./types";
|
||||
|
||||
interface ManagementPanelProps {
|
||||
stockCode: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 分类配置映射
|
||||
*/
|
||||
const CATEGORY_CONFIG: Record<ManagementCategory, CategoryConfig> = {
|
||||
高管: { icon: FaUserTie, color: THEME.gold },
|
||||
董事: { icon: FaCrown, color: THEME.goldLight },
|
||||
监事: { icon: FaEye, color: "green.400" },
|
||||
其他: { icon: FaUsers, color: THEME.textSecondary },
|
||||
};
|
||||
|
||||
/**
|
||||
* 分类顺序
|
||||
*/
|
||||
const CATEGORY_ORDER: ManagementCategory[] = ["高管", "董事", "监事", "其他"];
|
||||
|
||||
/**
|
||||
* 根据职位信息对管理人员进行分类
|
||||
*/
|
||||
const categorizeManagement = (management: ManagementPerson[]): CategorizedManagement => {
|
||||
const categories: CategorizedManagement = {
|
||||
高管: [],
|
||||
董事: [],
|
||||
监事: [],
|
||||
其他: [],
|
||||
};
|
||||
|
||||
management.forEach((person) => {
|
||||
const positionCategory = person.position_category;
|
||||
const positionName = person.position_name || "";
|
||||
|
||||
if (positionCategory === "高管" || positionName.includes("总")) {
|
||||
categories["高管"].push(person);
|
||||
} else if (positionCategory === "董事" || positionName.includes("董事")) {
|
||||
categories["董事"].push(person);
|
||||
} else if (positionCategory === "监事" || positionName.includes("监事")) {
|
||||
categories["监事"].push(person);
|
||||
} else {
|
||||
categories["其他"].push(person);
|
||||
}
|
||||
});
|
||||
|
||||
return categories;
|
||||
};
|
||||
|
||||
const ManagementPanel: React.FC<ManagementPanelProps> = ({ stockCode }) => {
|
||||
const { management, loading } = useManagementData(stockCode);
|
||||
|
||||
// 使用 useMemo 缓存分类计算结果
|
||||
const categorizedManagement = useMemo(
|
||||
() => categorizeManagement(management as ManagementPerson[]),
|
||||
[management]
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
return <LoadingState message="加载管理团队数据..." />;
|
||||
}
|
||||
|
||||
return (
|
||||
<VStack spacing={6} align="stretch">
|
||||
{CATEGORY_ORDER.map((category) => {
|
||||
const config = CATEGORY_CONFIG[category];
|
||||
const people = categorizedManagement[category];
|
||||
|
||||
return (
|
||||
<CategorySection
|
||||
key={category}
|
||||
category={category}
|
||||
people={people}
|
||||
icon={config.icon}
|
||||
color={config.color}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default ManagementPanel;
|
||||
@@ -0,0 +1,7 @@
|
||||
// src/views/Company/components/CompanyOverview/BasicInfoTab/components/management/index.ts
|
||||
// 管理团队组件导出
|
||||
|
||||
export { default as ManagementPanel } from "./ManagementPanel";
|
||||
export { default as ManagementCard } from "./ManagementCard";
|
||||
export { default as CategorySection } from "./CategorySection";
|
||||
export * from "./types";
|
||||
@@ -0,0 +1,36 @@
|
||||
// src/views/Company/components/CompanyOverview/BasicInfoTab/components/management/types.ts
|
||||
// 管理团队相关类型定义
|
||||
|
||||
import type { IconType } from "react-icons";
|
||||
|
||||
/**
|
||||
* 管理人员信息
|
||||
*/
|
||||
export interface ManagementPerson {
|
||||
name: string;
|
||||
position_name?: string;
|
||||
position_category?: string;
|
||||
gender?: "男" | "女";
|
||||
education?: string;
|
||||
birth_year?: string;
|
||||
nationality?: string;
|
||||
start_date?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 管理层分类
|
||||
*/
|
||||
export type ManagementCategory = "高管" | "董事" | "监事" | "其他";
|
||||
|
||||
/**
|
||||
* 分类后的管理层数据
|
||||
*/
|
||||
export type CategorizedManagement = Record<ManagementCategory, ManagementPerson[]>;
|
||||
|
||||
/**
|
||||
* 分类配置项
|
||||
*/
|
||||
export interface CategoryConfig {
|
||||
icon: IconType;
|
||||
color: string;
|
||||
}
|
||||
@@ -5,7 +5,6 @@ import { IconType } from "react-icons";
|
||||
import {
|
||||
FaShareAlt,
|
||||
FaUserTie,
|
||||
FaBullhorn,
|
||||
FaSitemap,
|
||||
FaInfoCircle,
|
||||
} from "react-icons/fa";
|
||||
@@ -72,12 +71,6 @@ export const TAB_CONFIG: TabConfig[] = [
|
||||
icon: FaUserTie,
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
key: "announcements",
|
||||
name: "公司公告",
|
||||
icon: FaBullhorn,
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
key: "branches",
|
||||
name: "分支机构",
|
||||
|
||||
@@ -1,201 +0,0 @@
|
||||
// src/views/Company/components/CompanyOverview/CompanyHeaderCard.tsx
|
||||
// 公司头部信息卡片组件 - 黑金主题
|
||||
|
||||
import React from "react";
|
||||
import {
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Badge,
|
||||
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<CompanyHeaderCardProps> = ({ basicInfo }) => {
|
||||
return (
|
||||
<Card
|
||||
bg={THEME.cardBg}
|
||||
shadow="xl"
|
||||
borderTop="3px solid"
|
||||
borderTopColor={THEME.gold}
|
||||
borderRadius="lg"
|
||||
>
|
||||
<CardBody px={0}>
|
||||
<VStack align="stretch" spacing={4}>
|
||||
{/* 区块一：公司身份与分类 */}
|
||||
<HStack spacing={4}>
|
||||
<Box
|
||||
w="56px"
|
||||
h="56px"
|
||||
borderRadius="full"
|
||||
bg={`linear-gradient(135deg, ${THEME.gold} 0%, ${THEME.goldLight} 100%)`}
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
boxShadow={`0 4px 14px rgba(212, 175, 55, 0.4)`}
|
||||
>
|
||||
<Icon as={FaBuilding} color="gray.900" boxSize={7} />
|
||||
</Box>
|
||||
<VStack align="start" spacing={1}>
|
||||
<HStack flexWrap="wrap">
|
||||
<Heading size="lg" color={THEME.textPrimary}>
|
||||
{basicInfo.ORGNAME || basicInfo.SECNAME}
|
||||
</Heading>
|
||||
<Badge
|
||||
bg={THEME.gold}
|
||||
color="gray.900"
|
||||
fontSize="md"
|
||||
px={2}
|
||||
py={1}
|
||||
fontWeight="bold"
|
||||
>
|
||||
{basicInfo.SECCODE}
|
||||
</Badge>
|
||||
</HStack>
|
||||
<HStack spacing={2} flexWrap="wrap">
|
||||
<Badge
|
||||
bg="transparent"
|
||||
border="1px solid"
|
||||
borderColor={THEME.gold}
|
||||
color={THEME.goldLight}
|
||||
fontSize="xs"
|
||||
>
|
||||
{basicInfo.sw_industry_l1}
|
||||
</Badge>
|
||||
<Badge
|
||||
bg="transparent"
|
||||
border="1px solid"
|
||||
borderColor="gray.600"
|
||||
color={THEME.textSecondary}
|
||||
fontSize="xs"
|
||||
>
|
||||
{basicInfo.sw_industry_l2}
|
||||
</Badge>
|
||||
{basicInfo.sw_industry_l3 && (
|
||||
<Badge
|
||||
bg="transparent"
|
||||
border="1px solid"
|
||||
borderColor="gray.600"
|
||||
color={THEME.textSecondary}
|
||||
fontSize="xs"
|
||||
>
|
||||
{basicInfo.sw_industry_l3}
|
||||
</Badge>
|
||||
)}
|
||||
</HStack>
|
||||
</VStack>
|
||||
</HStack>
|
||||
|
||||
<Divider borderColor={THEME.border} />
|
||||
|
||||
{/* 区块二：关键属性网格 */}
|
||||
<SimpleGrid columns={{ base: 2, md: 4 }} spacing={4}>
|
||||
<HStack>
|
||||
<Icon as={FaCalendarAlt} color={THEME.gold} boxSize={4} />
|
||||
<Box>
|
||||
<Text fontSize="xs" color={THEME.textSecondary}>成立日期</Text>
|
||||
<Text fontSize="sm" fontWeight="bold" color={THEME.textPrimary}>
|
||||
{formatDate(basicInfo.establish_date)}
|
||||
</Text>
|
||||
</Box>
|
||||
</HStack>
|
||||
<HStack>
|
||||
<Icon as={FaCoins} color={THEME.gold} boxSize={4} />
|
||||
<Box>
|
||||
<Text fontSize="xs" color={THEME.textSecondary}>注册资本</Text>
|
||||
<Text fontSize="sm" fontWeight="bold" color={THEME.goldLight}>
|
||||
{formatRegisteredCapital(basicInfo.reg_capital)}
|
||||
</Text>
|
||||
</Box>
|
||||
</HStack>
|
||||
<HStack>
|
||||
<Icon as={FaMapMarkerAlt} color={THEME.gold} boxSize={4} />
|
||||
<Box>
|
||||
<Text fontSize="xs" color={THEME.textSecondary}>所在地</Text>
|
||||
<Text fontSize="sm" fontWeight="bold" color={THEME.textPrimary}>
|
||||
{basicInfo.province} {basicInfo.city}
|
||||
</Text>
|
||||
</Box>
|
||||
</HStack>
|
||||
<HStack>
|
||||
<Icon as={FaGlobe} color={THEME.gold} boxSize={4} />
|
||||
<Box>
|
||||
<Text fontSize="xs" color={THEME.textSecondary}>官网</Text>
|
||||
<Link
|
||||
href={basicInfo.website}
|
||||
isExternal
|
||||
color={THEME.goldLight}
|
||||
fontSize="sm"
|
||||
fontWeight="bold"
|
||||
noOfLines={1}
|
||||
_hover={{ color: THEME.gold }}
|
||||
>
|
||||
{basicInfo.website ? (
|
||||
<>访问官网 <ExternalLinkIcon mx="2px" /></>
|
||||
) : (
|
||||
"暂无"
|
||||
)}
|
||||
</Link>
|
||||
</Box>
|
||||
</HStack>
|
||||
</SimpleGrid>
|
||||
|
||||
<Divider borderColor={THEME.border} />
|
||||
|
||||
{/* 区块三：公司介绍 */}
|
||||
<Box>
|
||||
<Text fontSize="sm" color={THEME.textSecondary} noOfLines={2}>
|
||||
{basicInfo.company_intro}
|
||||
</Text>
|
||||
{basicInfo.company_intro && basicInfo.company_intro.length > 100 && (
|
||||
<Link
|
||||
color={THEME.goldLight}
|
||||
fontSize="sm"
|
||||
mt={1}
|
||||
display="inline-block"
|
||||
_hover={{ color: THEME.gold }}
|
||||
>
|
||||
查看完整介绍
|
||||
</Link>
|
||||
)}
|
||||
</Box>
|
||||
</VStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompanyHeaderCard;
|
||||
@@ -0,0 +1,96 @@
|
||||
// src/views/Company/components/CompanyOverview/components/shareholder/ActualControlCard.tsx
|
||||
// 实际控制人卡片组件
|
||||
|
||||
import React from "react";
|
||||
import {
|
||||
Box,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Heading,
|
||||
Badge,
|
||||
Icon,
|
||||
Card,
|
||||
CardBody,
|
||||
Stat,
|
||||
StatLabel,
|
||||
StatNumber,
|
||||
StatHelpText,
|
||||
} from "@chakra-ui/react";
|
||||
import { FaCrown } from "react-icons/fa";
|
||||
import type { ActualControl } from "../../types";
|
||||
import { THEME } from "../../BasicInfoTab/config";
|
||||
|
||||
// 格式化工具函数
|
||||
const formatPercentage = (value: number | null | undefined): string => {
|
||||
if (value === null || value === undefined) return "-";
|
||||
return `${(value * 100).toFixed(2)}%`;
|
||||
};
|
||||
|
||||
const formatShares = (value: number | null | undefined): string => {
|
||||
if (value === null || value === undefined) return "-";
|
||||
if (value >= 100000000) {
|
||||
return `${(value / 100000000).toFixed(2)}亿股`;
|
||||
} else if (value >= 10000) {
|
||||
return `${(value / 10000).toFixed(2)}万股`;
|
||||
}
|
||||
return `${value.toLocaleString()}股`;
|
||||
};
|
||||
|
||||
const formatDate = (dateStr: string | null | undefined): string => {
|
||||
if (!dateStr) return "-";
|
||||
return dateStr.split("T")[0];
|
||||
};
|
||||
|
||||
interface ActualControlCardProps {
|
||||
actualControl: ActualControl[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 实际控制人卡片
|
||||
*/
|
||||
const ActualControlCard: React.FC<ActualControlCardProps> = ({ actualControl = [] }) => {
|
||||
if (!actualControl.length) return null;
|
||||
|
||||
const data = actualControl[0];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<HStack mb={4}>
|
||||
<Icon as={FaCrown} color={THEME.gold} boxSize={5} />
|
||||
<Heading size="sm" color={THEME.gold}>实际控制人</Heading>
|
||||
</HStack>
|
||||
<Card bg={THEME.cardBg} borderColor={THEME.border} borderWidth="1px">
|
||||
<CardBody>
|
||||
<HStack
|
||||
justify="space-between"
|
||||
flexDir={{ base: "column", md: "row" }}
|
||||
align={{ base: "stretch", md: "center" }}
|
||||
gap={4}
|
||||
>
|
||||
<VStack align={{ base: "center", md: "start" }}>
|
||||
<Text fontWeight="bold" fontSize="lg" color={THEME.textPrimary}>
|
||||
{data.actual_controller_name}
|
||||
</Text>
|
||||
<HStack>
|
||||
<Badge colorScheme="purple">{data.control_type}</Badge>
|
||||
<Text fontSize="sm" color={THEME.textSecondary}>
|
||||
截至 {formatDate(data.end_date)}
|
||||
</Text>
|
||||
</HStack>
|
||||
</VStack>
|
||||
<Stat textAlign={{ base: "center", md: "right" }}>
|
||||
<StatLabel color={THEME.textSecondary}>控制比例</StatLabel>
|
||||
<StatNumber color={THEME.goldLight}>
|
||||
{formatPercentage(data.holding_ratio)}
|
||||
</StatNumber>
|
||||
<StatHelpText color={THEME.textSecondary}>{formatShares(data.holding_shares)}</StatHelpText>
|
||||
</Stat>
|
||||
</HStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActualControlCard;
|
||||
@@ -0,0 +1,234 @@
|
||||
// src/views/Company/components/CompanyOverview/components/shareholder/ConcentrationCard.tsx
|
||||
// 股权集中度卡片组件
|
||||
|
||||
import React, { useMemo, useRef, useEffect } from "react";
|
||||
import {
|
||||
Box,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Heading,
|
||||
Badge,
|
||||
Icon,
|
||||
Card,
|
||||
CardBody,
|
||||
CardHeader,
|
||||
SimpleGrid,
|
||||
} from "@chakra-ui/react";
|
||||
import { FaChartPie, FaArrowUp, FaArrowDown } from "react-icons/fa";
|
||||
import * as echarts from "echarts";
|
||||
import type { Concentration } from "../../types";
|
||||
import { THEME } from "../../BasicInfoTab/config";
|
||||
|
||||
// 格式化工具函数
|
||||
const formatPercentage = (value: number | null | undefined): string => {
|
||||
if (value === null || value === undefined) return "-";
|
||||
return `${(value * 100).toFixed(2)}%`;
|
||||
};
|
||||
|
||||
const formatDate = (dateStr: string | null | undefined): string => {
|
||||
if (!dateStr) return "-";
|
||||
return dateStr.split("T")[0];
|
||||
};
|
||||
|
||||
interface ConcentrationCardProps {
|
||||
concentration: Concentration[];
|
||||
}
|
||||
|
||||
// 饼图颜色配置（黑金主题）
|
||||
const PIE_COLORS = [
|
||||
"#D4AF37", // 金色 - 前1大股东
|
||||
"#F0D78C", // 浅金色 - 第2-3大股东
|
||||
"#B8860B", // 暗金色 - 第4-5大股东
|
||||
"#DAA520", // 金麒麟色 - 第6-10大股东
|
||||
"#4A5568", // 灰色 - 其他股东
|
||||
];
|
||||
|
||||
/**
|
||||
* 股权集中度卡片
|
||||
*/
|
||||
const ConcentrationCard: React.FC<ConcentrationCardProps> = ({ concentration = [] }) => {
|
||||
const chartRef = useRef<HTMLDivElement>(null);
|
||||
const chartInstance = useRef<echarts.ECharts | null>(null);
|
||||
|
||||
// 按日期分组
|
||||
const groupedData = useMemo(() => {
|
||||
const grouped: Record<string, Record<string, Concentration>> = {};
|
||||
concentration.forEach((item) => {
|
||||
if (!grouped[item.end_date]) {
|
||||
grouped[item.end_date] = {};
|
||||
}
|
||||
grouped[item.end_date][item.stat_item] = item;
|
||||
});
|
||||
return Object.entries(grouped)
|
||||
.sort((a, b) => b[0].localeCompare(a[0]))
|
||||
.slice(0, 1); // 只取最新一期
|
||||
}, [concentration]);
|
||||
|
||||
// 计算饼图数据
|
||||
const pieData = useMemo(() => {
|
||||
if (groupedData.length === 0) return [];
|
||||
|
||||
const [, items] = groupedData[0];
|
||||
const top1 = items["前1大股东"]?.holding_ratio || 0;
|
||||
const top3 = items["前3大股东"]?.holding_ratio || 0;
|
||||
const top5 = items["前5大股东"]?.holding_ratio || 0;
|
||||
const top10 = items["前10大股东"]?.holding_ratio || 0;
|
||||
|
||||
return [
|
||||
{ name: "前1大股东", value: Number((top1 * 100).toFixed(2)) },
|
||||
{ name: "第2-3大股东", value: Number(((top3 - top1) * 100).toFixed(2)) },
|
||||
{ name: "第4-5大股东", value: Number(((top5 - top3) * 100).toFixed(2)) },
|
||||
{ name: "第6-10大股东", value: Number(((top10 - top5) * 100).toFixed(2)) },
|
||||
{ name: "其他股东", value: Number(((1 - top10) * 100).toFixed(2)) },
|
||||
].filter(item => item.value > 0);
|
||||
}, [groupedData]);
|
||||
|
||||
// 初始化和更新图表
|
||||
useEffect(() => {
|
||||
if (!chartRef.current || pieData.length === 0) return;
|
||||
|
||||
// 使用 requestAnimationFrame 确保 DOM 渲染完成后再初始化
|
||||
const initChart = () => {
|
||||
if (!chartRef.current) return;
|
||||
|
||||
// 初始化图表
|
||||
if (!chartInstance.current) {
|
||||
chartInstance.current = echarts.init(chartRef.current);
|
||||
}
|
||||
|
||||
const option: echarts.EChartsOption = {
|
||||
backgroundColor: "transparent",
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{b}: {c}%",
|
||||
backgroundColor: "rgba(0,0,0,0.8)",
|
||||
borderColor: THEME.gold,
|
||||
textStyle: { color: "#fff" },
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
right: 10,
|
||||
top: "center",
|
||||
textStyle: { color: THEME.textSecondary, fontSize: 11 },
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "股权集中度",
|
||||
type: "pie",
|
||||
radius: ["40%", "70%"],
|
||||
center: ["35%", "50%"],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 4,
|
||||
borderColor: THEME.cardBg,
|
||||
borderWidth: 2,
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 12,
|
||||
fontWeight: "bold",
|
||||
color: THEME.textPrimary,
|
||||
formatter: "{b}\n{c}%",
|
||||
},
|
||||
},
|
||||
labelLine: { show: false },
|
||||
data: pieData.map((item, index) => ({
|
||||
...item,
|
||||
itemStyle: { color: PIE_COLORS[index] },
|
||||
})),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
chartInstance.current.setOption(option);
|
||||
|
||||
// 延迟 resize 确保容器尺寸已计算完成
|
||||
setTimeout(() => {
|
||||
chartInstance.current?.resize();
|
||||
}, 100);
|
||||
};
|
||||
|
||||
// 延迟初始化，确保布局完成
|
||||
const rafId = requestAnimationFrame(initChart);
|
||||
|
||||
// 响应式
|
||||
const handleResize = () => chartInstance.current?.resize();
|
||||
window.addEventListener("resize", handleResize);
|
||||
|
||||
return () => {
|
||||
cancelAnimationFrame(rafId);
|
||||
window.removeEventListener("resize", handleResize);
|
||||
};
|
||||
}, [pieData]);
|
||||
|
||||
// 组件卸载时销毁图表
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
chartInstance.current?.dispose();
|
||||
};
|
||||
}, []);
|
||||
|
||||
if (!concentration.length) return null;
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<HStack mb={4}>
|
||||
<Icon as={FaChartPie} color={THEME.gold} boxSize={5} />
|
||||
<Heading size="sm" color={THEME.gold}>股权集中度</Heading>
|
||||
</HStack>
|
||||
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
|
||||
{/* 数据卡片 */}
|
||||
{groupedData.map(([date, items]) => (
|
||||
<Card key={date} bg={THEME.cardBg} borderColor={THEME.border} borderWidth="1px">
|
||||
<CardHeader pb={2}>
|
||||
<Text fontSize="sm" color={THEME.textSecondary}>
|
||||
{formatDate(date)}
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody pt={2}>
|
||||
<VStack spacing={3} align="stretch">
|
||||
{Object.entries(items).map(([key, item]) => (
|
||||
<HStack key={key} justify="space-between">
|
||||
<Text fontSize="sm" color={THEME.textPrimary}>{item.stat_item}</Text>
|
||||
<HStack>
|
||||
<Text fontWeight="bold" color={THEME.goldLight}>
|
||||
{formatPercentage(item.holding_ratio)}
|
||||
</Text>
|
||||
{item.ratio_change && (
|
||||
<Badge
|
||||
colorScheme={item.ratio_change > 0 ? "red" : "green"}
|
||||
>
|
||||
<Icon
|
||||
as={item.ratio_change > 0 ? FaArrowUp : FaArrowDown}
|
||||
mr={1}
|
||||
boxSize={3}
|
||||
/>
|
||||
{Math.abs(item.ratio_change).toFixed(2)}%
|
||||
</Badge>
|
||||
)}
|
||||
</HStack>
|
||||
</HStack>
|
||||
))}
|
||||
</VStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
))}
|
||||
{/* 饼图 */}
|
||||
<Card bg={THEME.cardBg} borderColor={THEME.border} borderWidth="1px">
|
||||
<CardBody p={2}>
|
||||
<Box ref={chartRef} h="180px" w="100%" />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConcentrationCard;
|
||||
@@ -0,0 +1,226 @@
|
||||
// src/views/Company/components/CompanyOverview/components/shareholder/ShareholdersTable.tsx
|
||||
// 股东表格组件（合并版）- 支持十大股东和十大流通股东
|
||||
|
||||
import React, { useMemo } from "react";
|
||||
import { Box, HStack, Heading, Badge, Icon, useBreakpointValue } from "@chakra-ui/react";
|
||||
import { Table, Tag, Tooltip, ConfigProvider } from "antd";
|
||||
import type { ColumnsType } from "antd/es/table";
|
||||
import { FaUsers, FaChartLine } from "react-icons/fa";
|
||||
import type { Shareholder } from "../../types";
|
||||
import { THEME } from "../../BasicInfoTab/config";
|
||||
|
||||
// antd 表格黑金主题配置
|
||||
const TABLE_THEME = {
|
||||
token: {
|
||||
colorBgContainer: "#2D3748", // gray.700
|
||||
colorText: "white",
|
||||
colorTextHeading: "#D4AF37", // 金色
|
||||
colorBorderSecondary: "rgba(212, 175, 55, 0.3)",
|
||||
},
|
||||
components: {
|
||||
Table: {
|
||||
headerBg: "#1A202C", // gray.900
|
||||
headerColor: "#D4AF37", // 金色
|
||||
rowHoverBg: "rgba(212, 175, 55, 0.15)", // 金色半透明，文字更清晰
|
||||
borderColor: "rgba(212, 175, 55, 0.2)",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// 格式化工具函数
|
||||
const formatPercentage = (value: number | null | undefined): string => {
|
||||
if (value === null || value === undefined) return "-";
|
||||
return `${(value * 100).toFixed(2)}%`;
|
||||
};
|
||||
|
||||
const formatShares = (value: number | null | undefined): string => {
|
||||
if (value === null || value === undefined) return "-";
|
||||
if (value >= 100000000) {
|
||||
return `${(value / 100000000).toFixed(2)}亿股`;
|
||||
} else if (value >= 10000) {
|
||||
return `${(value / 10000).toFixed(2)}万股`;
|
||||
}
|
||||
return `${value.toLocaleString()}股`;
|
||||
};
|
||||
|
||||
const formatDate = (dateStr: string | null | undefined): string => {
|
||||
if (!dateStr) return "-";
|
||||
return dateStr.split("T")[0];
|
||||
};
|
||||
|
||||
// 股东类型颜色映射
|
||||
const shareholderTypeColors: Record<string, string> = {
|
||||
基金: "blue",
|
||||
个人: "green",
|
||||
法人: "purple",
|
||||
QFII: "orange",
|
||||
社保: "red",
|
||||
保险: "cyan",
|
||||
信托: "geekblue",
|
||||
券商: "magenta",
|
||||
企业: "purple",
|
||||
机构: "blue",
|
||||
};
|
||||
|
||||
const getShareholderTypeColor = (type: string | undefined): string => {
|
||||
if (!type) return "default";
|
||||
for (const [key, color] of Object.entries(shareholderTypeColors)) {
|
||||
if (type.includes(key)) return color;
|
||||
}
|
||||
return "default";
|
||||
};
|
||||
|
||||
interface ShareholdersTableProps {
|
||||
type?: "top" | "circulation";
|
||||
shareholders: Shareholder[];
|
||||
title?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 股东表格组件
|
||||
* @param type - 表格类型: "top" 十大股东 | "circulation" 十大流通股东
|
||||
* @param shareholders - 股东数据数组
|
||||
* @param title - 自定义标题
|
||||
*/
|
||||
const ShareholdersTable: React.FC<ShareholdersTableProps> = ({
|
||||
type = "top",
|
||||
shareholders = [],
|
||||
title,
|
||||
}) => {
|
||||
const isMobile = useBreakpointValue({ base: true, md: false });
|
||||
|
||||
// 配置
|
||||
const config = useMemo(() => {
|
||||
if (type === "circulation") {
|
||||
return {
|
||||
title: title || "十大流通股东",
|
||||
icon: FaChartLine,
|
||||
iconColor: "purple.500",
|
||||
ratioField: "circulation_share_ratio" as keyof Shareholder,
|
||||
ratioLabel: "流通股比例",
|
||||
rankColor: "orange",
|
||||
showNature: true, // 与十大股东保持一致
|
||||
};
|
||||
}
|
||||
return {
|
||||
title: title || "十大股东",
|
||||
icon: FaUsers,
|
||||
iconColor: "green.500",
|
||||
ratioField: "total_share_ratio" as keyof Shareholder,
|
||||
ratioLabel: "持股比例",
|
||||
rankColor: "red",
|
||||
showNature: true,
|
||||
};
|
||||
}, [type, title]);
|
||||
|
||||
// 表格列定义
|
||||
const columns: ColumnsType<Shareholder> = useMemo(() => {
|
||||
const baseColumns: ColumnsType<Shareholder> = [
|
||||
{
|
||||
title: "排名",
|
||||
dataIndex: "shareholder_rank",
|
||||
key: "rank",
|
||||
width: 45,
|
||||
render: (rank: number, _: Shareholder, index: number) => (
|
||||
<Tag color={index < 3 ? config.rankColor : "default"}>
|
||||
{rank || index + 1}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "股东名称",
|
||||
dataIndex: "shareholder_name",
|
||||
key: "name",
|
||||
ellipsis: true,
|
||||
render: (name: string) => (
|
||||
<Tooltip title={name}>
|
||||
<span style={{ fontWeight: 500, color: "#D4AF37" }}>{name}</span>
|
||||
</Tooltip>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "股东类型",
|
||||
dataIndex: "shareholder_type",
|
||||
key: "type",
|
||||
width: 90,
|
||||
responsive: ["md"],
|
||||
render: (shareholderType: string) => (
|
||||
<Tag color={getShareholderTypeColor(shareholderType)}>{shareholderType || "-"}</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "持股数量",
|
||||
dataIndex: "holding_shares",
|
||||
key: "shares",
|
||||
width: 100,
|
||||
align: "right",
|
||||
responsive: ["md"],
|
||||
sorter: (a: Shareholder, b: Shareholder) => (a.holding_shares || 0) - (b.holding_shares || 0),
|
||||
render: (shares: number) => (
|
||||
<span style={{ color: "#D4AF37" }}>{formatShares(shares)}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: <span style={{ whiteSpace: "nowrap" }}>{config.ratioLabel}</span>,
|
||||
dataIndex: config.ratioField as string,
|
||||
key: "ratio",
|
||||
width: 110,
|
||||
align: "right",
|
||||
sorter: (a: Shareholder, b: Shareholder) => {
|
||||
const aVal = (a[config.ratioField] as number) || 0;
|
||||
const bVal = (b[config.ratioField] as number) || 0;
|
||||
return aVal - bVal;
|
||||
},
|
||||
defaultSortOrder: "descend",
|
||||
render: (ratio: number) => (
|
||||
<span style={{ color: type === "circulation" ? "#805AD5" : "#3182CE", fontWeight: "bold" }}>
|
||||
{formatPercentage(ratio)}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
// 十大股东显示股份性质
|
||||
if (config.showNature) {
|
||||
baseColumns.push({
|
||||
title: "股份性质",
|
||||
dataIndex: "share_nature",
|
||||
key: "nature",
|
||||
width: 80,
|
||||
responsive: ["lg"],
|
||||
render: (nature: string) => (
|
||||
<Tag color="default">{nature || "流通股"}</Tag>
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
return baseColumns;
|
||||
}, [config, type]);
|
||||
|
||||
if (!shareholders.length) return null;
|
||||
|
||||
// 获取数据日期
|
||||
const reportDate = shareholders[0]?.end_date;
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<HStack mb={4}>
|
||||
<Icon as={config.icon} color={THEME.gold} boxSize={5} />
|
||||
<Heading size="sm" color={THEME.gold}>{config.title}</Heading>
|
||||
{reportDate && <Badge colorScheme="yellow" variant="subtle">{formatDate(reportDate)}</Badge>}
|
||||
</HStack>
|
||||
<ConfigProvider theme={TABLE_THEME}>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={shareholders.slice(0, 10)}
|
||||
rowKey={(record: Shareholder, index?: number) => `${record.shareholder_name}-${index}`}
|
||||
pagination={false}
|
||||
size={isMobile ? "small" : "middle"}
|
||||
scroll={{ x: isMobile ? 400 : undefined }}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShareholdersTable;
|
||||
@@ -0,0 +1,6 @@
|
||||
// src/views/Company/components/CompanyOverview/components/shareholder/index.ts
|
||||
// 股权结构子组件汇总导出
|
||||
|
||||
export { default as ActualControlCard } from "./ActualControlCard";
|
||||
export { default as ConcentrationCard } from "./ConcentrationCard";
|
||||
export { default as ShareholdersTable } from "./ShareholdersTable";
|
||||
@@ -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<CompanyOverviewProps> = ({ stockCode }) => {
|
||||
const { basicInfo, loading, error } = useBasicInfo(stockCode);
|
||||
|
||||
// 加载状态
|
||||
if (loading && !basicInfo) {
|
||||
return (
|
||||
<Center h="300px">
|
||||
<VStack spacing={4}>
|
||||
<Spinner size="xl" color="blue.500" thickness="4px" />
|
||||
<Text>正在加载公司概览数据...</Text>
|
||||
</VStack>
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
// 错误状态
|
||||
if (error && !basicInfo) {
|
||||
return (
|
||||
<Center h="300px">
|
||||
<Text color="red.500">{error}</Text>
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
const { basicInfo } = useBasicInfo(stockCode);
|
||||
|
||||
return (
|
||||
<VStack spacing={6} align="stretch">
|
||||
{/* 公司头部信息卡片 */}
|
||||
{basicInfo && <CompanyHeaderCard basicInfo={basicInfo} />}
|
||||
|
||||
{/* 基本信息内容 - 传入 stockCode，内部懒加载各 Tab 数据 */}
|
||||
<BasicInfoTab
|
||||
stockCode={stockCode}
|
||||
|
||||
@@ -131,9 +131,3 @@ export interface CompanyOverviewProps {
|
||||
stockCode?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* CompanyHeaderCard 组件 Props
|
||||
*/
|
||||
export interface CompanyHeaderCardProps {
|
||||
basicInfo: BasicInfo;
|
||||
}
|
||||
|
||||
@@ -10,11 +10,14 @@ import {
|
||||
Tab,
|
||||
TabPanel,
|
||||
} from "@chakra-ui/react";
|
||||
import { FaNewspaper } from "react-icons/fa";
|
||||
import { FaNewspaper, FaBullhorn, FaCalendarAlt } from "react-icons/fa";
|
||||
|
||||
import { logger } from "@utils/logger";
|
||||
import { getApiBase } from "@utils/apiConfig";
|
||||
import NewsEventsTab from "../CompanyOverview/NewsEventsTab";
|
||||
import AnnouncementsPanel from "../CompanyOverview/BasicInfoTab/components/AnnouncementsPanel";
|
||||
import DisclosureSchedulePanel from "../CompanyOverview/BasicInfoTab/components/DisclosureSchedulePanel";
|
||||
import { THEME } from "../CompanyOverview/BasicInfoTab/config";
|
||||
|
||||
// API配置
|
||||
const API_BASE_URL = getApiBase();
|
||||
@@ -22,7 +25,8 @@ const API_BASE_URL = getApiBase();
|
||||
// 二级 Tab 配置
|
||||
const TRACKING_TABS = [
|
||||
{ key: "news", name: "新闻动态", icon: FaNewspaper },
|
||||
// 后续可扩展更多二级 Tab
|
||||
{ key: "announcements", name: "公司公告", icon: FaBullhorn },
|
||||
{ key: "disclosure", name: "财报披露日程", icon: FaCalendarAlt },
|
||||
];
|
||||
|
||||
/**
|
||||
@@ -144,16 +148,26 @@ const DynamicTracking = ({ stockCode: propStockCode }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box bg={THEME.bg} p={4} borderRadius="md">
|
||||
<Tabs
|
||||
variant="enclosed"
|
||||
colorScheme="blue"
|
||||
variant="soft-rounded"
|
||||
index={activeTab}
|
||||
onChange={setActiveTab}
|
||||
isLazy
|
||||
>
|
||||
<TabList>
|
||||
<TabList bg={THEME.cardBg} borderBottom="1px solid" borderColor={THEME.border}>
|
||||
{TRACKING_TABS.map((tab) => (
|
||||
<Tab key={tab.key} fontWeight="medium">
|
||||
<Tab
|
||||
key={tab.key}
|
||||
fontWeight="medium"
|
||||
color={THEME.textSecondary}
|
||||
_selected={{
|
||||
color: THEME.tabSelected.color,
|
||||
bg: THEME.tabSelected.bg,
|
||||
borderRadius: "md",
|
||||
}}
|
||||
_hover={{ color: THEME.gold }}
|
||||
>
|
||||
{tab.name}
|
||||
</Tab>
|
||||
))}
|
||||
@@ -174,7 +188,15 @@ const DynamicTracking = ({ stockCode: propStockCode }) => {
|
||||
/>
|
||||
</TabPanel>
|
||||
|
||||
{/* 后续可扩展更多 Tab Panel */}
|
||||
{/* 公司公告 Tab */}
|
||||
<TabPanel p={4}>
|
||||
<AnnouncementsPanel stockCode={stockCode} />
|
||||
</TabPanel>
|
||||
|
||||
{/* 财报披露日程 Tab */}
|
||||
<TabPanel p={4}>
|
||||
<DisclosureSchedulePanel stockCode={stockCode} />
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
@@ -18,8 +18,12 @@ import {
|
||||
Skeleton,
|
||||
IconButton,
|
||||
Tooltip,
|
||||
Divider,
|
||||
Link,
|
||||
Icon,
|
||||
} from '@chakra-ui/react';
|
||||
import { Share2 } from 'lucide-react';
|
||||
import { Share2, Calendar, Coins, MapPin, Globe } from 'lucide-react';
|
||||
import { formatRegisteredCapital, formatDate } from '../CompanyOverview/utils';
|
||||
|
||||
import FavoriteButton from '@components/FavoriteButton';
|
||||
import type { StockQuoteCardProps } from './types';
|
||||
@@ -57,6 +61,7 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
||||
isWatchlistLoading = false,
|
||||
onWatchlistToggle,
|
||||
onShare,
|
||||
basicInfo,
|
||||
}) => {
|
||||
// 处理分享点击
|
||||
const handleShare = () => {
|
||||
@@ -160,10 +165,10 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
||||
</HStack>
|
||||
</Flex>
|
||||
|
||||
{/* 三栏布局 */}
|
||||
{/* 1:2 布局 */}
|
||||
<Flex gap={8}>
|
||||
{/* 左栏：价格信息 */}
|
||||
<Box flex="1">
|
||||
{/* 左栏：价格信息 (flex=1) */}
|
||||
<Box flex="1" minWidth="0">
|
||||
<HStack align="baseline" spacing={3} mb={3}>
|
||||
<Text fontSize="48px" fontWeight="bold" color={priceColor}>
|
||||
{formatPrice(data.currentPrice)}
|
||||
@@ -212,86 +217,148 @@ const StockQuoteCard: React.FC<StockQuoteCardProps> = ({
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
{/* 中栏：关键指标 */}
|
||||
<Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
|
||||
<Text
|
||||
fontSize="14px"
|
||||
fontWeight="bold"
|
||||
color={sectionTitleColor}
|
||||
mb={3}
|
||||
>
|
||||
关键指标
|
||||
</Text>
|
||||
<VStack align="stretch" spacing={2} fontSize="14px">
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>市盈率(PE)：</Text>
|
||||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{data.pe.toFixed(2)}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>市净率(PB)：</Text>
|
||||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{data.pb.toFixed(2)}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>流通市值：</Text>
|
||||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{data.marketCap}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>52周波动：</Text>
|
||||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{formatPrice(data.week52Low)}-{formatPrice(data.week52High)}
|
||||
</Text>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</Box>
|
||||
{/* 右栏：关键指标 + 主力动态 (flex=2) */}
|
||||
<Flex flex="2" minWidth="0" gap={8} borderLeftWidth="1px" borderColor={borderColor} pl={8}>
|
||||
{/* 关键指标 */}
|
||||
<Box flex="1">
|
||||
<Text
|
||||
fontSize="14px"
|
||||
fontWeight="bold"
|
||||
color={sectionTitleColor}
|
||||
mb={3}
|
||||
>
|
||||
关键指标
|
||||
</Text>
|
||||
<VStack align="stretch" spacing={2} fontSize="14px">
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>市盈率(PE)：</Text>
|
||||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{data.pe.toFixed(2)}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>市净率(PB)：</Text>
|
||||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{data.pb.toFixed(2)}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>流通市值：</Text>
|
||||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{data.marketCap}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>52周波动：</Text>
|
||||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{formatPrice(data.week52Low)}-{formatPrice(data.week52High)}
|
||||
</Text>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</Box>
|
||||
|
||||
{/* 右栏：主力动态 */}
|
||||
<Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
|
||||
<Text
|
||||
fontSize="14px"
|
||||
fontWeight="bold"
|
||||
color={sectionTitleColor}
|
||||
mb={3}
|
||||
>
|
||||
主力动态
|
||||
</Text>
|
||||
<VStack align="stretch" spacing={2} fontSize="14px">
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>主力净流入：</Text>
|
||||
<Text color={inflowColor} fontWeight="bold" fontSize="16px">
|
||||
{formatNetInflow(data.mainNetInflow)}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>机构持仓：</Text>
|
||||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{data.institutionHolding.toFixed(2)}%
|
||||
</Text>
|
||||
</HStack>
|
||||
{/* 买卖比例条 */}
|
||||
<Box mt={1}>
|
||||
<Progress
|
||||
value={data.buyRatio}
|
||||
size="sm"
|
||||
sx={{
|
||||
'& > div': { bg: upColor },
|
||||
}}
|
||||
bg={downColor}
|
||||
borderRadius="full"
|
||||
/>
|
||||
<HStack justify="space-between" mt={1} fontSize="14px">
|
||||
<Text color={upColor}>买入{data.buyRatio}%</Text>
|
||||
<Text color={downColor}>卖出{data.sellRatio}%</Text>
|
||||
{/* 主力动态 */}
|
||||
<Box flex="1" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
|
||||
<Text
|
||||
fontSize="14px"
|
||||
fontWeight="bold"
|
||||
color={sectionTitleColor}
|
||||
mb={3}
|
||||
>
|
||||
主力动态
|
||||
</Text>
|
||||
<VStack align="stretch" spacing={2} fontSize="14px">
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>主力净流入：</Text>
|
||||
<Text color={inflowColor} fontWeight="bold" fontSize="16px">
|
||||
{formatNetInflow(data.mainNetInflow)}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack justify="space-between">
|
||||
<Text color={labelColor}>机构持仓：</Text>
|
||||
<Text color={valueColor} fontWeight="bold" fontSize="16px">
|
||||
{data.institutionHolding.toFixed(2)}%
|
||||
</Text>
|
||||
</HStack>
|
||||
{/* 买卖比例条 */}
|
||||
<Box mt={1}>
|
||||
<Progress
|
||||
value={data.buyRatio}
|
||||
size="sm"
|
||||
sx={{
|
||||
'& > div': { bg: upColor },
|
||||
}}
|
||||
bg={downColor}
|
||||
borderRadius="full"
|
||||
/>
|
||||
<HStack justify="space-between" mt={1} fontSize="14px">
|
||||
<Text color={upColor}>买入{data.buyRatio}%</Text>
|
||||
<Text color={downColor}>卖出{data.sellRatio}%</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
</VStack>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
{/* 公司信息区块 - 1:2 布局 */}
|
||||
{basicInfo && (
|
||||
<>
|
||||
<Divider borderColor={borderColor} my={4} />
|
||||
<Flex gap={8}>
|
||||
{/* 左侧：公司关键属性 (flex=1) */}
|
||||
<Box flex="1" minWidth="0">
|
||||
<HStack spacing={4} flexWrap="wrap" fontSize="14px">
|
||||
<HStack spacing={1}>
|
||||
<Icon as={Calendar} color={labelColor} boxSize={4} />
|
||||
<Text color={labelColor}>成立：</Text>
|
||||
<Text color={valueColor} fontWeight="bold">
|
||||
{formatDate(basicInfo.establish_date)}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack spacing={1}>
|
||||
<Icon as={Coins} color={labelColor} boxSize={4} />
|
||||
<Text color={labelColor}>注册资本：</Text>
|
||||
<Text color={valueColor} fontWeight="bold">
|
||||
{formatRegisteredCapital(basicInfo.reg_capital)}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack spacing={1}>
|
||||
<Icon as={MapPin} color={labelColor} boxSize={4} />
|
||||
<Text color={labelColor}>所在地：</Text>
|
||||
<Text color={valueColor} fontWeight="bold">
|
||||
{basicInfo.province} {basicInfo.city}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack spacing={1}>
|
||||
<Icon as={Globe} color={labelColor} boxSize={4} />
|
||||
{basicInfo.website ? (
|
||||
<Link
|
||||
href={basicInfo.website}
|
||||
isExternal
|
||||
color={valueColor}
|
||||
fontWeight="bold"
|
||||
_hover={{ color: labelColor }}
|
||||
>
|
||||
访问官网
|
||||
</Link>
|
||||
) : (
|
||||
<Text color={valueColor}>暂无官网</Text>
|
||||
)}
|
||||
</HStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
</VStack>
|
||||
</Box>
|
||||
</Flex>
|
||||
|
||||
{/* 右侧：公司简介 (flex=2) */}
|
||||
<Box flex="2" minWidth="0" borderLeftWidth="1px" borderColor={borderColor} pl={8}>
|
||||
<Text fontSize="14px" color={labelColor} noOfLines={2}>
|
||||
<Text as="span" fontWeight="bold" color={valueColor}>公司简介：</Text>
|
||||
{basicInfo.company_intro || '暂无'}
|
||||
</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
</>
|
||||
)}
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
* StockQuoteCard 组件类型定义
|
||||
*/
|
||||
|
||||
import type { BasicInfo } from '../CompanyOverview/types';
|
||||
|
||||
/**
|
||||
* 股票行情卡片数据
|
||||
*/
|
||||
@@ -53,4 +55,6 @@ export interface StockQuoteCardProps {
|
||||
onWatchlistToggle?: () => void; // 自选股切换回调
|
||||
// 分享
|
||||
onShare?: () => void; // 分享回调
|
||||
// 公司基本信息
|
||||
basicInfo?: BasicInfo;
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ import { FaChartLine, FaMoneyBillWave, FaChartBar, FaInfoCircle, FaBrain, FaNews
|
||||
* @type {Array<{key: string, name: string, icon: React.ComponentType}>}
|
||||
*/
|
||||
export const COMPANY_TABS = [
|
||||
{ key: 'overview', name: '公司概览', icon: FaInfoCircle },
|
||||
{ key: 'overview', name: '公司档案', icon: FaInfoCircle },
|
||||
{ key: 'analysis', name: '深度分析', icon: FaBrain },
|
||||
{ key: 'market', name: '股票行情', icon: FaChartLine },
|
||||
{ key: 'financial', name: '财务全景', icon: FaMoneyBillWave },
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
|
||||
{/* 股票行情卡片：价格、关键指标、主力动态、自选股按钮 */}
|
||||
{/* 股票行情卡片：价格、关键指标、主力动态、公司信息 */}
|
||||
<StockQuoteCard
|
||||
data={quoteData}
|
||||
isLoading={isQuoteLoading}
|
||||
isInWatchlist={isInWatchlist}
|
||||
isWatchlistLoading={isWatchlistLoading}
|
||||
onWatchlistToggle={handleWatchlistToggle}
|
||||
basicInfo={basicInfo}
|
||||
/>
|
||||
|
||||
{/* Tab 切换区域：概览、行情、财务、预测 */}
|
||||
|
||||
Reference in New Issue
Block a user