增加系统设置表

app/api/admin/setting/[[...path]]/route.ts

@@ -12,9 +12,45 @@ async function handle(
   // console.log('----', pathname, searchParams, params.path)
   if (method === "GET" && !params.path) {
     const all_setting = await prisma.setting.findMany();
-    console.log("all_setting,", all_setting);
+    // console.log("all_setting,", all_setting);
     return NextResponse.json({ result: all_setting });
   }
+  if (method === "POST" && !params.path) {
+    try {
+      const setting_instance = await prisma.setting.create({
+        data: await req.json(),
+      });
+      // console.log('-------', setting_instance)
+      return NextResponse.json({ result: setting_instance });
+    } catch (e) {
+      console.log("[insert setting] error,", e);
+    }
+  }
+
+  if (method === "PUT" && params.path) {
+    try {
+      const setting_key = params.path[0];
+      const setting_instance = await prisma.setting.update({
+        where: {
+          key: setting_key,
+        },
+        data: await req.json(),
+      });
+      return NextResponse.json({ result: setting_instance });
+    } catch {}
+  }
+
+  if (method === "DELETE" && params.path) {
+    try {
+      const setting_key = params.path[0];
+      const setting_instance = await prisma.setting.delete({
+        where: {
+          key: setting_key,
+        },
+      });
+      return NextResponse.json({ result: setting_instance });
+    } catch {}
+  }
 
   return NextResponse.json({ error: "当前方法不支持" }, { status: 405 });
 }

app/app/(admin)/components/admin-setting-table.tsx

@@ -1,11 +1,101 @@
 "use client";
 import type { FormProps } from "antd";
-import { Button, Checkbox, Form, Input, Table } from "antd";
+import {
+  Button,
+  Checkbox,
+  Form,
+  Input,
+  Modal,
+  Space,
+  Table,
+  TableColumnsType,
+  Radio,
+  Flex,
+} from "antd";
 import { useEffect, useState } from "react";
 import { Setting } from "@prisma/client";
 
 function SettingForm() {
+  const [modal, contextHolder] = Modal.useModal();
+  const [form] = Form.useForm();
+
   const [setting, setSetting] = useState<Setting[]>([]);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const openModal = () => setIsModalVisible(true);
+  const closeModal = () => setIsModalVisible(false);
+
+  const handleFormSubmit = async (record: Setting) => {
+    console.log("-------", record);
+  };
+
+  const handelDel = (record: Setting) => {
+    fetch(`/api/admin/setting/${record.key}`, {
+      method: "DELETE",
+      credentials: "include",
+    })
+      .then((response) => response.json())
+      .then((result) => {
+        console.log("删除成功，", result);
+      });
+  };
+
+  const handleEdit = (method: "POST" | "PUT", record: Setting | undefined) => {
+    modal.confirm({
+      title: "编辑设置",
+      content: (
+        <Form
+          form={form}
+          labelCol={{ span: 4 }}
+          wrapperCol={{ span: 18 }}
+          layout="horizontal"
+          initialValues={record}
+          preserve={false}
+        >
+          <Form.Item
+            name="key"
+            label="key"
+            rules={[{ required: true, message: "请输入key" }]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            name="value"
+            label="value"
+            rules={[{ required: true, message: "请输入value" }]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            name="type"
+            label="type"
+            rules={[{ required: true, message: "请输入type" }]}
+          >
+            <Radio.Group>
+              <Radio.Button value="string">string</Radio.Button>
+              <Radio.Button value="boolean">boolean</Radio.Button>
+              <Radio.Button value="number">number</Radio.Button>
+            </Radio.Group>
+          </Form.Item>
+        </Form>
+      ),
+      onOk: () => {
+        const setting_key = method === "PUT" ? record?.key : "";
+        form.validateFields().then((values) => {
+          console.log("提交，，，", values);
+          fetch(`/api/admin/setting/${setting_key}`, {
+            method: method,
+            credentials: "include",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(values),
+          })
+            .then((response) => response.json())
+            .then((result) => {
+              console.log("创建结果，", result);
+            });
+        });
+      },
+    });
+  };
 
   useEffect(() => {
     fetch("/api/admin/setting", {
@@ -18,7 +108,7 @@ function SettingForm() {
       });
   }, []);
 
-  const columns = [
+  const columns: TableColumnsType<Setting> = [
     {
       title: "key",
       dataIndex: "key",
@@ -37,14 +127,56 @@ function SettingForm() {
       dataIndex: "",
       key: "key",
       render: (_, record) => (
-        <>
-          <Button>编辑</Button>
-        </>
+        <Space size="small">
+          <a type="link" onClick={() => handleEdit("PUT", record)}>
+            编辑
+          </a>
+          <a type="link" onClick={() => handelDel(record)}>
+            删除
+          </a>
+        </Space>
       ),
     },
   ];
 
-  return <Table dataSource={setting} columns={columns} />;
+  return (
+    <>
+      <Flex vertical>
+        <Button type="link" onClick={() => handleEdit("POST", undefined)}>
+          创建
+        </Button>
+        <Table dataSource={setting} columns={columns} />
+      </Flex>
+      {contextHolder}
+    </>
+  );
 }
 
+// const EditFormModal = ({ visible, onClose, onSubmit, initialData }) => {
+//   const [formData, setFormData] = useState(initialData);
+//   const handleFormChange = (changeVlaue, allValues) => {
+//     setFormData(allValues);
+//   };
+//
+//   const handleSubmit = () => {
+//     onSubmit(formData);
+//     onClose();
+//   }
+//
+//   return (
+//       <Modal
+//           title="编辑设置"
+//           open={visible}
+//           onCancel={onClose}
+//           footer={[
+//               <Button key="cancel" onClick={onClose}>取消</Button>,
+//               <Button key="submit" type="primary" onClick={handleSubmit}>提交</Button>,
+//           ]}
+//       >
+// 123
+//       </Modal>
+//   )
+//
+// }
+
 export default SettingForm;

lib/auth.ts

@@ -219,7 +219,7 @@ async function getSetting(key: string) {
       key: key
     }
   })
-  console.log('setting,------', setting)
+  // console.log('setting,------', setting)
   if (!setting) {
     return null;
   }