xfy/yggdrasil
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor(write): 摘要字段移至右侧栏

Browse Source 
摘要从左栏(标题下方)移到右栏侧边栏,作为独立分节位于标签与封面图之间,
与链接/标签/封面统一为带边框输入框的分节式布局。骨架屏同步更新。
This commit is contained in:
xfy 2026-07-09 14:45:15 +08:00
parent 19b47b11a4
commit 6a3ac038da
2 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/write_skeleton.rs
View File

@ -1,15 +1,15 @@
//! 文章编辑器页骨架屏
//!
//! 在写文章/编辑文章页面加载时展示，镜像 Write 页面的左右两栏结构：
//! 左栏(标题+摘要+编辑器) + 右栏(链接/标签/封面) + 底部操作栏。
//! 左栏(标题+编辑器) + 右栏(链接/标签/摘要/封面) + 底部操作栏。
use crate::components::skeletons::atoms::*;
use dioxus::prelude::*;
/// 文章编辑器页骨架屏组件。
///
/// 镜像 Write 页面的左右两栏布局：左栏主写作区(标题、摘要、编辑器)，
/// 右栏侧边栏(链接、标签、封面图)，底部贴底操作栏。
/// 镜像 Write 页面的左右两栏布局：左栏主写作区(标题、编辑器)，
/// 右栏侧边栏(链接、标签、摘要、封面图)，底部贴底操作栏。
#[component]
pub fn WriteSkeleton() -> Element {
rsx! {
@ -22,8 +22,6 @@ pub fn WriteSkeleton() -> Element {
div { class: "flex-1 min-w-0 min-h-0 overflow-y-auto px-6 py-8 flex flex-col",
// 标题输入
SkeletonBox { class: "h-10 w-3/4 rounded-lg" }
// 摘要
SkeletonBox { class: "h-5 w-full rounded mt-6" }
// 编辑器区域:flex-1 撑满左栏剩余高度
div { class: "flex-1 min-h-[400px] flex flex-col my-4",
@ -60,6 +58,11 @@ pub fn WriteSkeleton() -> Element {
SkeletonBox { class: "h-3 w-10 rounded mb-3" }
SkeletonBox { class: "h-8 w-full rounded-xl" }
}
// 摘要节
div { class: "p-6 border-b border-[var(--color-paper-border)]",
SkeletonBox { class: "h-3 w-10 rounded mb-3" }
SkeletonBox { class: "h-16 w-full rounded-xl" }
}
// 封面图节
div { class: "p-6",
SkeletonBox { class: "h-3 w-12 rounded mb-3" }

20
src/pages/admin/write.rs
View File

@ -430,15 +430,6 @@ fn write_editor(post_id: Option<i32>) -> Element {
oninput: move |evt| title.set(evt.value()),
}
// 摘要
textarea {
class: "w-full text-base font-normal bg-transparent text-[var(--color-paper-secondary)] placeholder-[var(--color-paper-tertiary)] focus:outline-none resize-none leading-relaxed mb-4 border-b-2 border-transparent focus:border-[var(--color-paper-border)] pb-2 transition-all mt-6",
placeholder: "摘要（选填）...",
rows: "2",
value: "{summary}",
oninput: move |evt| summary.set(evt.value()),
}
// 错误和成功提示
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",
@ -518,6 +509,17 @@ fn write_editor(post_id: Option<i32>) -> Element {
oninput: move |evt| tags.set(evt.value()),
}
}
// 摘要节
div { class: "p-6 border-b border-[var(--color-paper-border)]",
label { class: "block text-xs font-semibold uppercase tracking-wide text-[var(--color-paper-tertiary)] mb-3", "摘要" }
textarea {
class: "w-full text-sm bg-[var(--color-paper-entry)] text-[var(--color-paper-primary)] placeholder-[var(--color-paper-tertiary)] focus:outline-none border border-[var(--color-paper-border)] focus:border-[var(--color-paper-primary)] rounded-xl px-3 py-2 transition-all resize-none leading-relaxed",
placeholder: "选填...",
rows: "3",
value: "{summary}",
oninput: move |evt| summary.set(evt.value()),
}
}
// 封面图节
div { class: "p-6",
label { class: "block text-xs font-semibold uppercase tracking-wide text-[var(--color-paper-tertiary)] mb-3", "封面图" }