feat：调整新建分组弹框样式

app/components/GroupModal.jsx

@@ -1,61 +1,92 @@
 'use client';
 
 import { useState } from 'react';
-import { motion } from 'framer-motion';
-import { CloseIcon, PlusIcon } from './Icons';
+import { Dialog, DialogContent, DialogTitle, DialogFooter, DialogClose } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Field, FieldLabel, FieldContent } from '@/components/ui/field';
+import { PlusIcon, CloseIcon } from './Icons';
+import { cn } from '@/lib/utils';
 
 export default function GroupModal({ onClose, onConfirm }) {
   const [name, setName] = useState('');
+
   return (
-    <motion.div
-      className="modal-overlay"
-      role="dialog"
-      aria-modal="true"
-      aria-label="新增分组"
-      onClick={onClose}
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open) onClose?.();
+      }}
     >
-      <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: '400px' }}
-        onClick={(e) => e.stopPropagation()}
+      <DialogContent
+        overlayClassName="modal-overlay z-[9999]"
+        className={cn('!p-0 z-[10000] max-w-[280px] sm:max-w-[280px]')}
+        showCloseButton={false}
       >
-        <div className="title" style={{ marginBottom: 20, justifyContent: 'space-between' }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-            <PlusIcon width="20" height="20" />
-            <span>新增分组</span>
+        <div className="glass card modal !max-w-[280px] !w-full">
+          <div className="flex items-center justify-between mb-5">
+            <div className="flex items-center gap-2.5">
+              <PlusIcon className="w-5 h-5 shrink-0 text-[var(--foreground)]" aria-hidden />
+              <DialogTitle asChild>
+                <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">
+            <FieldLabel htmlFor="group-modal-name" className="text-sm text-[var(--muted-foreground)] mb-2 block">
+              分组名称（最多 8 个字）
+            </FieldLabel>
+            <FieldContent>
+              <input
+                id="group-modal-name"
+                className={cn(
+                  'flex h-11 w-full rounded-xl border border-[var(--border)] bg-[var(--input)] px-3.5 py-2 text-sm text-[var(--foreground)] outline-none',
+                  'placeholder:text-[var(--muted-foreground)]',
+                  'transition-colors duration-200 focus:border-[var(--ring)] focus:ring-2 focus:ring-[var(--ring)]/20 focus:ring-offset-2 focus:ring-offset-[var(--card)]',
+                  'disabled:cursor-not-allowed disabled:opacity-50'
+                )}
+                autoFocus
+                placeholder="请输入分组名称..."
+                value={name}
+                onChange={(e) => {
+                  const v = e.target.value || '';
+                  setName(v.slice(0, 8));
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && name.trim()) onConfirm(name.trim());
+                }}
+              />
+            </FieldContent>
+          </Field>
+
+          <div className="flex gap-3">
+            <Button
+              variant="secondary"
+              className="flex-1 h-11 rounded-xl cursor-pointer bg-[var(--secondary)] text-[var(--foreground)] hover:bg-[var(--secondary)]/80 border border-[var(--border)]"
+              onClick={onClose}
+            >
+              取消
+            </Button>
+            <Button
+              className="flex-1 h-11 rounded-xl cursor-pointer"
+              onClick={() => name.trim() && onConfirm(name.trim())}
+              disabled={!name.trim()}
+            >
+              确定
+            </Button>
           </div>
-          <button className="icon-button" onClick={onClose} style={{ border: 'none', background: 'transparent' }}>
-            <CloseIcon width="20" height="20" />
-          </button>
         </div>
-        <div className="form-group" style={{ marginBottom: 20 }}>
-          <label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>分组名称（最多 8 个字）</label>
-          <input
-            className="input"
-            autoFocus
-            placeholder="请输入分组名称..."
-            value={name}
-            onChange={(e) => {
-              const v = e.target.value || '';
-              // 限制最多 8 个字符（兼容中英文），超出部分自动截断
-              setName(v.slice(0, 8));
-            }}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' && name.trim()) onConfirm(name.trim());
-            }}
-          />
-        </div>
-        <div className="row" style={{ gap: 12 }}>
-          <button className="button secondary" onClick={onClose} style={{ flex: 1, background: 'rgba(255,255,255,0.05)', color: 'var(--text)' }}>取消</button>
-          <button className="button" onClick={() => name.trim() && onConfirm(name.trim())} disabled={!name.trim()} style={{ flex: 1 }}>确定</button>
-        </div>
-      </motion.div>
-    </motion.div>
+      </DialogContent>
+    </Dialog>
   );
 }