217 lines
8.7 KiB
Rust
217 lines
8.7 KiB
Rust
use dioxus::prelude::*;
|
||
|
||
use crate::api::comments::create_comment;
|
||
use crate::components::comments::section::CommentContext;
|
||
use crate::components::forms::{AlertBox, BUTTON_PRIMARY_CLASS, INPUT_CLASS};
|
||
use crate::hooks::comment_storage::{self, PendingComment};
|
||
|
||
#[component]
|
||
pub fn CommentForm(post_id: i32, parent_id: Option<i64>) -> Element {
|
||
let ctx: CommentContext = use_context();
|
||
let mut active_reply = ctx.active_reply;
|
||
let mut refresh_trigger = ctx.refresh_trigger;
|
||
let mut pending_comments = ctx.pending_comments;
|
||
|
||
let mut author_name = use_signal(String::new);
|
||
let mut author_email = use_signal(String::new);
|
||
let mut author_url = use_signal(String::new);
|
||
let mut content_md = use_signal(String::new);
|
||
let mut honeypot = use_signal(String::new);
|
||
let mut submitting = use_signal(|| false);
|
||
let mut message = use_signal(|| Option::<(String, &'static str)>::None);
|
||
let mut loaded = use_signal(|| false);
|
||
|
||
use_effect(move || {
|
||
if loaded() {
|
||
return;
|
||
}
|
||
loaded.set(true);
|
||
if let Some(info) = comment_storage::load_author() {
|
||
author_name.set(info.name);
|
||
author_email.set(info.email);
|
||
author_url.set(info.url);
|
||
}
|
||
});
|
||
|
||
if let Some(pid) = parent_id {
|
||
if active_reply() != Some(pid) {
|
||
return rsx! {};
|
||
}
|
||
}
|
||
|
||
let is_reply = parent_id.is_some();
|
||
|
||
rsx! {
|
||
div {
|
||
class: if is_reply { "mt-3 pt-3 border-t border-gray-100 dark:border-[#333]" } else { "" },
|
||
role: "form",
|
||
aria_label: if is_reply { "回复评论" } else { "发表评论" },
|
||
|
||
if let Some((msg, variant)) = message() {
|
||
div { aria_live: "polite",
|
||
AlertBox { message: msg, variant }
|
||
}
|
||
}
|
||
|
||
div { class: "space-y-3",
|
||
div { class: "grid grid-cols-1 sm:grid-cols-2 gap-3",
|
||
div {
|
||
label { class: "block text-sm font-medium text-paper-secondary mb-1",
|
||
"昵称 *"
|
||
}
|
||
input {
|
||
class: INPUT_CLASS,
|
||
r#type: "text",
|
||
placeholder: "你的昵称",
|
||
value: "{author_name}",
|
||
disabled: submitting(),
|
||
oninput: move |e| author_name.set(e.value()),
|
||
}
|
||
}
|
||
div {
|
||
label { class: "block text-sm font-medium text-paper-secondary mb-1",
|
||
"邮箱 *"
|
||
}
|
||
input {
|
||
class: INPUT_CLASS,
|
||
r#type: "email",
|
||
placeholder: "your@email.com",
|
||
value: "{author_email}",
|
||
disabled: submitting(),
|
||
oninput: move |e| author_email.set(e.value()),
|
||
}
|
||
}
|
||
}
|
||
div {
|
||
label { class: "block text-sm font-medium text-paper-secondary mb-1",
|
||
"网站"
|
||
}
|
||
input {
|
||
class: INPUT_CLASS,
|
||
r#type: "url",
|
||
placeholder: "https://example.com（可选）",
|
||
value: "{author_url}",
|
||
disabled: submitting(),
|
||
oninput: move |e| author_url.set(e.value()),
|
||
}
|
||
}
|
||
|
||
textarea {
|
||
class: "{INPUT_CLASS} min-h-[100px] resize-y",
|
||
value: "{content_md}",
|
||
disabled: submitting(),
|
||
oninput: move |e| content_md.set(e.value()),
|
||
}
|
||
|
||
p { class: "text-xs text-paper-tertiary",
|
||
"支持 Markdown 语法"
|
||
}
|
||
|
||
textarea {
|
||
class: "hidden",
|
||
aria_hidden: "true",
|
||
tabindex: "-1",
|
||
value: "{honeypot}",
|
||
oninput: move |e| honeypot.set(e.value()),
|
||
}
|
||
|
||
button {
|
||
class: BUTTON_PRIMARY_CLASS,
|
||
disabled: submitting(),
|
||
onclick: move |_| {
|
||
if submitting() {
|
||
return;
|
||
}
|
||
|
||
let post_id = post_id;
|
||
let parent_id = parent_id;
|
||
let name = author_name();
|
||
let email = author_email();
|
||
let url_val = author_url();
|
||
let content = content_md();
|
||
let hp = honeypot();
|
||
|
||
if !hp.is_empty() {
|
||
return;
|
||
}
|
||
|
||
if name.trim().is_empty() || email.trim().is_empty() || content.trim().is_empty() {
|
||
message.set(Some(("请填写所有必填项".to_string(), "error")));
|
||
return;
|
||
}
|
||
|
||
submitting.set(true);
|
||
message.set(None);
|
||
|
||
spawn(async move {
|
||
let result = create_comment(
|
||
post_id,
|
||
parent_id,
|
||
name.clone(),
|
||
email.clone(),
|
||
if url_val.trim().is_empty() { None } else { Some(url_val.clone()) },
|
||
content.clone(),
|
||
).await;
|
||
|
||
submitting.set(false);
|
||
|
||
match result {
|
||
Ok(resp) => {
|
||
if resp.success {
|
||
comment_storage::save_author(
|
||
&name,
|
||
&email,
|
||
&url_val,
|
||
);
|
||
|
||
if let Some(comment_id) = resp.comment_id {
|
||
let avatar_url = resp.avatar_url.unwrap_or_default();
|
||
let depth = resp.depth.unwrap_or(0);
|
||
|
||
let now = chrono::Utc::now().to_rfc3339();
|
||
let pending = PendingComment {
|
||
id: comment_id,
|
||
parent_id,
|
||
depth,
|
||
author_name: name.clone(),
|
||
author_url: if url_val.trim().is_empty() { None } else { Some(url_val) },
|
||
avatar_url,
|
||
content_md: content,
|
||
created_at: now.clone(),
|
||
stored_at: now,
|
||
};
|
||
|
||
comment_storage::save_pending_comment(post_id, pending.clone());
|
||
pending_comments.write().push(pending);
|
||
}
|
||
|
||
content_md.set(String::new());
|
||
message.set(Some((resp.message, "success")));
|
||
if parent_id.is_some() {
|
||
active_reply.set(None);
|
||
}
|
||
refresh_trigger.set(!refresh_trigger());
|
||
} else {
|
||
message.set(Some((resp.message, "error")));
|
||
}
|
||
}
|
||
Err(_) => {
|
||
message.set(Some(("提交失败，请稍后重试".to_string(), "error")));
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
if submitting() {
|
||
"提交中…"
|
||
} else if is_reply {
|
||
"回复"
|
||
} else {
|
||
"发表评论"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|