632 lines
27 KiB
Rust
632 lines
27 KiB
Rust
//! 文章编辑器页面。
|
||
//!
|
||
//! 提供新建文章与编辑文章两种模式，使用基于 Tiptap 的富文本编辑器。
|
||
//! 编辑器通过 `js_sys::eval` 在 WASM 前端初始化，并与 `window.TiptapEditor` 实例交互，
|
||
//! 实现 Markdown 内容回填、图片上传与组件卸载时的清理。
|
||
|
||
use dioxus::prelude::*;
|
||
|
||
// 仅在 WASM 前端使用的类型转换与文章 API。
|
||
#[cfg(target_arch = "wasm32")]
|
||
use wasm_bindgen::JsCast;
|
||
|
||
#[cfg(target_arch = "wasm32")]
|
||
use crate::api::posts::{
|
||
create_post, get_post_by_id, update_post, CreatePostResponse, SinglePostResponse,
|
||
};
|
||
use crate::components::write_skeleton::WriteSkeleton;
|
||
use crate::models::post::Post;
|
||
use crate::router::Route;
|
||
|
||
/// 当前编辑器内进行中的上传计数（来自轮询 window.__tiptap_uploads.counts）。
|
||
#[derive(Clone, Copy, Default)]
|
||
struct UploadsInFlight {
|
||
uploading: u32,
|
||
error: u32,
|
||
}
|
||
|
||
/// 顶部堆叠的上传失败提示条目。
|
||
#[derive(Clone, PartialEq)]
|
||
struct UploadErrorEntry {
|
||
id: String,
|
||
file_name: String,
|
||
message: String,
|
||
}
|
||
|
||
/// window.__tiptap_uploads 快照（轮询消费用）。
|
||
#[cfg(target_arch = "wasm32")]
|
||
#[derive(serde::Deserialize)]
|
||
struct UploadSnapshot {
|
||
events: Vec<UploadSnapshotEvent>,
|
||
counts: UploadSnapshotCounts,
|
||
}
|
||
|
||
#[cfg(target_arch = "wasm32")]
|
||
#[derive(serde::Deserialize)]
|
||
struct UploadSnapshotEvent {
|
||
kind: String,
|
||
#[serde(rename = "uploadId")]
|
||
upload_id: String,
|
||
#[serde(rename = "fileName")]
|
||
file_name: String,
|
||
#[serde(rename = "errorMsg")]
|
||
error_msg: Option<String>,
|
||
}
|
||
|
||
#[cfg(target_arch = "wasm32")]
|
||
#[derive(serde::Deserialize, Default, Clone, Copy)]
|
||
struct UploadSnapshotCounts {
|
||
uploading: u32,
|
||
error: u32,
|
||
}
|
||
|
||
/// 新建文章页面组件。
|
||
///
|
||
/// 内部委托给 `write_editor`，以 `None` 表示新建模式。
|
||
#[component]
|
||
#[allow(unused_mut, unused_variables)]
|
||
pub fn Write() -> Element {
|
||
write_editor(None)
|
||
}
|
||
|
||
/// 编辑文章页面组件。
|
||
///
|
||
/// `id` 为要编辑的文章 ID，内部委托给 `write_editor` 加载现有数据。
|
||
#[component]
|
||
#[allow(unused_mut, unused_variables)]
|
||
pub fn WriteEdit(id: i32) -> Element {
|
||
write_editor(Some(id))
|
||
}
|
||
|
||
/// 文章编辑器核心组件，支持新建（`post_id == None`）与编辑模式。
|
||
///
|
||
/// 负责：
|
||
/// - 编辑模式下通过 server function 拉取文章数据；
|
||
/// - 在 WASM 前端初始化 Tiptap 富文本编辑器并轮询就绪状态；
|
||
/// - 编辑模式下将 Markdown 内容回填到编辑器；
|
||
/// - 提交时读取编辑器 Markdown、校验并调用 create_post / update_post；
|
||
/// - 组件卸载时销毁 Tiptap 实例并清理全局状态。
|
||
#[allow(unused_mut, unused_variables)]
|
||
fn write_editor(post_id: Option<i32>) -> Element {
|
||
let is_edit = post_id.is_some();
|
||
|
||
// 文章元信息表单字段。
|
||
let mut title = use_signal(|| "".to_string());
|
||
let mut summary = use_signal(|| "".to_string());
|
||
let mut slug = use_signal(|| "".to_string());
|
||
let mut tags = use_signal(|| "".to_string());
|
||
let mut cover_image = use_signal(|| "".to_string());
|
||
let mut status = use_signal(|| "draft".to_string());
|
||
let mut content = use_signal(|| "".to_string());
|
||
// 页面与编辑器加载、保存、错误、成功等状态。
|
||
let mut loading = use_signal(|| true);
|
||
let mut saving = use_signal(|| false);
|
||
let mut error = use_signal(|| None::<String>);
|
||
let mut success = use_signal(|| false);
|
||
let mut editor_content_set = use_signal(|| false);
|
||
let mut has_backfilled = use_signal(|| false);
|
||
let mut load_error = use_signal(|| None::<String>);
|
||
|
||
// 编辑模式：用于暂存从服务端加载的文章数据。
|
||
let mut edit_post = use_signal(|| None::<Post>);
|
||
|
||
// 上传状态：当前进行中计数（保存拦截）+ 顶部失败提示堆叠（用户手动关闭）
|
||
let mut uploads_in_flight = use_signal(UploadsInFlight::default);
|
||
let mut upload_errors: Signal<Vec<UploadErrorEntry>> = use_signal(Vec::new);
|
||
|
||
// 编辑模式：文章数据加载完成后，将字段回填到表单信号。
|
||
use_effect(move || {
|
||
if !is_edit || has_backfilled() {
|
||
return;
|
||
}
|
||
if let Some(ref post) = edit_post() {
|
||
has_backfilled.set(true);
|
||
title.set(post.title.clone());
|
||
summary.set(post.summary.clone().unwrap_or_default());
|
||
slug.set(post.slug.clone());
|
||
tags.set(post.tags.join(", "));
|
||
cover_image.set(post.cover_image.clone().unwrap_or_default());
|
||
status.set(post.status.as_str().to_string());
|
||
content.set(post.content_md.clone());
|
||
}
|
||
});
|
||
|
||
// 编辑模式：仅在 WASM 前端通过 server function 加载文章详情。
|
||
use_effect(move || {
|
||
if is_edit {
|
||
#[cfg(target_arch = "wasm32")]
|
||
if let Some(id) = post_id {
|
||
spawn(async move {
|
||
match get_post_by_id(id).await {
|
||
Ok(SinglePostResponse { post: Some(post) }) => {
|
||
edit_post.set(Some(post));
|
||
}
|
||
Ok(SinglePostResponse { post: None }) => {
|
||
load_error.set(Some("文章不存在".to_string()));
|
||
}
|
||
Err(e) => {
|
||
load_error.set(Some(format!("加载失败: {}", e)));
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
|
||
// 组件卸载时清理 Tiptap 实例：销毁编辑器、删除实例映射、重置全局就绪标志与内容缓存。
|
||
#[cfg(target_arch = "wasm32")]
|
||
use_drop(move || {
|
||
let _ = js_sys::eval(
|
||
r#"
|
||
(function() {
|
||
var editor = window.TiptapEditor && window.TiptapEditor._instances && window.TiptapEditor._instances.get('tiptap-editor');
|
||
if (editor && typeof editor.destroy === 'function') {
|
||
editor.destroy();
|
||
}
|
||
if (window.TiptapEditor && window.TiptapEditor._instances) {
|
||
window.TiptapEditor._instances.delete('tiptap-editor');
|
||
}
|
||
window.__tiptap_ready = false;
|
||
window.__tiptap_content = '';
|
||
})();
|
||
"#,
|
||
);
|
||
});
|
||
|
||
// Tiptap 编辑器初始化：在 WASM 前端通过 js_sys::eval 调用 public/tiptap/ 构建产物暴露的 window.TiptapEditor。
|
||
// 编辑模式需等待文章数据加载完成，避免空内容覆盖后续回填。
|
||
use_effect(move || {
|
||
#[cfg(target_arch = "wasm32")]
|
||
{
|
||
// 编辑模式：等数据加载完再初始化。
|
||
if is_edit && edit_post().is_none() {
|
||
return;
|
||
}
|
||
|
||
// 执行 JS 初始化脚本：查找 DOM 容器，调用 TiptapEditor.create，并注册 onUpdate / onImageUpload 回调。
|
||
let _ = js_sys::eval(
|
||
r#"
|
||
(function initEditor() {
|
||
if (window.__tiptap_ready) return;
|
||
|
||
var container = document.getElementById('tiptap-editor');
|
||
if (!container) {
|
||
setTimeout(initEditor, 50);
|
||
return;
|
||
}
|
||
if (typeof window.TiptapEditor !== 'undefined' && window.TiptapEditor) {
|
||
try {
|
||
window.TiptapEditor.create('tiptap-editor', {
|
||
content: '',
|
||
placeholder: '在此输入内容...',
|
||
onUpdate: function(markdown) {
|
||
window.__tiptap_content = markdown;
|
||
},
|
||
onImageUpload: function(file) {
|
||
return new Promise(function(resolve, reject) {
|
||
var formData = new FormData();
|
||
formData.append('image', file);
|
||
|
||
fetch('/api/upload', {
|
||
method: 'POST',
|
||
body: formData,
|
||
credentials: 'same-origin'
|
||
})
|
||
.then(function(response) {
|
||
if (!response.ok) {
|
||
throw new Error('Upload failed: ' + response.status);
|
||
}
|
||
return response.json();
|
||
})
|
||
.then(function(data) {
|
||
if (data.success && data.url) {
|
||
resolve(data.url);
|
||
} else {
|
||
reject(new Error(data.error || 'Upload failed'));
|
||
}
|
||
})
|
||
.catch(function(err) {
|
||
reject(err);
|
||
});
|
||
});
|
||
}
|
||
});
|
||
window.__tiptap_ready = true;
|
||
} catch(e) {
|
||
console.error('[tiptap] create error: ' + e.message);
|
||
}
|
||
return;
|
||
}
|
||
setTimeout(initEditor, 50);
|
||
})();
|
||
"#,
|
||
);
|
||
}
|
||
});
|
||
|
||
// 轮询 Tiptap 编辑器就绪状态：最多等待约 10 秒，就绪后编辑模式回填 Markdown，最后结束加载。
|
||
use_effect(move || {
|
||
#[cfg(target_arch = "wasm32")]
|
||
{
|
||
// 编辑模式：等数据加载完再开始轮询。
|
||
if is_edit && edit_post().is_none() {
|
||
return;
|
||
}
|
||
|
||
wasm_bindgen_futures::spawn_local(async move {
|
||
for i in 0..100 {
|
||
if let Ok(promise_val) = js_sys::eval("new Promise(r => setTimeout(r, 100))") {
|
||
if let Ok(promise) = promise_val.dyn_into::<js_sys::Promise>() {
|
||
let _ = wasm_bindgen_futures::JsFuture::from(promise).await;
|
||
}
|
||
}
|
||
if let Ok(ready) = js_sys::eval("window.__tiptap_ready") {
|
||
if ready.as_bool().unwrap_or(false) {
|
||
// 编辑模式：通过 window.TiptapEditor 实例的 setMarkdown 回填已有内容。
|
||
if is_edit && !editor_content_set() {
|
||
let md = content();
|
||
if !md.is_empty() {
|
||
let md_json = serde_json::to_string(&md).unwrap_or_default();
|
||
let script = format!(
|
||
"(function() {{ var editor = window.TiptapEditor && window.TiptapEditor._instances && window.TiptapEditor._instances.get('tiptap-editor'); if (editor) {{ editor.setMarkdown({}); }} }})()",
|
||
md_json
|
||
);
|
||
let _ = js_sys::eval(&script);
|
||
}
|
||
editor_content_set.set(true);
|
||
}
|
||
loading.set(false);
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
loading.set(false);
|
||
});
|
||
}
|
||
#[cfg(not(target_arch = "wasm32"))]
|
||
{
|
||
loading.set(false);
|
||
}
|
||
});
|
||
|
||
// 轮询 window.__tiptap_uploads，消费上传事件并更新 signal（仅 WASM）
|
||
#[cfg(target_arch = "wasm32")]
|
||
{
|
||
use std::collections::HashSet;
|
||
let mut seen_error_ids: HashSet<String> = HashSet::new();
|
||
use_future(move || {
|
||
let mut uploads_in_flight = uploads_in_flight;
|
||
let mut upload_errors = upload_errors;
|
||
async move {
|
||
loop {
|
||
// 500ms 间隔
|
||
if let Ok(promise_val) = js_sys::eval("new Promise(r => setTimeout(r, 500))") {
|
||
if let Ok(promise) = promise_val.dyn_into::<js_sys::Promise>() {
|
||
let _ = wasm_bindgen_futures::JsFuture::from(promise).await;
|
||
}
|
||
}
|
||
|
||
// 读取并清空 events，读取 counts
|
||
let snapshot = js_sys::eval(
|
||
r#"
|
||
(function() {
|
||
var u = window.__tiptap_uploads;
|
||
if (!u) return null;
|
||
var events = u.events || [];
|
||
u.events = [];
|
||
return JSON.stringify({ events: events, counts: u.counts || {uploading:0,error:0} });
|
||
})()
|
||
"#,
|
||
)
|
||
.ok()
|
||
.and_then(|v| v.as_string());
|
||
|
||
if let Some(json) = snapshot {
|
||
if let Ok(parsed) = serde_json::from_str::<UploadSnapshot>(&json) {
|
||
for ev in parsed.events {
|
||
match ev.kind.as_str() {
|
||
"error" => {
|
||
if !seen_error_ids.contains(&ev.upload_id) {
|
||
seen_error_ids.insert(ev.upload_id.clone());
|
||
upload_errors.write().push(UploadErrorEntry {
|
||
id: ev.upload_id,
|
||
file_name: ev.file_name,
|
||
message: ev.error_msg
|
||
.unwrap_or_else(|| "上传失败".to_string()),
|
||
});
|
||
}
|
||
}
|
||
"success" | "removed" => {
|
||
seen_error_ids.remove(&ev.upload_id);
|
||
upload_errors.write().retain(|e| e.id != ev.upload_id);
|
||
}
|
||
_ => {}
|
||
}
|
||
}
|
||
uploads_in_flight.set(UploadsInFlight {
|
||
uploading: parsed.counts.uploading,
|
||
error: parsed.counts.error,
|
||
});
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 提交表单：校验标题与内容，读取 Tiptap 编辑器 Markdown，调用 create_post 或 update_post。
|
||
let on_submit = move |_| {
|
||
if title().trim().is_empty() {
|
||
error.set(Some("标题不能为空".to_string()));
|
||
#[allow(clippy::needless_return)]
|
||
return;
|
||
}
|
||
|
||
// 仅在 WASM 前端读取编辑器内容并发起保存请求。
|
||
#[cfg(target_arch = "wasm32")]
|
||
{
|
||
// 优先通过 window.TiptapEditor 实例读取 Markdown，否则退回到全局缓存。
|
||
let md = js_sys::eval(r#"
|
||
(function() {
|
||
var editor = window.TiptapEditor && window.TiptapEditor._instances && window.TiptapEditor._instances.get('tiptap-editor');
|
||
return editor ? editor.getMarkdown() : (window.__tiptap_content || '');
|
||
})()
|
||
"#).ok().and_then(|v| v.as_string()).unwrap_or_default();
|
||
|
||
if md.trim().is_empty() {
|
||
error.set(Some("内容不能为空".to_string()));
|
||
return;
|
||
}
|
||
|
||
// 将逗号分隔的标签字符串转换为列表。
|
||
let tags_list: Vec<String> = tags()
|
||
.split(',')
|
||
.map(|t| t.trim().to_string())
|
||
.filter(|t| !t.is_empty())
|
||
.collect();
|
||
|
||
let slug_opt = if slug().trim().is_empty() {
|
||
None
|
||
} else {
|
||
Some(slug().trim().to_string())
|
||
};
|
||
|
||
let summary_opt = if summary().trim().is_empty() {
|
||
None
|
||
} else {
|
||
Some(summary().trim().to_string())
|
||
};
|
||
|
||
let cover_image_opt = if cover_image().trim().is_empty() {
|
||
None
|
||
} else {
|
||
Some(cover_image().trim().to_string())
|
||
};
|
||
|
||
saving.set(true);
|
||
error.set(None);
|
||
|
||
if let Some(id) = post_id {
|
||
// 编辑模式：调用 update_post
|
||
spawn(async move {
|
||
match update_post(
|
||
id,
|
||
title().trim().to_string(),
|
||
slug_opt,
|
||
summary_opt,
|
||
md,
|
||
status(),
|
||
tags_list,
|
||
cover_image_opt,
|
||
)
|
||
.await
|
||
{
|
||
Ok(CreatePostResponse { success: true, .. }) => {
|
||
saving.set(false);
|
||
success.set(true);
|
||
let _ = dioxus::router::navigator().push(Route::Posts {});
|
||
}
|
||
Ok(CreatePostResponse {
|
||
success: false,
|
||
message,
|
||
..
|
||
}) => {
|
||
saving.set(false);
|
||
error.set(Some(message));
|
||
}
|
||
Err(e) => {
|
||
saving.set(false);
|
||
error.set(Some(format!("更新失败: {}", e)));
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
// 新建模式：调用 create_post
|
||
spawn(async move {
|
||
match create_post(
|
||
title().trim().to_string(),
|
||
slug_opt,
|
||
summary_opt,
|
||
md,
|
||
status(),
|
||
tags_list,
|
||
cover_image_opt,
|
||
)
|
||
.await
|
||
{
|
||
Ok(CreatePostResponse { success: true, .. }) => {
|
||
saving.set(false);
|
||
success.set(true);
|
||
let _ = dioxus::router::navigator().push(Route::Admin {});
|
||
}
|
||
Ok(CreatePostResponse {
|
||
success: false,
|
||
message,
|
||
..
|
||
}) => {
|
||
saving.set(false);
|
||
error.set(Some(message));
|
||
}
|
||
Err(e) => {
|
||
saving.set(false);
|
||
error.set(Some(format!("保存失败: {}", e)));
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
};
|
||
|
||
let save_button_text = if saving() {
|
||
"保存中..."
|
||
} else if is_edit {
|
||
"更新"
|
||
} else {
|
||
"保存"
|
||
};
|
||
|
||
rsx! {
|
||
div { class: "relative flex flex-col flex-1 min-h-0 overflow-hidden",
|
||
if loading() {
|
||
div { class: "absolute inset-0 z-10 bg-white dark:bg-[#1d1e20]",
|
||
WriteSkeleton {}
|
||
}
|
||
}
|
||
|
||
// 顶部元信息区域 - 固定高度，不滚动
|
||
div { class: "flex-shrink-0 space-y-5 pt-8",
|
||
// 标题区域 - 大字号无框输入
|
||
div {
|
||
input {
|
||
class: "w-full text-3xl md:text-4xl font-bold bg-transparent text-[var(--color-paper-primary)] placeholder-[var(--color-paper-tertiary)] focus:outline-none tracking-tight leading-tight",
|
||
placeholder: "文章标题",
|
||
value: "{title}",
|
||
oninput: move |evt| title.set(evt.value()),
|
||
}
|
||
}
|
||
|
||
// 摘要
|
||
textarea {
|
||
class: "w-full text-base bg-transparent text-[var(--color-paper-secondary)] placeholder-[var(--color-paper-tertiary)] focus:outline-none resize-none leading-relaxed",
|
||
placeholder: "摘要（留空则自动生成）",
|
||
rows: "2",
|
||
value: "{summary}",
|
||
oninput: move |evt| summary.set(evt.value()),
|
||
}
|
||
|
||
// 元数据行 - 紧凑精致
|
||
div { class: "flex flex-wrap items-end gap-x-8 gap-y-4 text-sm",
|
||
div { class: "flex-1 min-w-[140px]",
|
||
label { class: "block text-[11px] font-medium text-[var(--color-paper-secondary)] tracking-wider mb-2",
|
||
"Slug"
|
||
}
|
||
input {
|
||
class: "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",
|
||
placeholder: "自动生成",
|
||
value: "{slug}",
|
||
oninput: move |evt| slug.set(evt.value()),
|
||
}
|
||
}
|
||
div { class: "flex-1 min-w-[140px]",
|
||
label { class: "block text-[11px] font-medium text-[var(--color-paper-secondary)] tracking-wider mb-2",
|
||
"标签"
|
||
}
|
||
input {
|
||
class: "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",
|
||
placeholder: "逗号分隔",
|
||
value: "{tags}",
|
||
oninput: move |evt| tags.set(evt.value()),
|
||
}
|
||
}
|
||
div { class: "flex-1 min-w-[140px]",
|
||
label { class: "block text-[11px] font-medium text-[var(--color-paper-secondary)] tracking-wider mb-2",
|
||
"封面图"
|
||
}
|
||
input {
|
||
class: "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",
|
||
placeholder: "URL（可选）",
|
||
value: "{cover_image}",
|
||
oninput: move |evt| cover_image.set(evt.value()),
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 编辑器区域 - 沾满剩余高度
|
||
div { class: "flex-1 min-h-0 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}"
|
||
}
|
||
}
|
||
|
||
if success() {
|
||
div { class: "flex-shrink-0 px-4 py-2 bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 rounded-xl text-sm border border-green-100 dark:border-green-900/30 mb-2",
|
||
"保存成功"
|
||
}
|
||
}
|
||
|
||
// 底部操作栏 - 在编辑器下方，左对齐
|
||
div { class: "flex-shrink-0 flex items-center gap-2 pt-2 pb-4",
|
||
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-primary)] text-[var(--color-paper-theme)] rounded-xl font-medium hover:opacity-90 transition-opacity cursor-pointer"
|
||
},
|
||
disabled: saving(),
|
||
onclick: on_submit,
|
||
"{save_button_text}"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|