first commit

web/src/components/CreateResourceModal.tsx

@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import { Modal, Button, Input, Form, toast } from "@heroui/react";
+import { api } from '../api/client';
+import { useSWRConfig } from 'swr';
+
+export function CreateResourceModal({ isOpen, onOpenChange }: { isOpen: boolean, onOpenChange: (isOpen: boolean) => void }) {
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [url, setUrl] = useState('');
+  const [category, setCategory] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { mutate } = useSWRConfig();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      await api.resources.post({
+        title,
+        description,
+        url,
+        category
+      });
+      mutate('/resources');
+      onOpenChange(false);
+      setTitle('');
+      setDescription('');
+      setUrl('');
+      setCategory('');
+    } catch (err) {
+      console.error(err);
+      toast.danger('创建失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <Modal.Backdrop />
+      <Modal.Container>
+        <Modal.Dialog>
+            <Modal.Header>
+              <Modal.Heading>添加新资源</Modal.Heading>
+              <Modal.CloseTrigger />
+            </Modal.Header>
+            <Modal.Body>
+              <Form validationBehavior="native" onSubmit={handleSubmit} className="flex flex-col gap-4">
+                <Input
+                  isRequired
+                  label="标题"
+                  placeholder="资源名称"
+                  value={title}
+                  onValueChange={setTitle}
+                />
+                <Input
+                  label="描述"
+                  placeholder="简短描述"
+                  value={description}
+                  onValueChange={setDescription}
+                />
+                <Input
+                  isRequired
+                  label="链接"
+                  placeholder="https://..."
+                  value={url}
+                  onValueChange={setUrl}
+                />
+                <Input
+                  label="分类"
+                  placeholder="如: 工具, 文档"
+                  value={category}
+                  onValueChange={setCategory}
+                />
+                <Button color="primary" type="submit" isLoading={loading}>
+                  提交
+                </Button>
+              </Form>
+            </Modal.Body>
+            <Modal.Footer>
+              <Button color="danger" variant="ghost" onPress={() => onOpenChange(false)}>
+                取消
+              </Button>
+            </Modal.Footer>
+        </Modal.Dialog>
+      </Modal.Container>
+    </Modal>
+  );
+}