From c10c4a5d0ee19519ccd9ae0db283fc213696effe Mon Sep 17 00:00:00 2001
From: hzm <934585316@qq.com>
Date: Wed, 11 Mar 2026 08:22:09 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=B7=BB=E5=8A=A0=E5=9F=BA?=
 =?UTF-8?q?=E9=87=91=E5=88=B0=E5=88=86=E7=BB=84=E5=BC=B9=E6=A1=86=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E6=8C=81=E4=BB=93=E9=87=91=E9=A2=9D=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/AddFundToGroupModal.jsx | 54 ++++++++++++++++----------
 app/page.jsx                           |  1 +
 2 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/app/components/AddFundToGroupModal.jsx b/app/components/AddFundToGroupModal.jsx
index 87dfb8f..260575d 100644
--- a/app/components/AddFundToGroupModal.jsx
+++ b/app/components/AddFundToGroupModal.jsx
@@ -1,14 +1,26 @@
 'use client';
 
 import { useState } from 'react';
-import { motion } from 'framer-motion';
 import { CloseIcon, PlusIcon } from './Icons';
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from '@/components/ui/dialog';
 
-export default function AddFundToGroupModal({ allFunds, currentGroupCodes, onClose, onAdd }) {
+export default function AddFundToGroupModal({ allFunds, currentGroupCodes, holdings = {}, onClose, onAdd }) {
   const [selected, setSelected] = useState(new Set());
 
   const availableFunds = (allFunds || []).filter(f => !(currentGroupCodes || []).includes(f.code));
 
+  const getHoldingAmount = (fund) => {
+    const holding = holdings[fund?.code];
+    if (!holding || !holding.share || holding.share <= 0) return null;
+    const nav = Number(fund?.dwjz) || Number(fund?.gsz) || Number(fund?.estGsz) || 0;
+    if (!nav) return null;
+    return holding.share * nav;
+  };
+
   const toggleSelect = (code) => {
     setSelected(prev => {
       const next = new Set(prev);
@@ -18,24 +30,21 @@ export default function AddFundToGroupModal({ allFunds, currentGroupCodes, onClo
     });
   };
 
+  const handleOpenChange = (open) => {
+    if (!open) {
+      onClose?.();
+    }
+  };
+
   return (
-    <motion.div
-      className="modal-overlay"
-      role="dialog"
-      aria-modal="true"
-      onClick={onClose}
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
-    >
-      <motion.div
-        initial={{ opacity: 0, scale: 0.95, y: 20 }}
-        animate={{ opacity: 1, scale: 1, y: 0 }}
-        exit={{ opacity: 0, scale: 0.95, y: 20 }}
+    <Dialog open onOpenChange={handleOpenChange}>
+      <DialogContent
+        showCloseButton={false}
         className="glass card modal"
-        style={{ maxWidth: '500px', width: '90vw' }}
-        onClick={(e) => e.stopPropagation()}
+        overlayClassName="modal-overlay"
+        style={{ maxWidth: '500px', width: '90vw', zIndex: 99 }}
       >
+        <DialogTitle className="sr-only">添加基金到分组</DialogTitle>
         <div className="title" style={{ marginBottom: 20, justifyContent: 'space-between' }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
             <PlusIcon width="20" height="20" />
@@ -63,9 +72,14 @@ export default function AddFundToGroupModal({ allFunds, currentGroupCodes, onClo
                   <div className="checkbox" style={{ marginRight: 12 }}>
                     {selected.has(fund.code) && <div className="checked-mark" />}
                   </div>
-                  <div className="fund-info" style={{ flex: 1 }}>
+                  <div className="fund-info" style={{ flex: 1, minWidth: 0 }}>
                     <div style={{ fontWeight: 600 }}>{fund.name}</div>
                     <div className="muted" style={{ fontSize: '12px' }}>#{fund.code}</div>
+                    {getHoldingAmount(fund) != null && (
+                      <div className="muted" style={{ fontSize: '12px', marginTop: 2 }}>
+                        持仓金额：<span style={{ color: 'var(--foreground)', fontWeight: 500 }}>¥{getHoldingAmount(fund).toFixed(2)}</span>
+                      </div>
+                    )}
                   </div>
                 </div>
               ))}
@@ -84,7 +98,7 @@ export default function AddFundToGroupModal({ allFunds, currentGroupCodes, onClo
             确定 ({selected.size})
           </button>
         </div>
-      </motion.div>
-    </motion.div>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/app/page.jsx b/app/page.jsx
index 3a1304d..52551b1 100644
--- a/app/page.jsx
+++ b/app/page.jsx
@@ -4300,6 +4300,7 @@ export default function HomePage() {
           <AddFundToGroupModal
             allFunds={funds}
             currentGroupCodes={groups.find(g => g.id === currentTab)?.codes || []}
+            holdings={holdings}
             onClose={() => setAddFundToGroupOpen(false)}
             onAdd={handleAddFundsToGroup}
           />