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

style(admin/write): overhaul write page to modern minimalist layout

Browse Source
This commit is contained in:
xfy 2026-07-03 16:44:39 +08:00
parent d3a50728ed
commit acfddb3e17
1 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,7 +38,7 @@ use dioxus::web::{WebEventExt, WebFileExt};
const META_LABEL_CLASS: &str = const META_LABEL_CLASS: &str =
"block text-sm font-medium text-[var(--color-paper-secondary)] mb-2"; "block text-sm font-medium text-[var(--color-paper-secondary)] mb-2";
const META_INPUT_CLASS: &str = const META_INPUT_CLASS: &str =
"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-4 py-2.5 shadow-sm transition-all"; "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-2xl px-4 py-3 shadow-sm transition-all";
/// 新建文章页面组件。 /// 新建文章页面组件。
/// ///
@ -424,16 +424,16 @@ fn write_editor(post_id: Option<i32>) -> Element {
div { class: "flex flex-col gap-6", div { class: "flex flex-col gap-6",
// 标题输入 // 标题输入
input { 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", class: "w-full text-4xl md:text-5xl font-extrabold bg-transparent text-[var(--color-paper-primary)] placeholder-[var(--color-paper-tertiary)] focus:outline-none tracking-tight leading-tight",
placeholder: "ENTER_TITLE_HERE...", placeholder: "输入文章标题...",
value: "{title}", value: "{title}",
oninput: move |evt| title.set(evt.value()), oninput: move |evt| title.set(evt.value()),
} }
// 摘要 // 摘要
textarea { textarea {
class: "w-full text-sm font-mono bg-transparent text-[var(--color-paper-secondary)] placeholder-[var(--color-paper-tertiary)] focus:outline-none resize-none leading-relaxed mb-2 border-b border-[var(--color-paper-border)] pb-4 focus:border-[var(--color-paper-primary)] transition-colors", 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",
placeholder: "SUMMARY (OPTIONAL)...", placeholder: "摘要（选填）...",
rows: "2", rows: "2",
value: "{summary}", value: "{summary}",
oninput: move |evt| summary.set(evt.value()), oninput: move |evt| summary.set(evt.value()),
@ -441,30 +441,30 @@ fn write_editor(post_id: Option<i32>) -> Element {
} }
// 元信息放在控制面板网格 // 元信息放在控制面板网格
div { class: "grid grid-cols-1 md:grid-cols-2 gap-6", div { class: "grid grid-cols-1 md:grid-cols-2 gap-6 mt-4",
div { class: "flex flex-col gap-6 p-6 border border-[var(--color-paper-border)] bg-[var(--color-paper-entry)]", div { class: "flex flex-col gap-6 p-8 rounded-3xl border border-transparent bg-[var(--color-paper-entry)] hover:border-[var(--color-paper-border)] transition-colors shadow-sm",
div { div {
label { class: "{META_LABEL_CLASS}", "SLUG_IDENTIFIER" } label { class: "{META_LABEL_CLASS}", "自定义链接 (Slug)" }
input { input {
class: "{META_INPUT_CLASS}", class: "{META_INPUT_CLASS}",
placeholder: "AUTO_GENERATED", placeholder: "自动生成",
value: "{slug}", value: "{slug}",
oninput: move |evt| slug.set(evt.value()), oninput: move |evt| slug.set(evt.value()),
} }
} }
div { div {
label { class: "{META_LABEL_CLASS}", "TAG_SYSTEM" } label { class: "{META_LABEL_CLASS}", "标签系统" }
input { input {
class: "{META_INPUT_CLASS}", class: "{META_INPUT_CLASS}",
placeholder: "COMMA_SEPARATED...", placeholder: "输入标签，以逗号分隔...",
value: "{tags}", value: "{tags}",
oninput: move |evt| tags.set(evt.value()), oninput: move |evt| tags.set(evt.value()),
} }
} }
} }
// 封面图放右边 // 封面图放右边
div { class: "flex flex-col p-6 border border-[var(--color-paper-border)] bg-[var(--color-paper-entry)]", div { class: "flex flex-col p-8 rounded-3xl border border-transparent bg-[var(--color-paper-entry)] hover:border-[var(--color-paper-border)] transition-colors shadow-sm",
label { class: "{META_LABEL_CLASS}", "COVER_ASSET" } label { class: "{META_LABEL_CLASS}", "封面图" }
CoverUploader { cover_image, cover_uploading } CoverUploader { cover_image, cover_uploading }
} }
} }
@ -474,7 +474,7 @@ fn write_editor(post_id: Option<i32>) -> Element {
// h-[60vh]：随窗口高度自适应；min-h-[400px]：窗口过矮时仍可用。 // h-[60vh]：随窗口高度自适应；min-h-[400px]：窗口过矮时仍可用。
div { class: "h-[60vh] min-h-[400px] flex flex-col my-4", div { class: "h-[60vh] min-h-[400px] flex flex-col my-4",
div { div {
class: "relative group 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", class: "relative group flex-1 min-h-0 w-full border border-[var(--color-paper-border)] rounded-3xl overflow-hidden bg-[var(--color-paper-entry)] shadow-sm",
id: "tiptap-editor", id: "tiptap-editor",
img { img {
src: "/images/xiantiaoxiaogou_input_bg.webp", src: "/images/xiantiaoxiaogou_input_bg.webp",
@ -541,14 +541,14 @@ fn write_editor(post_id: Option<i32>) -> Element {
style: "appearance: none; -webkit-appearance: none;", style: "appearance: none; -webkit-appearance: none;",
value: "{status}", value: "{status}",
onchange: move |evt| status.set(evt.value()), onchange: move |evt| status.set(evt.value()),
option { value: "draft", "DRAFT" } option { value: "draft", "存为草稿" }
option { value: "published", "PUBLISHED" } option { value: "published", "直接发布" }
} }
span { class: "pr-2 text-[var(--color-paper-primary)]", span { class: "pr-2 text-[var(--color-paper-primary)]",
if status() == "draft" { if status() == "draft" {
"DRAFT" "存为草稿"
} else { } else {
"PUBLISHED" "直接发布"
} }
} }
svg { svg {
@ -621,7 +621,7 @@ fn CoverUploader(cover_image: Signal<String>, cover_uploading: Signal<bool>) ->
// 21:9 与首页卡片封面统一比例，比 16:9 更扁，适合宽屏横幅式封面。 // 21:9 与首页卡片封面统一比例，比 16:9 更扁，适合宽屏横幅式封面。
// 容器统一绑定拖拽与粘贴事件；内部按 cover_image / cover_uploading 切换空态、上传中、预览。 // 容器统一绑定拖拽与粘贴事件；内部按 cover_image / cover_uploading 切换空态、上传中、预览。
div { div {
class: "relative w-full border border-dashed overflow-hidden transition-all duration-200 group/cover", class: "relative w-full border border-dashed rounded-2xl overflow-hidden transition-all duration-200 group/cover",
// 空态矮横条；有图/上传中展开成 21:9。 // 空态矮横条；有图/上传中展开成 21:9。
class: if cover_image().is_empty() && !cover_uploading() { "h-14" } else { "aspect-[21/9]" }, class: if cover_image().is_empty() && !cover_uploading() { "h-14" } else { "aspect-[21/9]" },
class: if cover_drag_active() { "border-[var(--color-paper-primary)] bg-[var(--color-paper-entry)]" } else if cover_image().is_empty() { "border-[var(--color-paper-border)] bg-[var(--color-paper-entry)] hover:border-[var(--color-paper-primary)]" } else { "border-[var(--color-paper-border)] bg-[var(--color-paper-entry)]" }, class: if cover_drag_active() { "border-[var(--color-paper-primary)] bg-[var(--color-paper-entry)]" } else if cover_image().is_empty() { "border-[var(--color-paper-border)] bg-[var(--color-paper-entry)] hover:border-[var(--color-paper-primary)]" } else { "border-[var(--color-paper-border)] bg-[var(--color-paper-entry)]" },