From aac5c5003a9f3ca4a73bb4512c8ed64cd56e8edb Mon Sep 17 00:00:00 2001 From: hzm <934585316@qq.com> Date: Fri, 6 Mar 2026 08:14:07 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9F=BA=E9=87=91=E5=90=8D=E7=A7=B0?= =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=A1=B5=E5=A2=9E=E5=8A=A0=E6=98=AF=E5=90=A6?= =?UTF-8?q?=E5=B1=95=E7=A4=BA=E5=AE=8C=E6=95=B4=E5=9F=BA=E9=87=91=E5=90=8D?= =?UTF-8?q?=E7=A7=B0=E4=B8=AA=E6=80=A7=E5=8C=96=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/MobileFundTable.jsx | 37 +++++++++++++++++++--- app/components/MobileSettingModal.jsx | 43 ++++++++++++++++++++++++++ app/components/PcFundTable.jsx | 17 +++++++--- app/components/PcTableSettingModal.jsx | 43 ++++++++++++++++++++++++++ app/globals.css | 32 +++++++++++++++++++ 5 files changed, 164 insertions(+), 8 deletions(-) diff --git a/app/components/MobileFundTable.jsx b/app/components/MobileFundTable.jsx index 2e650c9..878db07 100644 --- a/app/components/MobileFundTable.jsx +++ b/app/components/MobileFundTable.jsx @@ -192,6 +192,7 @@ export default function MobileFundTable({ return [...valid, ...missing]; })() : null, mobileTableColumnVisibility: visibility, + mobileShowFullFundName: group.mobileShowFullFundName === true, }; }); return byGroup; @@ -200,6 +201,7 @@ export default function MobileFundTable({ const [configByGroup, setConfigByGroup] = useState(getInitialMobileConfigByGroup); const currentGroupMobile = configByGroup[groupKey]; + const showFullFundName = currentGroupMobile?.mobileShowFullFundName ?? false; const defaultOrder = [...MOBILE_NON_FROZEN_COLUMN_IDS]; const defaultVisibility = (() => { const o = {}; @@ -247,6 +249,28 @@ export default function MobileFundTable({ : nextOrUpdater; persistMobileGroupConfig({ mobileTableColumnVisibility: next }); }; + + const persistShowFullFundName = (show) => { + if (typeof window === 'undefined') return; + try { + const raw = window.localStorage.getItem('customSettings'); + const parsed = raw ? JSON.parse(raw) : {}; + const group = parsed[groupKey] && typeof parsed[groupKey] === 'object' ? { ...parsed[groupKey] } : {}; + group.mobileShowFullFundName = show; + parsed[groupKey] = group; + window.localStorage.setItem('customSettings', JSON.stringify(parsed)); + setConfigByGroup((prev) => ({ + ...prev, + [groupKey]: { ...prev[groupKey], mobileShowFullFundName: show } + })); + onCustomSettingsChange?.(); + } catch {} + }; + + const handleToggleShowFullFundName = (show) => { + persistShowFullFundName(show); + }; + const [settingModalOpen, setSettingModalOpen] = useState(false); const tableContainerRef = useRef(null); const [tableContainerWidth, setTableContainerWidth] = useState(0); @@ -306,7 +330,7 @@ export default function MobileFundTable({ }; // 移动端名称列：无拖拽把手，长按整行触发排序 - const MobileFundNameCell = ({ info }) => { + const MobileFundNameCell = ({ info, showFullFundName }) => { const original = info.row.original || {}; const code = original.code; const isUpdated = original.isUpdated; @@ -344,7 +368,10 @@ export default function MobileFundTable({ )}
- + {info.getValue() ?? '—'} {holdingAmountDisplay ? ( @@ -429,7 +456,7 @@ export default function MobileFundTable({
), - cell: (info) => , + cell: (info) => , meta: { align: 'left', cellClassName: 'name-cell', width: columnWidthMap.fundName }, }, { @@ -555,7 +582,7 @@ export default function MobileFundTable({ meta: { align: 'right', cellClassName: 'holding-cell', width: columnWidthMap.holdingProfit }, }, ], - [currentTab, favorites, refreshing, columnWidthMap] + [currentTab, favorites, refreshing, columnWidthMap, showFullFundName] ); const table = useReactTable({ @@ -773,6 +800,8 @@ export default function MobileFundTable({ onToggleColumnVisibility={handleToggleMobileColumnVisibility} onResetColumnOrder={handleResetMobileColumnOrder} onResetColumnVisibility={handleResetMobileColumnVisibility} + showFullFundName={showFullFundName} + onToggleShowFullFundName={handleToggleShowFullFundName} /> ); diff --git a/app/components/MobileSettingModal.jsx b/app/components/MobileSettingModal.jsx index e4d7018..b00648f 100644 --- a/app/components/MobileSettingModal.jsx +++ b/app/components/MobileSettingModal.jsx @@ -17,6 +17,8 @@ import { CloseIcon, DragIcon, ResetIcon, SettingsIcon } from './Icons'; * @param {(id: string, visible: boolean) => void} props.onToggleColumnVisibility - 列显示/隐藏切换回调 * @param {() => void} props.onResetColumnOrder - 重置列顺序回调 * @param {() => void} props.onResetColumnVisibility - 重置列显示/隐藏回调 + * @param {boolean} [props.showFullFundName] - 是否展示完整基金名称 + * @param {(show: boolean) => void} [props.onToggleShowFullFundName] - 切换是否展示完整基金名称回调 */ export default function MobileSettingModal({ open, @@ -27,6 +29,8 @@ export default function MobileSettingModal({ onToggleColumnVisibility, onResetColumnOrder, onResetColumnVisibility, + showFullFundName, + onToggleShowFullFundName, }) { const [resetConfirmOpen, setResetConfirmOpen] = useState(false); @@ -89,6 +93,45 @@ export default function MobileSettingModal({
+ {onToggleShowFullFundName && ( +
+ 展示完整基金名称 + +
+ )}

表头设置

{ const order = currentGroupPc?.pcTableColumnOrder ?? defaultPc.order; @@ -280,6 +282,7 @@ export default function PcFundTable({ if (updates.pcTableColumnOrder !== undefined) group.pcTableColumnOrder = updates.pcTableColumnOrder; if (updates.pcTableColumnVisibility !== undefined) group.pcTableColumnVisibility = updates.pcTableColumnVisibility; if (updates.pcTableColumns !== undefined) group.pcTableColumns = updates.pcTableColumns; + if (updates.pcShowFullFundName !== undefined) group.pcShowFullFundName = updates.pcShowFullFundName; parsed[groupKey] = group; window.localStorage.setItem('customSettings', JSON.stringify(parsed)); setConfigByGroup((prev) => ({ ...prev, [groupKey]: { ...prev[groupKey], ...updates } })); @@ -287,6 +290,10 @@ export default function PcFundTable({ } catch { } }; + const handleToggleShowFullFundName = (show) => { + persistPcGroupConfig({ pcShowFullFundName: show }); + }; + const setColumnOrder = (nextOrderOrUpdater) => { const next = typeof nextOrderOrUpdater === 'function' ? nextOrderOrUpdater(columnOrder) @@ -344,7 +351,7 @@ export default function PcFundTable({ onHoldingAmountClick, ]); - const FundNameCell = ({ info }) => { + const FundNameCell = ({ info, showFullFundName }) => { const original = info.row.original || {}; const code = original.code; const isUpdated = original.isUpdated; @@ -393,7 +400,7 @@ export default function PcFundTable({ )}
{info.getValue() ?? '—'} @@ -416,7 +423,7 @@ export default function PcFundTable({ size: 265, minSize: 140, enablePinning: true, - cell: (info) => , + cell: (info) => , meta: { align: 'left', cellClassName: 'name-cell', @@ -690,7 +697,7 @@ export default function PcFundTable({ }, }, ], - [currentTab, favorites, refreshing, sortBy], + [currentTab, favorites, refreshing, sortBy, showFullFundName], ); const table = useReactTable({ @@ -951,6 +958,8 @@ export default function PcFundTable({ onResetColumnOrder={handleResetColumnOrder} onResetColumnVisibility={handleResetColumnVisibility} onResetSizing={() => setResetConfirmOpen(true)} + showFullFundName={showFullFundName} + onToggleShowFullFundName={handleToggleShowFullFundName} />
); diff --git a/app/components/PcTableSettingModal.jsx b/app/components/PcTableSettingModal.jsx index 3bb22eb..b7eb9f7 100644 --- a/app/components/PcTableSettingModal.jsx +++ b/app/components/PcTableSettingModal.jsx @@ -18,6 +18,8 @@ import { CloseIcon, DragIcon, ResetIcon, SettingsIcon } from './Icons'; * @param {() => void} props.onResetColumnOrder - 重置列顺序回调，需二次确认 * @param {() => void} props.onResetColumnVisibility - 重置列显示/隐藏回调 * @param {() => void} props.onResetSizing - 点击重置列宽时的回调（通常用于打开确认弹框） + * @param {boolean} [props.showFullFundName] - 是否展示完整基金名称 + * @param {(show: boolean) => void} [props.onToggleShowFullFundName] - 切换是否展示完整基金名称回调 */ export default function PcTableSettingModal({ open, @@ -29,6 +31,8 @@ export default function PcTableSettingModal({ onResetColumnOrder, onResetColumnVisibility, onResetSizing, + showFullFundName, + onToggleShowFullFundName, }) { const [resetOrderConfirmOpen, setResetOrderConfirmOpen] = useState(false); @@ -91,6 +95,45 @@ export default function PcTableSettingModal({
+ {onToggleShowFullFundName && ( +
+ 展示完整基金名称 + +
+ )}

表头设置