From e1eb3ea8caa59c955061f3094cfe55b737eb195a Mon Sep 17 00:00:00 2001
From: hzm <934585316@qq.com>
Date: Thu, 12 Mar 2026 22:22:42 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=BC=B9=E6=A1=86=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/GroupManageModal.jsx | 236 ++++++++++++++--------------
 app/components/GroupModal.jsx       |  11 --
 app/components/PcFundTable.jsx      |   1 -
 3 files changed, 116 insertions(+), 132 deletions(-)

diff --git a/app/components/GroupManageModal.jsx b/app/components/GroupManageModal.jsx
index 048d60e..fb2f474 100644
--- a/app/components/GroupManageModal.jsx
+++ b/app/components/GroupManageModal.jsx
@@ -1,7 +1,8 @@
 'use client';
 
 import { useState } from 'react';
-import { AnimatePresence, motion, Reorder } from 'framer-motion';
+import { AnimatePresence, Reorder } from 'framer-motion';
+import { Dialog, DialogContent, DialogTitle } from '../../components/ui/dialog';
 import ConfirmModal from './ConfirmModal';
 import { CloseIcon, DragIcon, PlusIcon, SettingsIcon, TrashIcon } from './Icons';
 
@@ -56,129 +57,124 @@ export default function GroupManageModal({ groups, onClose, onSave }) {
   const isAllValid = items.every(it => it.name.trim() !== '');
 
   return (
-    <motion.div
-      className="modal-overlay"
-      role="dialog"
-      aria-modal="true"
-      aria-label="管理分组"
-      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 }}
-        className="glass card modal"
-        style={{ maxWidth: '500px', width: '90vw' }}
-        onClick={(e) => e.stopPropagation()}
+    <>
+      <Dialog
+        open
+        onOpenChange={(open) => {
+          if (!open) onClose();
+        }}
       >
