From a7c5a720616ff528432a378156b0d20cfb4e78c2 Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Fri, 26 Dec 2025 14:21:55 +0800 Subject: [PATCH] =?UTF-8?q?fix(ShareholdersTable):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E8=82=A1=E4=B8=9C=E8=A1=A8=E6=A0=BC=E6=96=87=E6=9C=AC=E6=BA=A2?= =?UTF-8?q?=E5=87=BA=E5=92=8C=E6=8E=92=E5=BA=8F=E6=8F=90=E7=A4=BA=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 股东类型/股份性质列：移除固定宽度，添加 whiteSpace: nowrap 防止换行 - 股东名称列：限制宽度 200px，超长文本显示省略号 - 表格启用水平滚动：scroll={{ x: 'max-content' }} - 排序提示改为中文：showSorterTooltip={{ title: '点击切换排序' }} - 移除取消排序选项：sortDirections: ['descend', 'ascend'] - 添加 antd 中文语言包：locale={zhCN} - Mock 数据添加长文本测试用例 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- src/mocks/data/company.js | 8 +++---- .../shareholder/ShareholdersTable.tsx | 23 +++++++++++-------- 2 files changed, 18 insertions(+), 13 deletions(-) diff --git a/src/mocks/data/company.js b/src/mocks/data/company.js index 9d5477c6..7836ae59 100644 --- a/src/mocks/data/company.js +++ b/src/mocks/data/company.js @@ -361,8 +361,8 @@ export const PINGAN_BANK_DATA = { { 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: '华夏上证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: 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' } ], @@ -375,8 +375,8 @@ export const PINGAN_BANK_DATA = { { 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: '华夏上证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: 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' } ], diff --git a/src/views/Company/components/CompanyOverview/components/shareholder/ShareholdersTable.tsx b/src/views/Company/components/CompanyOverview/components/shareholder/ShareholdersTable.tsx index 3cceaca5..454e57ad 100644 --- a/src/views/Company/components/CompanyOverview/components/shareholder/ShareholdersTable.tsx +++ b/src/views/Company/components/CompanyOverview/components/shareholder/ShareholdersTable.tsx @@ -4,6 +4,7 @@ import React, { useMemo, memo } from "react"; import { Box, HStack, Heading, Badge, Icon, useBreakpointValue } from "@chakra-ui/react"; import { Table, Tag, Tooltip, ConfigProvider } from "antd"; +import zhCN from "antd/locale/zh_CN"; import type { ColumnsType } from "antd/es/table"; import { Users, LineChart } from "lucide-react"; import type { Shareholder } from "../../types"; @@ -133,10 +134,13 @@ const ShareholdersTable: React.FC = ({ title: "股东名称", dataIndex: "shareholder_name", key: "name", - ellipsis: true, + width: 200, + ellipsis: { + showTitle: false, + }, render: (name: string) => ( - - {name} + + {name} ), }, @@ -144,10 +148,9 @@ const ShareholdersTable: React.FC = ({ title: "股东类型", dataIndex: "shareholder_type", key: "type", - width: 90, responsive: ["md"], render: (shareholderType: string) => ( - {shareholderType || "-"} + {shareholderType || "-"} ), }, { @@ -158,6 +161,7 @@ const ShareholdersTable: React.FC = ({ align: "right", responsive: ["md"], sorter: (a: Shareholder, b: Shareholder) => (a.holding_shares || 0) - (b.holding_shares || 0), + sortDirections: ["descend", "ascend"], render: (shares: number) => ( {formatShares(shares)} ), @@ -173,6 +177,7 @@ const ShareholdersTable: React.FC = ({ const bVal = (b[config.ratioField] as number) || 0; return aVal - bVal; }, + sortDirections: ["descend", "ascend"], defaultSortOrder: "descend", render: (ratio: number) => ( @@ -188,10 +193,9 @@ const ShareholdersTable: React.FC = ({ title: "股份性质", dataIndex: "share_nature", key: "nature", - width: 80, responsive: ["lg"], render: (nature: string) => ( - {nature || "流通股"} + {nature || "流通股"} ), }); } @@ -211,14 +215,15 @@ const ShareholdersTable: React.FC = ({ {config.title} {reportDate && {formatDate(reportDate)}} - + `${record.shareholder_name}-${record.shareholder_rank ?? ''}-${record.end_date ?? ''}`} pagination={false} size={isMobile ? "small" : "middle"} - scroll={{ x: isMobile ? 400 : undefined }} + scroll={{ x: 'max-content' }} + showSorterTooltip={{ title: '点击切换排序' }} />