From f3adc1c7aa387c42e4ba66e06f82f6a632bfd139 Mon Sep 17 00:00:00 2001
From: hzm <934585316@qq.com>
Date: Thu, 26 Feb 2026 11:06:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E6=9D=A1=E6=A0=B7=E5=BC=8F=E5=92=8C=E4=BC=98=E5=8C=96=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/DcaModal.jsx |  1 +
 app/globals.css             | 72 +++++++++++++++++++++++++++++++++----
 app/page.jsx                | 30 +++++++++-------
 3 files changed, 85 insertions(+), 18 deletions(-)

diff --git a/app/components/DcaModal.jsx b/app/components/DcaModal.jsx
index 55c7093..79432a8 100644
--- a/app/components/DcaModal.jsx
+++ b/app/components/DcaModal.jsx
@@ -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',
diff --git a/app/globals.css b/app/globals.css
index 404aead..de85238 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -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);
diff --git a/app/page.jsx b/app/page.jsx
index 4ce8a17..974ab6a 100644
--- a/app/page.jsx
+++ b/app/page.jsx
@@ -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>