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>
   );
 }

app/globals.css

@@ -23,12 +23,12 @@
   --popover: #111827;
   --popover-foreground: #e5e7eb;
   --primary-foreground: #0f172a;
-  --secondary: #1f2937;
+  --secondary: #0b1220;
   --secondary-foreground: #e5e7eb;
   --muted-foreground: #9ca3af;
   --accent-foreground: #e5e7eb;
   --destructive: #f87171;
-  --input: #1f2937;
+  --input: #0b1220;
   --ring: #22d3ee;
   --chart-1: #22d3ee;
   --chart-2: #60a5fa;
@@ -76,7 +76,7 @@
   --muted-foreground: #475569;
   --accent-foreground: #ffffff;
   --destructive: #dc2626;
-  --input: #e2e8f0;
+  --input: #f1f5f9;
   --ring: #0891b2;
   --chart-1: #0891b2;
   --chart-2: #2563eb;
@@ -3456,7 +3456,7 @@ input[type="number"] {
   --accent-foreground: #f8fafc;
   --destructive: #f87171;
   --border: #1f2937;
-  --input: #1e293b;
+  --input: #0b1220;
   --ring: #22d3ee;
   --chart-1: #22d3ee;
   --chart-2: #60a5fa;

components/ui/button.jsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props} />
+  );
+}
+
+export { Button, buttonVariants }

components/ui/dialog.jsx

@@ -58,7 +58,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-[16px] border border-[var(--border)] text-[var(--foreground)] p-6 dialog-content-shadow outline-none duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          "fixed top-[50%] left-[50%] z-50 w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-[16px] border border-[var(--border)] text-[var(--foreground)] p-6 dialog-content-shadow outline-none duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
           className
         )}
         {...props}>

components/ui/field.jsx

@@ -0,0 +1,245 @@
+"use client"
+
+import { useMemo } from "react"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+
+function FieldSet({
+  className,
+  ...props
+}) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function FieldGroup({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+      )}
+      {...props} />
+  );
+}
+
+const fieldVariants = cva("group/field flex w-full gap-3 data-[invalid=true]:text-destructive", {
+  variants: {
+    orientation: {
+      vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+      horizontal: [
+        "flex-row items-center",
+        "[&>[data-slot=field-label]]:flex-auto",
+        "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      ],
+      responsive: [
+        "flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
+        "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+        "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      ],
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+})
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(
+        fieldVariants({ orientation }),
+        // iOS 聚焦时若输入框字体 < 16px 会触发缩放，小屏下强制 16px 避免缩放
+        "max-md:[&_input]:text-base max-md:[&_textarea]:text-base max-md:[&_select]:text-base",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function FieldContent({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className)}
+      {...props} />
+  );
+}
+
+function FieldLabel({
+  className,
+  ...props
+}) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+        "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function FieldTitle({
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function FieldDescription({
+  className,
+  ...props
+}) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props} />
+  );
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}>
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content">
+          {children}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map((error, index) =>
+          error?.message && <li key={index}>{error.message}</li>)}
+      </ul>
+    );
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}>
+      {content}
+    </div>
+  );
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}

components/ui/label.jsx

@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props} />
+  );
+}
+
+export { Label }

components/ui/separator.jsx

@@ -0,0 +1,27 @@
+"use client"
+
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props} />
+  );
+}
+
+export { Separator }

package-lock.json

@@ -10732,7 +10732,7 @@
     },
     "node_modules/radix-ui": {
       "version": "1.4.3",
-      "resolved": "https://registry.npmmirror.com/radix-ui/-/radix-ui-1.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/radix-ui/-/radix-ui-1.4.3.tgz",
       "integrity": "sha512-aWizCQiyeAenIdUbqEpXgRA1ya65P13NKn/W8rWkcN0OPkRDxdBVLWnIEDsS2RpwCK2nobI7oMUSmexzTDyAmA==",
       "license": "MIT",
       "dependencies": {

public/manifest.webmanifest

@@ -0,0 +1,34 @@
+{
+  "name": "基估宝",
+  "short_name": "基估宝",
+  "description": "基金管理管家",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#0f172a",
+  "theme_color": "#0f172a",
+  "id": "/",
+  "icons": [
+    {
+      "src": "/Icon-60@3x.png",
+      "sizes": "180x180",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/Icon-60@3x.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/Icon-60@3x.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "categories": ["finance", "utilities"],
+  "prefer_related_applications": false
+}