feat: 基金名称列表页增加是否展示完整基金名称个性化设置

2026-03-06 08:14:07 +08:00
parent 6580658f55
commit aac5c5003a
5 changed files with 164 additions and 8 deletions
--- 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({
          </button>
        )}
        <div className="title-text">
-          <span className="name-text" title={isUpdated ? '今日净值已更新' : ''}>
+          <span 
+            className={`name-text ${showFullFundName ? 'show-full' : ''}`} 
+            title={isUpdated ? '今日净值已更新' : ''}
+          >
            {info.getValue() ?? '—'}
          </span>
          {holdingAmountDisplay ? (
@@ -429,7 +456,7 @@ export default function MobileFundTable({
            </button>
          </div>
        ),
-        cell: (info) => <MobileFundNameCell info={info} />,
+        cell: (info) => <MobileFundNameCell info={info} showFullFundName={showFullFundName} />,
        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}
      />
    </div>
  );
--- 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({
            </div>

            <div className="mobile-setting-body">
+              {onToggleShowFullFundName && (
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    padding: '12px 0',
+                    borderBottom: '1px solid var(--border)',
+                    marginBottom: 16,
+                  }}
+                >
+                  <span style={{ fontSize: '14px' }}>展示完整基金名称</span>
+                  <button
+                    type="button"
+                    className="icon-button pc-table-column-switch"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onToggleShowFullFundName(!showFullFundName);
+                    }}
+                    title={showFullFundName ? '关闭' : '开启'}
+                    style={{
+                      border: 'none',
+                      padding: '0 4px',
+                      backgroundColor: 'transparent',
+                      cursor: 'pointer',
+                      flexShrink: 0,
+                      display: 'flex',
+                      alignItems: 'center',
+                    }}
+                  >
+                    <span className={`dca-toggle-track ${showFullFundName ? 'enabled' : ''}`}>
+                      <span
+                        className="dca-toggle-thumb"
+                        style={{ left: showFullFundName ? 16 : 2 }}
+                      />
+                    </span>
+                  </button>
+                </div>
+              )}
              <h3 className="mobile-setting-subtitle">表头设置</h3>
              <div
                style={{
--- a/app/components/PcFundTable.jsx
+++ b/app/components/PcFundTable.jsx
@@ -234,6 +234,7 @@ export default function PcFundTable({
          })() : null,
          pcTableColumnVisibility: pc.visibility,
          pcTableColumns: Object.keys(pc.sizing).length ? pc.sizing : null,
+          pcShowFullFundName: group.pcShowFullFundName === true,
        };
      }
    });
@@ -243,6 +244,7 @@ export default function PcFundTable({
  const [configByGroup, setConfigByGroup] = useState(getInitialConfigByGroup);

  const currentGroupPc = configByGroup[groupKey];
+  const showFullFundName = currentGroupPc?.pcShowFullFundName ?? false;
  const defaultPc = getDefaultPcGroupConfig();
  const columnOrder = (() => {
    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({
        )}
        <div className="title-text">
          <span
-            className={`name-text`}
+            className={`name-text ${showFullFundName ? 'show-full' : ''}`}
            title={isUpdated ? '今日净值已更新' : ''}
          >
            {info.getValue() ?? '—'}
@@ -416,7 +423,7 @@ export default function PcFundTable({
        size: 265,
        minSize: 140,
        enablePinning: true,
-        cell: (info) => <FundNameCell info={info} />,
+        cell: (info) => <FundNameCell info={info} showFullFundName={showFullFundName} />,
        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}
      />
    </div>
  );
--- 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({
            </div>

            <div className="pc-table-setting-body">
+              {onToggleShowFullFundName && (
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    padding: '12px 0',
+                    borderBottom: '1px solid var(--border)',
+                    marginBottom: 16,
+                  }}
+                >
+                  <span style={{ fontSize: '14px' }}>展示完整基金名称</span>
+                  <button
+                    type="button"
+                    className="icon-button pc-table-column-switch"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onToggleShowFullFundName(!showFullFundName);
+                    }}
+                    title={showFullFundName ? '关闭' : '开启'}
+                    style={{
+                      border: 'none',
+                      padding: '0 4px',
+                      backgroundColor: 'transparent',
+                      cursor: 'pointer',
+                      flexShrink: 0,
+                      display: 'flex',
+                      alignItems: 'center',
+                    }}
+                  >
+                    <span className={`dca-toggle-track ${showFullFundName ? 'enabled' : ''}`}>
+                      <span
+                        className="dca-toggle-thumb"
+                        style={{ left: showFullFundName ? 16 : 2 }}
+                      />
+                    </span>
+                  </button>
+                </div>
+              )}
              <h3 className="pc-table-setting-subtitle">表头设置</h3>
              <div
                style={{
--- a/app/globals.css
+++ b/app/globals.css
@@ -1276,9 +1276,30 @@ input[type="number"] {
 }

 .table-row-scroll .name-cell .name-text {
+  display: block;
+  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
+  word-break: normal;
+}
+
+.table-row-scroll .name-cell .name-cell-content {
+  min-width: 0;
+  width: 100%;
+}
+
+.table-row-scroll .name-cell .title-text {
+  min-width: 0;
+  overflow: hidden;
+  flex: 1 1 auto;
+}
+
+.table-row-scroll .name-cell .name-text.show-full {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+  word-break: break-all;
 }

 .table-row-scroll {
@@ -1580,6 +1601,17 @@ input[type="number"] {
  .mobile-fund-table .table-row .name-cell .name-text {
    font-size: 12px;
    font-weight: 600;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .mobile-fund-table .table-row .name-cell .name-text.show-full {
+    -webkit-line-clamp: unset;
+    overflow: visible;
+    text-overflow: clip;
  }

  .mobile-fund-table .table-row .name-cell .code-text {