feat(ui): 构建资产管理页面与添加资产表单，打通 Server Action 录入链路

2026-04-27 21:35:41 +08:00
parent f160c2bdcb
commit 19e23dc933
3 changed files with 227 additions and 12 deletions
@@ -0,0 +1,143 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { useRouter } from 'next/navigation';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Plus } from 'lucide-react';
+import { createAsset } from '@/actions/asset';
+
+const addAssetSchema = z.object({
+  symbol: z.string().min(1, '资产代码不能为空'),
+  type: z.enum(['STOCK', 'CRYPTO', 'CASH']),
+  baseCurrency: z.string().min(2, '基础币种至少2个字符'),
+});
+
+type AddAssetForm = z.infer<typeof addAssetSchema>;
+
+export function AddAssetDialog() {
+  const [open, setOpen] = useState(false);
+  const [isPending, startTransition] = useTransition();
+  const router = useRouter();
+
+  const form = useForm<AddAssetForm>({
+    resolver: zodResolver(addAssetSchema),
+    defaultValues: {
+      symbol: '',
+      type: 'STOCK' as const,
+      baseCurrency: '',
+    },
+  });
+
+  function onSubmit(values: AddAssetForm) {
+    startTransition(async () => {
+      const result = await createAsset(values);
+      if (result.success) {
+        setOpen(false);
+        form.reset();
+        router.refresh();
+      }
+    });
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button>
+          <Plus className="h-4 w-4 mr-2" />
+          添加资产
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>添加新资产</DialogTitle>
+          <DialogDescription>录入一个新的资产到系统中</DialogDescription>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="symbol"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>资产代码</FormLabel>
+                  <FormControl>
+                    <Input placeholder="例如: BTC" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="type"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>资产类型</FormLabel>
+                  <Select onValueChange={field.onChange} defaultValue={field.value}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="选择资产类型" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="STOCK">股票 (STOCK)</SelectItem>
+                      <SelectItem value="CRYPTO">加密货币 (CRYPTO)</SelectItem>
+                      <SelectItem value="CASH">现金 (CASH)</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="baseCurrency"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>基础币种</FormLabel>
+                  <FormControl>
+                    <Input placeholder="例如: USD" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <DialogFooter>
+              <Button type="submit" disabled={isPending}>
+                {isPending ? '提交中...' : '确认添加'}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}