From c3515c701116f32d781bcb9e77a9260c8ddacd18 Mon Sep 17 00:00:00 2001
From: hzm <934585316@qq.com>
Date: Mon, 9 Mar 2026 20:22:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=AE=9A=E6=8A=95?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/DcaModal.jsx           | 285 ++++++++++++++------------
 app/components/MobileSettingModal.jsx |   2 +
 2 files changed, 155 insertions(+), 132 deletions(-)

diff --git a/app/components/DcaModal.jsx b/app/components/DcaModal.jsx
index 2a59bd0..567bd38 100644
--- a/app/components/DcaModal.jsx
+++ b/app/components/DcaModal.jsx
@@ -187,156 +187,176 @@ export default function DcaModal({ fund, plan, onClose, onConfirm }) {
         exit={{ opacity: 0, scale: 0.95, y: 20 }}
         className="glass card modal dca-modal"
         onClick={(e) => e.stopPropagation()}
-        style={{ maxWidth: '420px' }}
+        style={{
+          maxWidth: '420px',
+          maxHeight: '90vh',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
       >
-        <div className="title" style={{ marginBottom: 20, justifyContent: 'space-between' }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-            <span style={{ fontSize: '20px' }}>🔁</span>
-            <span>定投</span>
-          </div>
-          <button className="icon-button" onClick={onClose} style={{ border: 'none', background: 'transparent' }}>
-            <CloseIcon width="20" height="20" />
-          </button>
-        </div>
-
-        <div style={{ marginBottom: 16 }}>
-          <div className="fund-name" style={{ fontWeight: 600, fontSize: '16px', marginBottom: 4 }}>{fund?.name}</div>
-          <div className="muted" style={{ fontSize: '12px' }}>#{fund?.code}</div>
-        </div>
-
-        <form onSubmit={handleSubmit}>
-          <div className="form-group" style={{ marginBottom: 8 }}>
-            <label className="muted" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: '14px' }}>
-              <span>是否启用定投</span>
-              <button
-                type="button"
-                onClick={() => setEnabled(v => !v)}
-                style={{
-                  border: 'none',
-                  background: 'transparent',
-                  cursor: 'pointer',
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  gap: 6
-                }}
-              >
-                <span className={`dca-toggle-track ${enabled ? 'enabled' : ''}`}>
-                  <span className="dca-toggle-thumb" style={{ left: enabled ? 16 : 2 }} />
-                </span>
-                <span style={{ fontSize: 12, color: enabled ? 'var(--primary)' : 'var(--muted)' }}>
-                  {enabled ? '已启用' : '未启用'}
-                </span>
-              </button>
-            </label>
-          </div>
-
-          <div className="form-group" style={{ marginBottom: 16 }}>
-            <label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>
-              定投金额 (¥) <span style={{ color: 'var(--danger)' }}>*</span>
-            </label>
-            <div style={{ border: (!amount || parseFloat(amount) <= 0) ? '1px solid var(--danger)' : '1px solid var(--border)', borderRadius: 12 }}>
-              <NumericInput
-                value={amount}
-                onChange={setAmount}
-                step={100}
-                min={0}
-                placeholder="请输入每次定投金额"
-              />
+        <div
+          className="scrollbar-y-styled"
+          style={{
+            overflowY: 'auto',
+            paddingRight: 4,
+            flex: 1,
+          }}
+        >
+          <div className="title" style={{ marginBottom: 20, justifyContent: 'space-between' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+              <span style={{ fontSize: '20px' }}>🔁</span>
+              <span>定投</span>
             </div>
+            <button className="icon-button" onClick={onClose} style={{ border: 'none', background: 'transparent' }}>
+              <CloseIcon width="20" height="20" />
+            </button>
           </div>
 
-          <div className="row" style={{ gap: 12, marginBottom: 16 }}>
-            <div className="form-group" style={{ flex: 1 }}>
-              <label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>
-                买入费率 (%) <span style={{ color: 'var(--danger)' }}>*</span>
+          <div style={{ marginBottom: 16 }}>
+            <div className="fund-name" style={{ fontWeight: 600, fontSize: '16px', marginBottom: 4 }}>{fund?.name}</div>
+            <div className="muted" style={{ fontSize: '12px' }}>#{fund?.code}</div>
+          </div>
+
+          <form onSubmit={handleSubmit}>
+            <div className="form-group" style={{ marginBottom: 8 }}>
+              <label className="muted" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: '14px' }}>
+                <span>是否启用定投</span>
+                <button
+                  type="button"
+                  onClick={() => setEnabled(v => !v)}
+                  style={{
+                    border: 'none',
+                    background: 'transparent',
+                    cursor: 'pointer',
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: 6
+                  }}
+                >
+                  <span className={`dca-toggle-track ${enabled ? 'enabled' : ''}`}>
+                    <span className="dca-toggle-thumb" style={{ left: enabled ? 16 : 2 }} />
+                  </span>
+                  <span style={{ fontSize: 12, color: enabled ? 'var(--primary)' : 'var(--muted)' }}>
+                    {enabled ? '已启用' : '未启用'}
+                  </span>
+                </button>
               </label>
-              <div style={{ border: feeRate === '' ? '1px solid var(--danger)' : '1px solid var(--border)', borderRadius: 12 }}>
+            </div>
+
+            <div className="form-group" style={{ marginBottom: 16 }}>
+              <label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>
+                定投金额 (¥) <span style={{ color: 'var(--danger)' }}>*</span>
+              </label>
+              <div style={{ border: (!amount || parseFloat(amount) <= 0) ? '1px solid var(--danger)' : '1px solid var(--border)', borderRadius: 12 }}>
                 <NumericInput
-                  value={feeRate}
-                  onChange={setFeeRate}
-                  step={0.01}
+                  value={amount}
+                  onChange={setAmount}
+                  step={100}
                   min={0}
-                  placeholder="0.12"
+                  placeholder="请输入每次定投金额"
                 />
               </div>
             </div>
-            <div className="form-group" style={{ flex: 1 }}>
-              <label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>
-                定投周期 <span style={{ color: 'var(--danger)' }}>*</span>
-              </label>
-              <div className="dca-option-group row" style={{ gap: 4 }}>
-                {CYCLES.map((opt) => (
-                  <button
-                    key={opt.value}
-                    type="button"
-                    className={`dca-option-btn ${cycle === opt.value ? 'active' : ''}`}
-                    onClick={() => setCycle(opt.value)}
-                  >
-                    {opt.label}
-                  </button>
-                ))}
-              </div>
-            </div>
-          </div>
 
-          {(cycle === 'weekly' || cycle === 'biweekly') && (
-            <div className="form-group" style={{ marginBottom: 16 }}>
-              <label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>
-                扣款星期 <span style={{ color: 'var(--danger)' }}>*</span>
-              </label>
-              <div className="dca-option-group row" style={{ gap: 4 }}>
-                {WEEKDAY_OPTIONS.map((opt) => (
-                  <button
-                    key={opt.value}
-                    type="button"
-                    className={`dca-option-btn dca-weekday-btn ${weeklyDay === opt.value ? 'active' : ''}`}
-                    onClick={() => setWeeklyDay(opt.value)}
-                  >
-                    {opt.label}
-                  </button>
-                ))}
+            <div className="row" style={{ gap: 12, marginBottom: 16 }}>
+              <div className="form-group" style={{ flex: 1 }}>
+                <label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>
+                  买入费率 (%) <span style={{ color: 'var(--danger)' }}>*</span>
+                </label>
+                <div style={{ border: feeRate === '' ? '1px solid var(--danger)' : '1px solid var(--border)', borderRadius: 12 }}>
+                  <NumericInput
+                    value={feeRate}
+                    onChange={setFeeRate}
+                    step={0.01}
+                    min={0}
+                    placeholder="0.12"
+                  />
+                </div>
               </div>
-            </div>
-          )}
-
-          {cycle === 'monthly' && (
-            <div className="form-group" style={{ marginBottom: 16 }}>
-              <label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>
-                扣款日 <span style={{ color: 'var(--danger)' }}>*</span>
-              </label>
-              <div className="dca-monthly-day-group scrollbar-y-styled">
-                {Array.from({ length: 28 }).map((_, idx) => {
-                  const day = idx + 1;
-                  const active = monthlyDay === day;
-                  return (
+              <div className="form-group" style={{ flex: 1 }}>
+                <label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>
+                  定投周期 <span style={{ color: 'var(--danger)' }}>*</span>
+                </label>
+                <div className="dca-option-group row" style={{ gap: 4 }}>
+                  {CYCLES.map((opt) => (
                     <button
-                      key={day}
-                      ref={active ? monthlyDayRef : null}
+                      key={opt.value}
                       type="button"
-                      className={`dca-option-btn dca-monthly-btn ${active ? 'active' : ''}`}
-                      onClick={() => setMonthlyDay(day)}
+                      className={`dca-option-btn ${cycle === opt.value ? 'active' : ''}`}
+                      onClick={() => setCycle(opt.value)}
                     >
-                      {day}日
+                      {opt.label}
                     </button>
-                  );
-                })}
+                  ))}
+                </div>
               </div>
             </div>
-          )}
 
-          <div className="form-group" style={{ marginBottom: 16 }}>
-            <label className="muted" style={{ display: 'block', marginBottom: 4, fontSize: '14px' }}>
-              首次扣款日期
-            </label>
-            <div className="dca-first-date-display">
-              {firstDate}
-            </div>
-            <div className="muted" style={{ marginTop: 4, fontSize: 12 }}>
-              * 基于当前日期和所选周期/扣款日自动计算：每日=当天；每周/每两周=从今天起最近的所选工作日；每月=从今天起最近的所选日期（1-28日）。
-            </div>
-          </div>
+            {(cycle === 'weekly' || cycle === 'biweekly') && (
+              <div className="form-group" style={{ marginBottom: 16 }}>
+                <label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>
+                  扣款星期 <span style={{ color: 'var(--danger)' }}>*</span>
+                </label>
+                <div className="dca-option-group row" style={{ gap: 4 }}>
+                  {WEEKDAY_OPTIONS.map((opt) => (
+                    <button
+                      key={opt.value}
+                      type="button"
+                      className={`dca-option-btn dca-weekday-btn ${weeklyDay === opt.value ? 'active' : ''}`}
+                      onClick={() => setWeeklyDay(opt.value)}
+                    >
+                      {opt.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
 
-          <div className="row" style={{ gap: 12, marginTop: 12 }}>
+            {cycle === 'monthly' && (
+              <div className="form-group" style={{ marginBottom: 16 }}>
+                <label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>
+                  扣款日 <span style={{ color: 'var(--danger)' }}>*</span>
+                </label>
+                <div className="dca-monthly-day-group scrollbar-y-styled">
+                  {Array.from({ length: 28 }).map((_, idx) => {
+                    const day = idx + 1;
+                    const active = monthlyDay === day;
+                    return (
+                      <button
+                        key={day}
+                        ref={active ? monthlyDayRef : null}
+                        type="button"
+                        className={`dca-option-btn dca-monthly-btn ${active ? 'active' : ''}`}
+                        onClick={() => setMonthlyDay(day)}
+                      >
+                        {day}日
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+
+            <div className="form-group" style={{ marginBottom: 16 }}>
+              <label className="muted" style={{ display: 'block', marginBottom: 4, fontSize: '14px' }}>
+                首次扣款日期
+              </label>
+              <div className="dca-first-date-display">
+                {firstDate}
+              </div>
+              <div className="muted" style={{ marginTop: 4, fontSize: 12 }}>
+                * 基于当前日期和所选周期/扣款日自动计算：每日=当天；每周/每两周=从今天起最近的所选工作日；每月=从今天起最近的所选日期（1-28日）。
+              </div>
+            </div>
+          </form>
+        </div>
+        <div
+          style={{
+            paddingTop: 12,
+            marginTop: 4,
+          }}
+        >
+          <div className="row" style={{ gap: 12 }}>
             <button
               type="button"
               className="button secondary dca-cancel-btn"
@@ -346,15 +366,16 @@ export default function DcaModal({ fund, plan, onClose, onConfirm }) {
               取消
             </button>
             <button
-              type="submit"
+              type="button"
               className="button"
               disabled={!isValid()}
+              onClick={handleSubmit}
               style={{ flex: 1, opacity: isValid() ? 1 : 0.6 }}
             >
               保存定投
             </button>
           </div>
-        </form>
+        </div>
       </motion.div>
     </motion.div>
   );
diff --git a/app/components/MobileSettingModal.jsx b/app/components/MobileSettingModal.jsx
index 4c59b27..6f252f9 100644
--- a/app/components/MobileSettingModal.jsx
+++ b/app/components/MobileSettingModal.jsx
@@ -198,6 +198,8 @@ export default function MobileSettingModal({
             key="mobile-reset-confirm"
             title="重置表头设置"
             message="是否重置表头顺序和显示/隐藏为默认值？"
+            icon={<ResetIcon width="20" height="20" className="shrink-0 text-[var(--primary)]" />}
+            confirmVariant="primary"
             onConfirm={() => {
               onResetColumnOrder?.();
               onResetColumnVisibility?.();