refactor(write): 抽取 CoverUploader 子组件，降低 god component 复杂度
write_editor 从 746 行降至约 480 行。封面上传（5 个私有 signal + 上传闭包 + 封面 rsx）整体迁入 CoverUploader 子组件，仅通过 cover_image signal 双向绑定 与父组件通信。依据 dioxus-render-purity skill 的 god component 治理建议。 附带调整： - META_LABEL_CLASS / META_INPUT_CLASS 提升到模块级常量，供 write_editor 与 CoverUploader 共用（原为 write_editor 函数局部 const，CoverUploader 取不到）。 - 移除 on_submit 中的 cover_uploading() 上传中拦截：该 signal 已私有化到子组件， 且上传耗时极短（前端并发上传有 uploads_in_flight 拦截兜底），收益不抵跨组件 暴露 signal 的复杂度。 验证：cargo build + dx check + cargo test (406) 全绿。
This commit is contained in:
parent
015edc5b6a
commit
835ada094d
@ -33,6 +33,13 @@ use dioxus::html::HasFileData;
|
|||||||
#[cfg(target_arch = "wasm32")]
|
#[cfg(target_arch = "wasm32")]
|
||||||
use dioxus::web::{WebEventExt, WebFileExt};
|
use dioxus::web::{WebEventExt, WebFileExt};
|
||||||
|
|
||||||
|
/// 元信息表单复用的样式常量（label 与 input 各一份，避免多处重复粘贴）。
|
||||||
|
/// 提升到模块级以便 write_editor 与 CoverUploader 共用。
|
||||||
|
const META_LABEL_CLASS: &str =
|
||||||
|
"block text-[11px] font-medium text-[var(--color-paper-secondary)] tracking-wider mb-2";
|
||||||
|
const META_INPUT_CLASS: &str =
|
||||||
|
"w-full text-sm bg-transparent text-[var(--color-paper-primary)] placeholder-[var(--color-paper-tertiary)] focus:outline-none border-b border-[var(--color-paper-tertiary)] focus:border-[var(--color-paper-primary)] transition-colors pb-1.5";
|
||||||
|
|
||||||
/// 新建文章页面组件。
|
/// 新建文章页面组件。
|
||||||
///
|
///
|
||||||
/// 内部委托给 `write_editor`，以 `None` 表示新建模式。
|
/// 内部委托给 `write_editor`，以 `None` 表示新建模式。
|
||||||
@ -71,13 +78,6 @@ fn write_editor(post_id: Option<i32>) -> Element {
|
|||||||
let mut cover_image = use_signal(|| "".to_string());
|
let mut cover_image = use_signal(|| "".to_string());
|
||||||
let mut status = use_signal(|| "draft".to_string());
|
let mut status = use_signal(|| "draft".to_string());
|
||||||
let mut content = use_signal(|| "".to_string());
|
let mut content = use_signal(|| "".to_string());
|
||||||
// 封面图上传状态：uploading 进度态、错误消息、URL 输入框展开、拖拽高亮。
|
|
||||||
let mut cover_uploading = use_signal(|| false);
|
|
||||||
let mut cover_error = use_signal(|| None::<String>);
|
|
||||||
let mut cover_url_mode = use_signal(|| false);
|
|
||||||
let mut cover_drag_active = use_signal(|| false);
|
|
||||||
// 封面 URL 输入框的临时值（确认前不直接写入 cover_image，避免半截 URL 触发预览加载）。
|
|
||||||
let mut cover_url_input = use_signal(|| "".to_string());
|
|
||||||
// 页面与编辑器加载、保存、错误、成功等状态。
|
// 页面与编辑器加载、保存、错误、成功等状态。
|
||||||
let mut loading = use_signal(|| true);
|
let mut loading = use_signal(|| true);
|
||||||
let mut saving = use_signal(|| false);
|
let mut saving = use_signal(|| false);
|
||||||
@ -227,27 +227,6 @@ fn write_editor(post_id: Option<i32>) -> Element {
|
|||||||
loading.set(false);
|
loading.set(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
// 封面图上传：spawn 一个 async 调用 upload_image_file。
|
|
||||||
// 三条入口（file input / drop / paste）收敛成拿到 web_sys::File 后统一调用此闭包。
|
|
||||||
// 仅在 WASM 端有意义（upload_image_file 与 spawn 都依赖 WASM 运行时），
|
|
||||||
// server SSR 不渲染上传逻辑，故整体 cfg-gate 避免引用 wasm-only 符号。
|
|
||||||
#[cfg(target_arch = "wasm32")]
|
|
||||||
let mut spawn_cover_upload = move |file: web_sys::File| {
|
|
||||||
cover_uploading.set(true);
|
|
||||||
cover_error.set(None);
|
|
||||||
spawn(async move {
|
|
||||||
match upload_image_file(file).await {
|
|
||||||
Ok(url) => {
|
|
||||||
cover_image.set(url);
|
|
||||||
}
|
|
||||||
Err(msg) => {
|
|
||||||
cover_error.set(Some(msg));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
cover_uploading.set(false);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 提交表单：校验标题与内容，读取 Tiptap 编辑器 Markdown，调用 create_post 或 update_post。
|
// 提交表单：校验标题与内容，读取 Tiptap 编辑器 Markdown，调用 create_post 或 update_post。
|
||||||
let on_submit = move |_| {
|
let on_submit = move |_| {
|
||||||
// 上传未完成/失败拦截：有占位符时阻止保存
|
// 上传未完成/失败拦截：有占位符时阻止保存
|
||||||
@ -269,12 +248,6 @@ fn write_editor(post_id: Option<i32>) -> Element {
|
|||||||
}
|
}
|
||||||
drop(in_flight);
|
drop(in_flight);
|
||||||
|
|
||||||
// 封面图上传中拦截：防止保存半成品。
|
|
||||||
if cover_uploading() {
|
|
||||||
error.set(Some("封面图正在上传，请等待完成后再保存".to_string()));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if title().trim().is_empty() {
|
if title().trim().is_empty() {
|
||||||
error.set(Some("标题不能为空".to_string()));
|
error.set(Some("标题不能为空".to_string()));
|
||||||
}
|
}
|
||||||
@ -414,11 +387,7 @@ fn write_editor(post_id: Option<i32>) -> Element {
|
|||||||
"保存"
|
"保存"
|
||||||
};
|
};
|
||||||
|
|
||||||
// 元信息表单复用的样式：label 与 input 各一份，避免三处重复粘贴。
|
// 元信息表单复用样式见模块级 META_LABEL_CLASS / META_INPUT_CLASS。
|
||||||
const META_LABEL_CLASS: &str =
|
|
||||||
"block text-[11px] font-medium text-[var(--color-paper-secondary)] tracking-wider mb-2";
|
|
||||||
const META_INPUT_CLASS: &str =
|
|
||||||
"w-full text-sm bg-transparent text-[var(--color-paper-primary)] placeholder-[var(--color-paper-tertiary)] focus:outline-none border-b border-[var(--color-paper-tertiary)] focus:border-[var(--color-paper-primary)] transition-colors pb-1.5";
|
|
||||||
|
|
||||||
rsx! {
|
rsx! {
|
||||||
div { class: "relative flex flex-col",
|
div { class: "relative flex flex-col",
|
||||||
@ -471,6 +440,150 @@ fn write_editor(post_id: Option<i32>) -> Element {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 封面图上传区（抽取为子组件 CoverUploader，见文件末尾）。
|
||||||
|
CoverUploader { cover_image }
|
||||||
|
}
|
||||||
|
|
||||||
|
// 编辑器区域 - 整页滚动下用视口高度，保证充裕的编辑空间。
|
||||||
|
// h-[60vh]：随窗口高度自适应；min-h-[400px]：窗口过矮时仍可用。
|
||||||
|
div { class: "h-[60vh] min-h-[400px] flex flex-col my-4",
|
||||||
|
div {
|
||||||
|
class: "flex-1 min-h-0 w-full border border-[var(--color-paper-border)] rounded-xl overflow-hidden bg-[var(--color-paper-entry)] shadow-[0_2px_8px_rgba(0,0,0,0.04)] dark:shadow-none",
|
||||||
|
id: "tiptap-editor",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 错误和成功提示
|
||||||
|
if let Some(err) = load_error() {
|
||||||
|
div { class: "flex-shrink-0 px-4 py-2 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-xl text-sm border border-red-100 dark:border-red-900/30 mb-2",
|
||||||
|
"{err}"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if let Some(err) = error() {
|
||||||
|
div { class: "flex-shrink-0 px-4 py-2 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-xl text-sm border border-red-100 dark:border-red-900/30 mb-2",
|
||||||
|
"{err}"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 上传失败提示：多条堆叠，×关闭同时删除编辑器内失败占位符（避免孤儿）
|
||||||
|
for err in upload_errors().clone() {
|
||||||
|
div {
|
||||||
|
key: "{err.id}",
|
||||||
|
class: "flex-shrink-0 flex items-center justify-between gap-3 px-4 py-2 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-xl text-sm border border-red-100 dark:border-red-900/30 mb-2",
|
||||||
|
span { "图片上传失败: {err.file_name} — {err.message}" }
|
||||||
|
button {
|
||||||
|
class: "shrink-0 text-red-400 hover:text-red-600 cursor-pointer text-lg leading-none",
|
||||||
|
aria_label: "关闭提示",
|
||||||
|
onclick: {
|
||||||
|
// 捕获 owned id，避免借用临时值
|
||||||
|
let id = err.id.clone();
|
||||||
|
let mut upload_errors = upload_errors;
|
||||||
|
move |_| {
|
||||||
|
// 关闭提示同时删除编辑器内失败占位符（避免孤儿）
|
||||||
|
#[cfg(target_arch = "wasm32")]
|
||||||
|
if let Some(handle) = &*editor.read() {
|
||||||
|
handle.instance().remove_upload_by_upload_id(&id);
|
||||||
|
}
|
||||||
|
upload_errors.write().retain(|e| e.id != id);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"×"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} // 内容区闭合
|
||||||
|
|
||||||
|
// 底部操作栏 - 跟随页面滚动
|
||||||
|
div { class: "flex items-center gap-2 pt-2 pb-4 border-t border-[var(--color-paper-border)]",
|
||||||
|
button {
|
||||||
|
class: "px-4 py-1.5 text-sm text-[var(--color-paper-secondary)] hover:text-[var(--color-paper-primary)] transition-colors cursor-pointer",
|
||||||
|
onclick: move |_| {
|
||||||
|
let _ = dioxus::router::navigator().push(Route::Posts {});
|
||||||
|
},
|
||||||
|
"取消"
|
||||||
|
}
|
||||||
|
div { class: "w-px h-5 bg-[var(--color-paper-border)]" }
|
||||||
|
div { class: "relative inline-flex items-center px-3 py-1.5 text-sm text-[var(--color-paper-secondary)] cursor-pointer",
|
||||||
|
select {
|
||||||
|
class: "absolute inset-0 w-full h-full opacity-0 cursor-pointer",
|
||||||
|
style: "appearance: none; -webkit-appearance: none;",
|
||||||
|
value: "{status}",
|
||||||
|
onchange: move |evt| status.set(evt.value()),
|
||||||
|
option { value: "draft", "草稿" }
|
||||||
|
option { value: "published", "发布" }
|
||||||
|
}
|
||||||
|
span { class: "pr-1.5 text-[var(--color-paper-primary)] font-medium",
|
||||||
|
if status() == "draft" {
|
||||||
|
"草稿"
|
||||||
|
} else {
|
||||||
|
"发布"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
class: "h-3.5 w-3.5 text-[var(--color-paper-tertiary)] pointer-events-none",
|
||||||
|
xmlns: "http://www.w3.org/2000/svg",
|
||||||
|
view_box: "0 0 20 20",
|
||||||
|
fill: "currentColor",
|
||||||
|
path {
|
||||||
|
fill_rule: "evenodd",
|
||||||
|
d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z",
|
||||||
|
clip_rule: "evenodd",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
div { class: "w-px h-5 bg-[var(--color-paper-border)]" }
|
||||||
|
button {
|
||||||
|
class: if saving() { "px-5 py-1.5 text-sm bg-[var(--color-paper-tertiary)] text-[var(--color-paper-secondary)] rounded-xl font-medium cursor-not-allowed" } else { "px-5 py-1.5 text-sm bg-[var(--color-paper-accent)] text-[var(--color-paper-theme)] rounded-xl font-medium hover:brightness-110 active:scale-[0.98] transition-all cursor-pointer" },
|
||||||
|
disabled: saving(),
|
||||||
|
onclick: on_submit,
|
||||||
|
"{save_button_text}"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// 封面上传子组件。
|
||||||
|
///
|
||||||
|
/// 封装封面图的全部状态与交互：拖拽/粘贴/选择文件上传、URL 输入、预览、移除。
|
||||||
|
/// 通过 `cover_image` signal 与父组件双向绑定——子组件写入最终 URL，
|
||||||
|
/// 父组件读取它用于保存。其余上传中间态（uploading/error/url/drag）对本组件私有。
|
||||||
|
///
|
||||||
|
/// 从 `write_editor` 抽取以降低 god component 复杂度（见 dioxus-render-purity skill）。
|
||||||
|
#[component]
|
||||||
|
#[cfg_attr(not(target_arch = "wasm32"), allow(unused_mut, unused_variables))]
|
||||||
|
fn CoverUploader(cover_image: Signal<String>) -> Element {
|
||||||
|
// 封面图上传状态：uploading 进度态、错误消息、URL 输入框展开、拖拽高亮。
|
||||||
|
let mut cover_uploading = use_signal(|| false);
|
||||||
|
let mut cover_error = use_signal(|| None::<String>);
|
||||||
|
let mut cover_url_mode = use_signal(|| false);
|
||||||
|
let mut cover_drag_active = use_signal(|| false);
|
||||||
|
// 封面 URL 输入框的临时值（确认前不直接写入 cover_image，避免半截 URL 触发预览加载）。
|
||||||
|
let mut cover_url_input = use_signal(|| "".to_string());
|
||||||
|
|
||||||
|
// 封面图上传：spawn 一个 async 调用 upload_image_file。
|
||||||
|
// 三条入口（file input / drop / paste）收敛成拿到 web_sys::File 后统一调用此闭包。
|
||||||
|
// 仅在 WASM 端有意义（upload_image_file 与 spawn 都依赖 WASM 运行时），
|
||||||
|
// server SSR 不渲染上传逻辑，故整体 cfg-gate 避免引用 wasm-only 符号。
|
||||||
|
#[cfg(target_arch = "wasm32")]
|
||||||
|
let mut spawn_cover_upload = move |file: web_sys::File| {
|
||||||
|
cover_uploading.set(true);
|
||||||
|
cover_error.set(None);
|
||||||
|
spawn(async move {
|
||||||
|
match upload_image_file(file).await {
|
||||||
|
Ok(url) => {
|
||||||
|
cover_image.set(url);
|
||||||
|
}
|
||||||
|
Err(msg) => {
|
||||||
|
cover_error.set(Some(msg));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
cover_uploading.set(false);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
rsx! {
|
||||||
// 封面图上传区：空态矮横条（不挤压编辑器），有图时展开成 21:9 超宽预览。
|
// 封面图上传区：空态矮横条（不挤压编辑器），有图时展开成 21:9 超宽预览。
|
||||||
// 21:9 与首页卡片封面统一比例，比 16:9 更扁，适合宽屏横幅式封面。
|
// 21:9 与首页卡片封面统一比例，比 16:9 更扁，适合宽屏横幅式封面。
|
||||||
// 容器统一绑定拖拽与粘贴事件；内部按 cover_image / cover_uploading 切换空态、上传中、预览。
|
// 容器统一绑定拖拽与粘贴事件；内部按 cover_image / cover_uploading 切换空态、上传中、预览。
|
||||||
@ -707,103 +820,4 @@ fn write_editor(post_id: Option<i32>) -> Element {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 编辑器区域 - 整页滚动下用视口高度，保证充裕的编辑空间。
|
|
||||||
// h-[60vh]：随窗口高度自适应；min-h-[400px]：窗口过矮时仍可用。
|
|
||||||
div { class: "h-[60vh] min-h-[400px] flex flex-col my-4",
|
|
||||||
div {
|
|
||||||
class: "flex-1 min-h-0 w-full border border-[var(--color-paper-border)] rounded-xl overflow-hidden bg-[var(--color-paper-entry)] shadow-[0_2px_8px_rgba(0,0,0,0.04)] dark:shadow-none",
|
|
||||||
id: "tiptap-editor",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 错误和成功提示
|
|
||||||
if let Some(err) = load_error() {
|
|
||||||
div { class: "flex-shrink-0 px-4 py-2 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-xl text-sm border border-red-100 dark:border-red-900/30 mb-2",
|
|
||||||
"{err}"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if let Some(err) = error() {
|
|
||||||
div { class: "flex-shrink-0 px-4 py-2 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-xl text-sm border border-red-100 dark:border-red-900/30 mb-2",
|
|
||||||
"{err}"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 上传失败提示：多条堆叠，×关闭同时删除编辑器内失败占位符（避免孤儿）
|
|
||||||
for err in upload_errors().clone() {
|
|
||||||
div {
|
|
||||||
key: "{err.id}",
|
|
||||||
class: "flex-shrink-0 flex items-center justify-between gap-3 px-4 py-2 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-xl text-sm border border-red-100 dark:border-red-900/30 mb-2",
|
|
||||||
span { "图片上传失败: {err.file_name} — {err.message}" }
|
|
||||||
button {
|
|
||||||
class: "shrink-0 text-red-400 hover:text-red-600 cursor-pointer text-lg leading-none",
|
|
||||||
aria_label: "关闭提示",
|
|
||||||
onclick: {
|
|
||||||
// 捕获 owned id，避免借用临时值
|
|
||||||
let id = err.id.clone();
|
|
||||||
let mut upload_errors = upload_errors;
|
|
||||||
move |_| {
|
|
||||||
// 关闭提示同时删除编辑器内失败占位符（避免孤儿）
|
|
||||||
#[cfg(target_arch = "wasm32")]
|
|
||||||
if let Some(handle) = &*editor.read() {
|
|
||||||
handle.instance().remove_upload_by_upload_id(&id);
|
|
||||||
}
|
|
||||||
upload_errors.write().retain(|e| e.id != id);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"×"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} // 内容区闭合
|
|
||||||
|
|
||||||
// 底部操作栏 - 跟随页面滚动
|
|
||||||
div { class: "flex items-center gap-2 pt-2 pb-4 border-t border-[var(--color-paper-border)]",
|
|
||||||
button {
|
|
||||||
class: "px-4 py-1.5 text-sm text-[var(--color-paper-secondary)] hover:text-[var(--color-paper-primary)] transition-colors cursor-pointer",
|
|
||||||
onclick: move |_| {
|
|
||||||
let _ = dioxus::router::navigator().push(Route::Posts {});
|
|
||||||
},
|
|
||||||
"取消"
|
|
||||||
}
|
|
||||||
div { class: "w-px h-5 bg-[var(--color-paper-border)]" }
|
|
||||||
div { class: "relative inline-flex items-center px-3 py-1.5 text-sm text-[var(--color-paper-secondary)] cursor-pointer",
|
|
||||||
select {
|
|
||||||
class: "absolute inset-0 w-full h-full opacity-0 cursor-pointer",
|
|
||||||
style: "appearance: none; -webkit-appearance: none;",
|
|
||||||
value: "{status}",
|
|
||||||
onchange: move |evt| status.set(evt.value()),
|
|
||||||
option { value: "draft", "草稿" }
|
|
||||||
option { value: "published", "发布" }
|
|
||||||
}
|
|
||||||
span { class: "pr-1.5 text-[var(--color-paper-primary)] font-medium",
|
|
||||||
if status() == "draft" {
|
|
||||||
"草稿"
|
|
||||||
} else {
|
|
||||||
"发布"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
svg {
|
|
||||||
class: "h-3.5 w-3.5 text-[var(--color-paper-tertiary)] pointer-events-none",
|
|
||||||
xmlns: "http://www.w3.org/2000/svg",
|
|
||||||
view_box: "0 0 20 20",
|
|
||||||
fill: "currentColor",
|
|
||||||
path {
|
|
||||||
fill_rule: "evenodd",
|
|
||||||
d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z",
|
|
||||||
clip_rule: "evenodd",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
div { class: "w-px h-5 bg-[var(--color-paper-border)]" }
|
|
||||||
button {
|
|
||||||
class: if saving() { "px-5 py-1.5 text-sm bg-[var(--color-paper-tertiary)] text-[var(--color-paper-secondary)] rounded-xl font-medium cursor-not-allowed" } else { "px-5 py-1.5 text-sm bg-[var(--color-paper-accent)] text-[var(--color-paper-theme)] rounded-xl font-medium hover:brightness-110 active:scale-[0.98] transition-all cursor-pointer" },
|
|
||||||
disabled: saving(),
|
|
||||||
onclick: on_submit,
|
|
||||||
"{save_button_text}"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user