diff --git a/app/globals.css b/app/globals.css index 97c7dfb..747467e 100644 --- a/app/globals.css +++ b/app/globals.css @@ -298,11 +298,27 @@ body { color: var(--muted); } +.error-text { + color: var(--danger); + font-size: 12px; + margin-top: 4px; +} + +.feedback-modal { + max-width: 420px !important; +} + +.link-button:hover { + color: var(--accent) !important; + opacity: 0.8; +} + .footer { margin-top: 24px; font-size: 12px; color: var(--muted); text-align: center; + padding-bottom: 60px; } .actions { diff --git a/app/page.jsx b/app/page.jsx index ff270e9..9ee5d16 100644 --- a/app/page.jsx +++ b/app/page.jsx @@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; +import { useForm, ValidationError } from '@formspree/react'; import Announcement from "./components/Announcement"; function PlusIcon(props) { @@ -70,6 +71,14 @@ function GridIcon(props) { ); } +function CloseIcon(props) { + return ( + + + + ); +} + function ListIcon(props) { return ( @@ -96,6 +105,98 @@ function Stat({ label, value, delta }) { ); } +function FeedbackModal({ onClose }) { + const [state, handleSubmit] = useForm("xdadgvjd"); + + const onSubmit = (e) => { + const form = e?.target; + const nicknameInput = form?.elements?.namedItem?.('nickname'); + if (nicknameInput && typeof nicknameInput.value === 'string') { + const v = nicknameInput.value.trim(); + if (!v) nicknameInput.value = '匿名'; + } + return handleSubmit(e); + }; + + return ( + + e.stopPropagation()} + > +
+
+ + 意见反馈 +
+ +
+ + {state.succeeded ? ( +
+
🎉
+

感谢您的反馈!

+

我们已收到您的建议,会尽快查看。

+ +
+ ) : ( +
+
+ + + +
+ +
+ +