-        <div className="title" style={{ marginBottom: 20, justifyContent: 'space-between' }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-            <SettingsIcon width="20" height="20" />
-            <span>管理分组</span>
-          </div>
-          <button className="icon-button" onClick={onClose} style={{ border: 'none', background: 'transparent' }}>
-            <CloseIcon width="20" height="20" />
-          </button>
-        </div>
-
-        <div className="group-manage-list-container" style={{ maxHeight: '60vh', overflowY: 'auto', paddingRight: '4px' }}>
-          {items.length === 0 ? (
-            <div className="empty-state muted" style={{ textAlign: 'center', padding: '40px 0' }}>
-              <div style={{ fontSize: '32px', marginBottom: 12, opacity: 0.5 }}>📂</div>
-              <p>暂无自定义分组</p>
+        <DialogContent
+          className="glass card modal"
+          overlayClassName="modal-overlay"
+          style={{ maxWidth: '500px', width: '90vw', zIndex: 99 }}
+          onOpenAutoFocus={(event) => event.preventDefault()}
+        >
+          <DialogTitle asChild>
+            <div className="title" style={{ marginBottom: 20, justifyContent: 'space-between' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+                <SettingsIcon width="20" height="20" />
+                <span>管理分组</span>
+              </div>
             </div>
-          ) : (
-            <Reorder.Group axis="y" values={items} onReorder={handleReorder} className="group-manage-list">
-              <AnimatePresence mode="popLayout">
-                {items.map((item) => (
-                  <Reorder.Item
-                    key={item.id}
-                    value={item}
-                    className="group-manage-item glass"
-                    layout
-                    initial={{ opacity: 0, scale: 0.98 }}
-                    animate={{ opacity: 1, scale: 1 }}
-                    exit={{ opacity: 0, scale: 0.98 }}
-                    transition={{
-                      type: 'spring',
-                      stiffness: 500,
-                      damping: 35,
-                      mass: 1,
-                      layout: { duration: 0.2 }
-                    }}
-                  >
-                    <div className="drag-handle" style={{ cursor: 'grab', display: 'flex', alignItems: 'center', padding: '0 8px' }}>
-                      <DragIcon width="18" height="18" className="muted" />
-                    </div>
-                    <input
-                      className={`input group-rename-input ${!item.name.trim() ? 'error' : ''}`}
-                      value={item.name}
-                      onChange={(e) => handleRename(item.id, e.target.value)}
-                      placeholder="请输入分组名称..."
-                      style={{
-                        flex: 1,
-                        height: '36px',
-                        background: 'rgba(0,0,0,0.2)',
-                        border: !item.name.trim() ? '1px solid var(--danger)' : 'none'
+          </DialogTitle>
+
+          <div className="group-manage-list-container" style={{ maxHeight: '60vh', overflowY: 'auto', paddingRight: '4px' }}>
+            {items.length === 0 ? (
+              <div className="empty-state muted" style={{ textAlign: 'center', padding: '40px 0' }}>
+                <div style={{ fontSize: '32px', marginBottom: 12, opacity: 0.5 }}>📂</div>
+                <p>暂无自定义分组</p>
+              </div>
+            ) : (
+              <Reorder.Group axis="y" values={items} onReorder={handleReorder} className="group-manage-list">
+                <AnimatePresence mode="popLayout">
+                  {items.map((item) => (
+                    <Reorder.Item
+                      key={item.id}
+                      value={item}
+                      className="group-manage-item glass"
+                      layout
+                      initial={{ opacity: 0, scale: 0.98 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      exit={{ opacity: 0, scale: 0.98 }}
+                      transition={{
+                        type: 'spring',
+                        stiffness: 500,
+                        damping: 35,
+                        mass: 1,
+                        layout: { duration: 0.2 }
                       }}
-                    />
-                    <button
-                      className="icon-button danger"
-                      onClick={() => handleDeleteClick(item.id, item.name)}
-                      title="删除分组"
-                      style={{ width: '36px', height: '36px', flexShrink: 0 }}
                     >
-                      <TrashIcon width="16" height="16" />
-                    </button>
-                  </Reorder.Item>
-                ))}
-              </AnimatePresence>
-            </Reorder.Group>
-          )}
-          <button
-            className="add-group-row-btn"
-            onClick={handleAddRow}
-            style={{
-              width: '100%',
-              marginTop: 12,
-              padding: '10px',
-              borderRadius: '12px',
-              border: '1px dashed var(--border)',
-              background: 'rgba(255,255,255,0.02)',
-              color: 'var(--muted)',
-              fontSize: '14px',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              gap: '8px',
-              cursor: 'pointer',
-              transition: 'all 0.2s ease'
-            }}
-          >
-            <PlusIcon width="16" height="16" />
-            <span>新增分组</span>
-          </button>
-        </div>
+                      <div className="drag-handle" style={{ cursor: 'grab', display: 'flex', alignItems: 'center', padding: '0 8px' }}>
+                        <DragIcon width="18" height="18" className="muted" />
+                      </div>
+                      <input
+                        className={`input group-rename-input ${!item.name.trim() ? 'error' : ''}`}
+                        value={item.name}
+                        onChange={(e) => handleRename(item.id, e.target.value)}
+                        placeholder="请输入分组名称..."
+                        style={{
+                          flex: 1,
+                          height: '36px',
+                          background: 'rgba(0,0,0,0.2)',
+                          border: !item.name.trim() ? '1px solid var(--danger)' : 'none'
+                        }}
+                      />
+                      <button
+                        className="icon-button danger"
+                        onClick={() => handleDeleteClick(item.id, item.name)}
+                        title="删除分组"
+                        style={{ width: '36px', height: '36px', flexShrink: 0 }}
+                      >
+                        <TrashIcon width="16" height="16" />
+                      </button>
+                    </Reorder.Item>
+                  ))}
+                </AnimatePresence>
+              </Reorder.Group>
+            )}
+            <button
+              className="add-group-row-btn"
+              onClick={handleAddRow}
+              style={{
+                width: '100%',
+                marginTop: 12,
+                padding: '10px',
+                borderRadius: '12px',
+                border: '1px dashed var(--border)',
+                background: 'rgba(255,255,255,0.02)',
+                color: 'var(--muted)',
+                fontSize: '14px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: '8px',
+                cursor: 'pointer',
+                transition: 'all 0.2s ease'
+              }}
+            >
+              <PlusIcon width="16" height="16" />
+              <span>新增分组</span>
+            </button>
+          </div>
 
-        <div style={{ marginTop: 24 }}>
-          {!isAllValid && (
-            <div className="error-text" style={{ marginBottom: 12, textAlign: 'center' }}>
-              所有分组名称均不能为空
-            </div>
-          )}
-          <button
-            className="button"
-            onClick={handleConfirm}
-            disabled={!isAllValid}
-            style={{ width: '100%', opacity: isAllValid ? 1 : 0.6 }}
-          >
-            完成
-          </button>
-        </div>
-      </motion.div>
+          <div style={{ marginTop: 24 }}>
+            {!isAllValid && (
+              <div className="error-text" style={{ marginBottom: 12, textAlign: 'center' }}>
+                所有分组名称均不能为空
+              </div>
+            )}
+            <button
+              className="button"
+              onClick={handleConfirm}
+              disabled={!isAllValid}
+              style={{ width: '100%', opacity: isAllValid ? 1 : 0.6 }}
+            >
+              完成
+            </button>
+          </div>
+        </DialogContent>
+      </Dialog>
 
       <AnimatePresence>
         {deleteConfirm && (
@@ -190,6 +186,6 @@ export default function GroupManageModal({ groups, onClose, onSave }) {
           />
         )}
       </AnimatePresence>
-    </motion.div>
+    </>
   );
 }
diff --git a/app/components/GroupModal.jsx b/app/components/GroupModal.jsx
index 154f7be..42988ee 100644
--- a/app/components/GroupModal.jsx
+++ b/app/components/GroupModal.jsx
@@ -20,7 +20,6 @@ export default function GroupModal({ onClose, onConfirm }) {
       <DialogContent
         overlayClassName="modal-overlay z-[9999]"
         className={cn('!p-0 z-[10000] max-w-[280px] sm:max-w-[280px]')}
-        showCloseButton={false}
       >
         <div className="glass card modal !max-w-[280px] !w-full">
           <div className="flex items-center justify-between mb-5">
@@ -30,16 +29,6 @@ export default function GroupModal({ onClose, onConfirm }) {
                 <span className="text-base font-semibold text-[var(--foreground)]">新增分组</span>
               </DialogTitle>
             </div>
-            <DialogClose asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-9 w-9 rounded-lg text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:bg-[var(--secondary)] transition-colors duration-200 cursor-pointer"
-                aria-label="关闭"
-              >
-                <CloseIcon className="w-5 h-5" />
-              </Button>
-            </DialogClose>
           </div>
 
           <Field className="mb-5">
diff --git a/app/components/PcFundTable.jsx b/app/components/PcFundTable.jsx
index 9cd8db9..e276e8c 100644
--- a/app/components/PcFundTable.jsx
+++ b/app/components/PcFundTable.jsx
@@ -1179,7 +1179,6 @@ export default function PcFundTable({
       >
         <DialogContent
           className="sm:max-w-2xl max-h-[88vh] flex flex-col p-0 overflow-hidden"
-          showCloseButton={true}
           onPointerDownOutside={blockDialogClose ? (e) => e.preventDefault() : undefined}
         >
           <DialogHeader className="flex-shrink-0 flex flex-row items-center justify-between gap-2 space-y-0 px-6 pb-4 pt-6 text-left border-b border-[var(--border)]">