leemuzi/real-time-fund
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加滚动条样式和优化表格布局

Browse Source
This commit is contained in:
hzm
2026-02-26 11:06:45 +08:00
parent d5131b87db
commit f3adc1c7aa
3 changed files with 85 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/components/DcaModal.jsx
View File

@@ -345,6 +345,7 @@ export default function DcaModal({ fund, plan, onClose, onConfirm }) {
扣款日 <span style={{ color: 'var(--danger)' }}>*</span>
</label>
<div
className="scrollbar-y-styled"
style={{
display: 'flex',
flexWrap: 'wrap',

72
app/globals.css
View File

@@ -53,7 +53,7 @@ body::before {
}
.container {
max-width: 1120px;
max-width: 90%;
margin: 0 auto;
padding: 24px;
}
@@ -644,6 +644,13 @@ input[type="number"] {
border-color: var(--accent);
}
/* 不需要 hover 高亮的图标按钮（例如 PC 表格模式中的“编辑持仓”） */
.icon-button.no-hover:hover {
color: inherit;
transform: none;
border-color: var(--border);
}
.icon-button:active {
transform: translateY(0);
}
@@ -721,19 +728,72 @@ input[type="number"] {
flex: 1;
min-width: 0;
overflow-x: auto;
/* 横向滚动条样式与项目整体规范一致：深色背景、边框色、圆角、hover 高亮 */
scrollbar-width: thin;
scrollbar-color: var(--border) var(--bg);
}
.table-scroll-area::-webkit-scrollbar {
height: 8px;
}
.table-scroll-area::-webkit-scrollbar-track {
background: var(--bg);
border-radius: 8px;
}
.table-scroll-area::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 8px;
}
.table-scroll-area::-webkit-scrollbar-thumb:hover {
background: var(--muted);
}
.table-scroll-area::-webkit-scrollbar-thumb:active {
background: var(--primary);
}
/* 纵向滚动条通用样式（与项目整体规范一致，供弹窗、列表等使用） */
.scrollbar-y-styled {
scrollbar-width: thin;
scrollbar-color: var(--border) var(--bg);
}
.scrollbar-y-styled::-webkit-scrollbar {
width: 8px;
}
.scrollbar-y-styled::-webkit-scrollbar-track {
background: var(--bg);
border-radius: 8px;
}
.scrollbar-y-styled::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 8px;
}
.scrollbar-y-styled::-webkit-scrollbar-thumb:hover {
background: var(--muted);
}
.scrollbar-y-styled::-webkit-scrollbar-thumb:active {
background: var(--primary);
}
/* 固定像素列宽，避免初始在视口外的列滚入后布局错误、内容不展示；不依赖 fr/内容测量 */
.table-scroll-area-inner {
width: 1292px;
/*min-width: 1192px;*/
/*width: 1192px;*/
min-width: 900px;
}
/* 基金名称 净值 涨跌幅 估值涨跌幅 估值时间 持仓金额 当日收益 持有收益（三列同宽） */
.table-header-row-scroll,
.table-row-scroll {
display: grid;
grid-template-columns: 220px 100px 100px 100px 100px 140px 140px 140px;
grid-template-columns: 220px 100px 100px 100px 140px 140px 140px;
align-items: center;
gap: 12px;
width: 100%;
@@ -832,7 +892,7 @@ input[type="number"] {
.table-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr 1.2fr 1.2fr 1.2fr;
grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr 1.2fr 1.2fr;
align-items: center;
gap: 12px;
padding: 12px 24px !important;
@@ -850,7 +910,7 @@ input[type="number"] {
.table-header-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr 1.2fr 1.2fr 1.2fr;
grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr 1.2fr 1.2fr;
gap: 12px;
padding: 16px 24px;
background: rgba(255, 255, 255, 0.05);

30
app/page.jsx
View File

@@ -3647,9 +3647,8 @@ export default function HomePage() {
<div className="table-header-row table-header-row-scroll">
<div className="table-header-cell">基金名称</div>
<div className="table-header-cell text-right">净值/估值</div>
<div className="table-header-cell text-right">涨跌幅</div>
<div className="table-header-cell text-right">昨日涨跌幅</div>
<div className="table-header-cell text-right">估值涨跌幅</div>
<div className="table-header-cell text-right">估值时间</div>
<div className="table-header-cell text-right">持仓金额</div>
<div className="table-header-cell text-right">当日收益</div>
<div className="table-header-cell text-right">持有收益</div>
@@ -3695,17 +3694,24 @@ export default function HomePage() {
);
})()}
<div className="table-cell text-right change-cell">
<span className={f.zzl > 0 ? 'up' : f.zzl < 0 ? 'down' : ''} style={{ fontWeight: 700 }}>
{f.zzl != null && f.zzl !== '' ? `${f.zzl > 0 ? '+' : ''}${Number(f.zzl).toFixed(2)}%` : '—'}
</span>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 2 }}>
<span className={f.zzl > 0 ? 'up' : f.zzl < 0 ? 'down' : ''} style={{ fontWeight: 700 }}>
{f.zzl != null && f.zzl !== '' ? `${f.zzl > 0 ? '+' : ''}${Number(f.zzl).toFixed(2)}%` : '—'}
</span>
<span className="muted" style={{ fontSize: '12px' }}>
{f.jzrq || '-'}
</span>
</div>
</div>
<div className="table-cell text-right est-change-cell">
<span className={f.noValuation ? 'muted' : (f.estPricedCoverage > 0.05 ? (f.estGszzl > 0 ? 'up' : f.estGszzl < 0 ? 'down' : '') : (Number(f.gszzl) > 0 ? 'up' : Number(f.gszzl) < 0 ? 'down' : ''))} style={{ fontWeight: 700 }}>
{f.noValuation ? '—' : (f.estPricedCoverage > 0.05 ? (f.estGszzl != null ? `${f.estGszzl > 0 ? '+' : ''}${Number(f.estGszzl).toFixed(2)}%` : '—') : (isNumber(f.gszzl) ? `${f.gszzl > 0 ? '+' : ''}${Number(f.gszzl).toFixed(2)}%` : (f.gszzl ?? '—')))}
</span>
</div>
<div className="table-cell text-right time-cell">
<span className="muted" style={{ fontSize: '12px' }}>{f.noValuation ? (f.jzrq || '-') : (f.gztime || f.time || '-')}</span>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 2 }}>
<span className={f.noValuation ? 'muted' : (f.estPricedCoverage > 0.05 ? (f.estGszzl > 0 ? 'up' : f.estGszzl < 0 ? 'down' : '') : (Number(f.gszzl) > 0 ? 'up' : Number(f.gszzl) < 0 ? 'down' : ''))} style={{ fontWeight: 700 }}>
{f.noValuation ? '—' : (f.estPricedCoverage > 0.05 ? (f.estGszzl != null ? `${f.estGszzl > 0 ? '+' : ''}${Number(f.estGszzl).toFixed(2)}%` : '—') : (isNumber(f.gszzl) ? `${f.gszzl > 0 ? '+' : ''}${Number(f.gszzl).toFixed(2)}%` : (f.gszzl ?? '—')))}
</span>
<span className="muted" style={{ fontSize: '12px' }}>
{f.noValuation ? (f.jzrq || '-') : (f.gztime || f.time || '-')}
</span>
</div>
</div>
{(() => {
const holding = holdings[f.code];
@@ -3721,7 +3727,7 @@ export default function HomePage() {
return (
<div className="table-cell text-right holding-amount-cell" title="点击设置持仓" onClick={(e) => { e.stopPropagation(); setActionModal({ open: true, fund: f }); }}>
<span style={{ fontWeight: 700, marginRight: 6 }}>¥{amount.toFixed(2)}</span>
<button className="icon-button" onClick={(e) => { e.stopPropagation(); setActionModal({ open: true, fund: f }); }} title="编辑持仓" style={{ border: 'none', width: '28px', height: '28px', marginLeft: -6 }}>
<button className="icon-button no-hover" onClick={(e) => { e.stopPropagation(); setActionModal({ open: true, fund: f }); }} title="编辑持仓" style={{ border: 'none', width: '28px', height: '28px', marginLeft: -6 }}>
<SettingsIcon width="14" height="14" />
</button>
</div>