feat(label): add label page

components/label/components/BackupModal.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import CustomModal from "./CustomModal"
+import { TextInput } from "@mantine/core"
+import { useForm } from "@mantine/form"
+
+interface ComponentProps {
+  open: boolean
+  handleCancel: () => void
+  handleOk: (name: string) => void
+}
+
+const BackupModal = ({ open, handleCancel, handleOk }: ComponentProps) => {
+  const form = useForm({
+    initialValues: {
+      backup_name: "",
+    },
+    validate: {
+      backup_name: (value) => (value.length < 1 ? "请输入备份名称" : null),
+    },
+  })
+
+  const handleSubmit = () => {
+    const { hasErrors } = form.validate()
+    if (!hasErrors) {
+      handleOk(form.values.backup_name)
+    }
+  }
+
+  return (
+    <CustomModal
+      title="备份标注结果"
+      open={open}
+      onCancel={handleCancel}
+      onOk={handleSubmit}
+      centered
+      closeOnClickOutside={false}>
+      <TextInput
+        label="备份名称"
+        placeholder="请输入备份名称"
+        key="backup_name"
+        {...form.getInputProps("backup_name")}
+      />
+    </CustomModal>
+  )
+}
+
+export default BackupModal