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

feat: add shared components, new pages, and pagination

Browse Source
This commit is contained in:
xfy 2026-06-02 17:25:49 +08:00
parent 36231a8ec2
commit 1950646bef
17 changed files with 897 additions and 573 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

177
.agents/skills/frontend-design/LICENSE.txt Normal file
View File

@ -0,0 +1,177 @@
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS

42
.agents/skills/frontend-design/SKILL.md Normal file
View File

@ -0,0 +1,42 @@
---
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
license: Complete terms in LICENSE.txt
---
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
## Design Thinking
Before coding, understand the context and commit to a BOLD aesthetic direction:
- **Purpose**: What problem does this interface solve? Who uses it?
- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
- **Constraints**: Technical requirements (framework, performance, accessibility).
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
- Production-grade and functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail
## Frontend Aesthetics Guidelines
Focus on:
- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

11
skills-lock.json Normal file
View File

@ -0,0 +1,11 @@
{
"version": 1,
"skills": {
"frontend-design": {
"source": "anthropics/skills",
"sourceType": "github",
"skillPath": "skills/frontend-design/SKILL.md",
"computedHash": "063a0e6448123cd359ad0044cc46b0e490cc7964d45ef4bb9fd842bd2ffbca67"
}
}
}

264
src/api/posts.rs
View File

@ -3,7 +3,7 @@
use dioxus::prelude::*;
use crate::db::pool::DB_POOL;
use crate::models::post::{Post, PostStatus, PostStats, Tag};
use crate::models::post::{Post, PostStats, PostStatus, Tag};
use crate::models::user::{User, UserRole};
// ============================================================================
@ -12,19 +12,16 @@ use crate::models::user::{User, UserRole};
#[cfg(feature = "server")]
fn parse_session_token(cookie_header: &str) -> Option<&str> {
cookie_header
.split(';')
.map(|s| s.trim())
.find_map(|pair| {
let mut parts = pair.splitn(2, '=');
let name = parts.next()?.trim();
let value = parts.next()?.trim();
if name == "session" {
Some(value)
} else {
None
}
})
cookie_header.split(';').map(|s| s.trim()).find_map(|pair| {
let mut parts = pair.splitn(2, '=');
let name = parts.next()?.trim();
let value = parts.next()?.trim();
if name == "session" {
Some(value)
} else {
None
}
})
}
#[cfg(feature = "server")]
@ -45,13 +42,10 @@ async fn get_current_admin_user() -> Result<User, ServerFnError> {
return Err(ServerFnError::new("未登录"));
};
let client = DB_POOL
.get()
.await
.map_err(|e| {
tracing::error!("DB connection failed: {:?}", e);
ServerFnError::new(format!("数据库连接失败: {}", e))
})?;
let client = DB_POOL.get().await.map_err(|e| {
tracing::error!("DB connection failed: {:?}", e);
ServerFnError::new(format!("数据库连接失败: {}", e))
})?;
let row = client
.query_opt(
@ -121,7 +115,8 @@ fn is_valid_slug(slug: &str) -> bool {
if slug.is_empty() || slug.len() > 200 {
return false;
}
slug.chars().all(|c| c.is_alphanumeric() || c == '-' || c == '_')
slug.chars()
.all(|c| c.is_alphanumeric() || c == '-' || c == '_')
}
#[cfg(feature = "server")]
@ -189,16 +184,26 @@ fn auto_summary(md: &str) -> String {
.replace_all(&plain, "")
.to_string();
// Remove inline code
plain = regex::Regex::new(r"`[^`]*`").unwrap().replace_all(&plain, "").to_string();
plain = regex::Regex::new(r"`[^`]*`")
.unwrap()
.replace_all(&plain, "")
.to_string();
// Remove links: [text](url) -> text
plain = regex::Regex::new(r"\[([^\]]*)\]\([^)]*\)")
.unwrap()
.replace_all(&plain, "$1")
.to_string();
// Remove heading markers
plain = regex::Regex::new(r"^#{1,6}\s*").unwrap().replace_all(&plain, "").to_string();
plain = regex::Regex::new(r"^#{1,6}\s*")
.unwrap()
.replace_all(&plain, "")
.to_string();
// Remove bold/italic markers
plain = plain.replace("**", "").replace("*", "").replace("__", "").replace("_", "");
plain = plain
.replace("**", "")
.replace("*", "")
.replace("__", "")
.replace("_", "");
// Remove images
plain = regex::Regex::new(r"!\[([^\]]*)\]\([^)]*\)")
.unwrap()
@ -218,6 +223,7 @@ fn auto_summary(md: &str) -> String {
// ============================================================================
#[cfg(feature = "server")]
#[allow(dead_code)]
async fn set_post_tags(
client: &tokio_postgres::Client,
post_id: i32,
@ -259,9 +265,9 @@ async fn set_post_tags(
.query_opt("SELECT id FROM tags WHERE name = $1", &[&tag_name])
.await
.map_err(|e| {
tracing::error!("query tag failed: {:?}", e);
ServerFnError::new(format!("查询标签失败: {}", e))
})?;
tracing::error!("query tag failed: {:?}", e);
ServerFnError::new(format!("查询标签失败: {}", e))
})?;
row.map(|r| r.get(0))
.ok_or_else(|| ServerFnError::new(format!("标签不存在: {}", tag_name)))?
}
@ -275,9 +281,9 @@ async fn set_post_tags(
)
.await
.map_err(|e| {
tracing::error!("link tag failed: {:?}", e);
ServerFnError::new(format!("关联标签失败: {}", e))
})?;
tracing::error!("link tag failed: {:?}", e);
ServerFnError::new(format!("关联标签失败: {}", e))
})?;
}
Ok(())
@ -330,6 +336,7 @@ async fn row_to_post(client: &tokio_postgres::Client, row: &tokio_postgres::Row)
// ============================================================================
#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
#[allow(dead_code)]
pub struct CreatePostRequest {
pub title: String,
pub slug: Option<String>,
@ -416,17 +423,16 @@ pub async fn create_post(
_ => slugify(&title),
};
let mut client = DB_POOL
.get()
.await
.map_err(|e| {
tracing::error!("DB connection failed: {:?}", e);
ServerFnError::new(format!("数据库连接失败: {}", e))
})?;
let mut client = DB_POOL.get().await.map_err(|e| {
tracing::error!("DB connection failed: {:?}", e);
ServerFnError::new(format!("数据库连接失败: {}", e))
})?;
let final_slug = ensure_unique_slug(&client, &base_slug, None).await?;
let content_html = render_markdown(&content_md);
let summary = summary.filter(|s| !s.trim().is_empty()).unwrap_or_else(|| auto_summary(&content_md));
let summary = summary
.filter(|s| !s.trim().is_empty())
.unwrap_or_else(|| auto_summary(&content_md));
let post_status = PostStatus::from_str(&status).unwrap_or(PostStatus::Draft);
let published_at = if post_status == PostStatus::Published {
@ -435,13 +441,10 @@ pub async fn create_post(
None
};
let tx = client
.transaction()
.await
.map_err(|e| {
tracing::error!("transaction start failed: {:?}", e);
ServerFnError::new(format!("事务开始失败: {}", e))
})?;
let tx = client.transaction().await.map_err(|e| {
tracing::error!("transaction start failed: {:?}", e);
ServerFnError::new(format!("事务开始失败: {}", e))
})?;
let row = tx
.query_one(
@ -497,11 +500,12 @@ pub async fn create_post(
.query_opt("SELECT id FROM tags WHERE name = $1", &[&tag_name.as_str()])
.await
.map_err(|e| {
tracing::error!("query tag failed: {:?}", e);
ServerFnError::new(format!("查询标签失败: {}", e))
})?;
row.map(|r| r.get(0))
.ok_or_else(|| ServerFnError::new(format!("标签不存在: {}", tag_name)))?
tracing::error!("query tag failed: {:?}", e);
ServerFnError::new(format!("查询标签失败: {}", e))
})?;
row.map(|r| r.get(0)).ok_or_else(|| {
ServerFnError::new(format!("标签不存在: {}", tag_name))
})?
}
}
};
@ -512,18 +516,16 @@ pub async fn create_post(
)
.await
.map_err(|e| {
tracing::error!("link tag failed: {:?}", e);
ServerFnError::new(format!("关联标签失败: {}", e))
})?;
tracing::error!("link tag failed: {:?}", e);
ServerFnError::new(format!("关联标签失败: {}", e))
})?;
}
}
tx.commit()
.await
.map_err(|e| {
tracing::error!("transaction commit failed: {:?}", e);
ServerFnError::new(format!("事务提交失败: {}", e))
})?;
tx.commit().await.map_err(|e| {
tracing::error!("transaction commit failed: {:?}", e);
ServerFnError::new(format!("事务提交失败: {}", e))
})?;
Ok(CreatePostResponse {
success: true,
@ -545,13 +547,10 @@ pub async fn update_post(
) -> Result<CreatePostResponse, ServerFnError> {
let user = get_current_admin_user().await?;
let mut client = DB_POOL
.get()
.await
.map_err(|e| {
tracing::error!("DB connection failed: {:?}", e);
ServerFnError::new(format!("数据库连接失败: {}", e))
})?;
let mut client = DB_POOL.get().await.map_err(|e| {
tracing::error!("DB connection failed: {:?}", e);
ServerFnError::new(format!("数据库连接失败: {}", e))
})?;
// Verify ownership
let exists: bool = client
@ -590,16 +589,15 @@ pub async fn update_post(
let final_slug = ensure_unique_slug(&client, &base_slug, Some(post_id)).await?;
let content_html = render_markdown(&content_md);
let summary = summary.filter(|s| !s.trim().is_empty()).unwrap_or_else(|| auto_summary(&content_md));
let summary = summary
.filter(|s| !s.trim().is_empty())
.unwrap_or_else(|| auto_summary(&content_md));
let post_status = PostStatus::from_str(&status).unwrap_or(PostStatus::Draft);
let tx = client
.transaction()
.await
.map_err(|e| {
tracing::error!("transaction start failed: {:?}", e);
ServerFnError::new(format!("事务开始失败: {}", e))
})?;
let tx = client.transaction().await.map_err(|e| {
tracing::error!("transaction start failed: {:?}", e);
ServerFnError::new(format!("事务开始失败: {}", e))
})?;
// Check if status changed to published and was not published before
let old_status_row = tx
@ -687,9 +685,9 @@ pub async fn update_post(
.query_opt("SELECT id FROM tags WHERE name = $1", &[&tag_name.as_str()])
.await
.map_err(|e| {
tracing::error!("query tag failed: {:?}", e);
ServerFnError::new(format!("查询标签失败: {}", e))
})?;
tracing::error!("query tag failed: {:?}", e);
ServerFnError::new(format!("查询标签失败: {}", e))
})?;
row.map(|r| r.get(0))
.ok_or_else(|| ServerFnError::new(format!("标签不存在: {}", tag_name)))?
}
@ -707,12 +705,10 @@ pub async fn update_post(
})?;
}
tx.commit()
.await
.map_err(|e| {
tracing::error!("transaction commit failed: {:?}", e);
ServerFnError::new(format!("事务提交失败: {}", e))
})?;
tx.commit().await.map_err(|e| {
tracing::error!("transaction commit failed: {:?}", e);
ServerFnError::new(format!("事务提交失败: {}", e))
})?;
Ok(CreatePostResponse {
success: true,
@ -724,13 +720,10 @@ pub async fn update_post(
#[server(GetPostBySlug, "/api")]
pub async fn get_post_by_slug(slug: String) -> Result<SinglePostResponse, ServerFnError> {
let client = DB_POOL
.get()
.await
.map_err(|e| {
tracing::error!("DB connection failed: {:?}", e);
ServerFnError::new(format!("数据库连接失败: {}", e))
})?;
let client = DB_POOL.get().await.map_err(|e| {
tracing::error!("DB connection failed: {:?}", e);
ServerFnError::new(format!("数据库连接失败: {}", e))
})?;
let row = client
.query_opt(
@ -754,22 +747,25 @@ pub async fn get_post_by_slug(slug: String) -> Result<SinglePostResponse, Server
}
#[server(ListPublishedPosts, "/api")]
pub async fn list_published_posts() -> Result<PostListResponse, ServerFnError> {
let client = DB_POOL
.get()
.await
.map_err(|e| {
tracing::error!("DB connection failed: {:?}", e);
ServerFnError::new(format!("数据库连接失败: {}", e))
})?;
pub async fn list_published_posts(
page: i32,
per_page: i32,
) -> Result<PostListResponse, ServerFnError> {
let client = DB_POOL.get().await.map_err(|e| {
tracing::error!("DB connection failed: {:?}", e);
ServerFnError::new(format!("数据库连接失败: {}", e))
})?;
let offset = ((page - 1).max(0) as i64) * (per_page as i64);
let limit = per_page as i64;
let rows = client
.query(
"SELECT id, author_id, title, slug, summary, content_md, content_html, status, published_at, created_at, updated_at
FROM posts
WHERE status = 'published' AND deleted_at IS NULL
ORDER BY published_at DESC",
&[],
ORDER BY published_at DESC
LIMIT $1 OFFSET $2",
&[&limit, &offset],
)
.await
.map_err(|e| {
@ -789,13 +785,10 @@ pub async fn list_published_posts() -> Result<PostListResponse, ServerFnError> {
pub async fn list_posts() -> Result<PostListResponse, ServerFnError> {
let _user = get_current_admin_user().await?;
let client = DB_POOL
.get()
.await
.map_err(|e| {
tracing::error!("DB connection failed: {:?}", e);
ServerFnError::new(format!("数据库连接失败: {}", e))
})?;
let client = DB_POOL.get().await.map_err(|e| {
tracing::error!("DB connection failed: {:?}", e);
ServerFnError::new(format!("数据库连接失败: {}", e))
})?;
let rows = client
.query(
@ -823,13 +816,10 @@ pub async fn list_posts() -> Result<PostListResponse, ServerFnError> {
pub async fn delete_post(post_id: i32) -> Result<CreatePostResponse, ServerFnError> {
let _user = get_current_admin_user().await?;
let client = DB_POOL
.get()
.await
.map_err(|e| {
tracing::error!("DB connection failed: {:?}", e);
ServerFnError::new(format!("数据库连接失败: {}", e))
})?;
let client = DB_POOL.get().await.map_err(|e| {
tracing::error!("DB connection failed: {:?}", e);
ServerFnError::new(format!("数据库连接失败: {}", e))
})?;
let result = client
.execute(
@ -861,13 +851,10 @@ pub async fn delete_post(post_id: i32) -> Result<CreatePostResponse, ServerFnErr
#[server(ListTags, "/api")]
pub async fn list_tags() -> Result<TagListResponse, ServerFnError> {
let client = DB_POOL
.get()
.await
.map_err(|e| {
tracing::error!("DB connection failed: {:?}", e);
ServerFnError::new(format!("数据库连接失败: {}", e))
})?;
let client = DB_POOL.get().await.map_err(|e| {
tracing::error!("DB connection failed: {:?}", e);
ServerFnError::new(format!("数据库连接失败: {}", e))
})?;
let rows = client
.query(
@ -899,13 +886,10 @@ pub async fn list_tags() -> Result<TagListResponse, ServerFnError> {
#[server(GetPostsByTag, "/api")]
pub async fn get_posts_by_tag(tag_name: String) -> Result<PostListResponse, ServerFnError> {
let client = DB_POOL
.get()
.await
.map_err(|e| {
tracing::error!("DB connection failed: {:?}", e);
ServerFnError::new(format!("数据库连接失败: {}", e))
})?;
let client = DB_POOL.get().await.map_err(|e| {
tracing::error!("DB connection failed: {:?}", e);
ServerFnError::new(format!("数据库连接失败: {}", e))
})?;
let rows = client
.query(
@ -935,13 +919,10 @@ pub async fn get_posts_by_tag(tag_name: String) -> Result<PostListResponse, Serv
pub async fn get_post_stats() -> Result<PostStatsResponse, ServerFnError> {
let _user = get_current_admin_user().await?;
let client = DB_POOL
.get()
.await
.map_err(|e| {
tracing::error!("DB connection failed: {:?}", e);
ServerFnError::new(format!("数据库连接失败: {}", e))
})?;
let client = DB_POOL.get().await.map_err(|e| {
tracing::error!("DB connection failed: {:?}", e);
ServerFnError::new(format!("数据库连接失败: {}", e))
})?;
let total: i64 = client
.query_one("SELECT COUNT(*) FROM posts WHERE deleted_at IS NULL", &[])
@ -978,13 +959,10 @@ pub async fn get_post_stats() -> Result<PostStatsResponse, ServerFnError> {
#[server(SearchPosts, "/api")]
pub async fn search_posts(query: String) -> Result<PostListResponse, ServerFnError> {
let client = DB_POOL
.get()
.await
.map_err(|e| {
tracing::error!("DB connection failed: {:?}", e);
ServerFnError::new(format!("数据库连接失败: {}", e))
})?;
let client = DB_POOL.get().await.map_err(|e| {
tracing::error!("DB connection failed: {:?}", e);
ServerFnError::new(format!("数据库连接失败: {}", e))
})?;
let search_pattern = format!("%{}%", query);

5
src/components/header.rs
View File

@ -44,7 +44,10 @@ fn NavItem(href: &'static str, label: &'static str, is_active: bool) -> Element
let class_str = if is_active {
format!("{} font-medium text-gray-900 dark:text-[#dadadb] underline underline-offset-[0.3rem] decoration-2 decoration-gray-900 dark:decoration-[#dadadb]", base_class)
} else {
format!("{} text-gray-600 dark:text-[#9b9c9d] hover:text-gray-900 dark:hover:text-[#dadadb]", base_class)
format!(
"{} text-gray-600 dark:text-[#9b9c9d] hover:text-gray-900 dark:hover:text-[#dadadb]",
base_class
)
};
let href = href;

7
src/components/mod.rs
View File

@ -1,5 +1,8 @@
pub mod header;
pub mod footer;
pub mod admin_layout;
pub mod admin_skeleton;
pub mod footer;
pub mod header;
pub mod nav;
pub mod page_layout;
pub mod post_card;
pub mod write_skeleton;

32
src/components/nav.rs Normal file
View File

@ -0,0 +1,32 @@
use crate::components::header::NavItemConfig;
use crate::router::Route;
pub fn use_nav_items(route: Route) -> Vec<NavItemConfig> {
vec![
NavItemConfig {
href: "/",
label: "首页",
is_active: matches!(route, Route::Home {}),
},
NavItemConfig {
href: "/archives",
label: "归档",
is_active: matches!(route, Route::Archives {}),
},
NavItemConfig {
href: "/tags",
label: "标签",
is_active: matches!(route, Route::Tags {}) || matches!(route, Route::TagDetail { .. }),
},
NavItemConfig {
href: "/search",
label: "搜索",
is_active: matches!(route, Route::Search {}),
},
NavItemConfig {
href: "/about",
label: "关于",
is_active: matches!(route, Route::About {}),
},
]
}

18
src/components/page_layout.rs Normal file
View File

@ -0,0 +1,18 @@
use dioxus::prelude::*;
use crate::components::footer::Footer;
use crate::components::header::{Header, NavItemConfig};
use crate::theme::ThemeToggle;
#[component]
pub fn PageLayout(nav_items: Vec<NavItemConfig>, children: Element) -> Element {
rsx! {
div { class: "min-h-screen flex flex-col bg-white dark:bg-[#1d1e20] transition-colors duration-300",
Header { nav_items, right_content: rsx! { ThemeToggle {} } }
main { class: "flex-1 w-full max-w-3xl mx-auto px-6 py-6",
{children}
}
Footer {}
}
}
}

52
src/components/post_card.rs Normal file
View File

@ -0,0 +1,52 @@
use dioxus::prelude::*;
use crate::models::post::Post;
#[component]
pub fn PostCard(post: Post) -> Element {
let post_slug = post.slug.clone();
let date_str = post.formatted_date();
rsx! {
article {
class: "relative mb-6 p-6 bg-white dark:bg-[#2e2e33] rounded-lg border border-gray-200 dark:border-[#333] hover:-translate-y-0.5 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-250",
a {
class: "block group",
href: "/post/{post_slug}",
onclick: move |evt| {
evt.prevent_default();
dioxus::router::navigator().push(format!("/post/{}", post_slug).as_str());
},
h2 {
class: "text-2xl font-bold leading-tight text-gray-900 dark:text-[#dadadb] group-hover:opacity-80 transition-opacity",
"{post.title}"
}
div {
class: "mt-2 text-sm text-gray-500 dark:text-[#9b9c9d] leading-relaxed line-clamp-2",
"{post.summary.as_deref().unwrap_or(\"\")}"
}
div {
class: "mt-3 flex items-center gap-3 text-[13px] text-gray-400 dark:text-[#9b9c9d]",
span { "{date_str}" }
if !post.tags.is_empty() {
span { "·" }
for tag in post.tags.clone().into_iter() {
span {
a {
class: "hover:text-gray-600 dark:hover:text-[#dadadb] transition-colors",
href: "/tags/{tag}",
onclick: move |evt| {
evt.prevent_default();
evt.stop_propagation();
dioxus::router::navigator().push(format!("/tags/{}", tag).as_str());
},
"{tag}"
}
}
}
}
}
}
}
}
}

41
src/pages/about.rs Normal file
View File

@ -0,0 +1,41 @@
use dioxus::prelude::*;
use crate::components::nav::use_nav_items;
use crate::components::page_layout::PageLayout;
use crate::router::Route;
#[component]
pub fn About() -> Element {
let route = use_route::<Route>();
let nav_items = use_nav_items(route);
rsx! {
PageLayout { nav_items,
header { class: "page-header mb-6",
h1 { class: "text-[34px] font-bold text-gray-900 dark:text-[#dadadb]",
"关于"
}
}
article { class: "prose dark:prose-invert max-w-none text-gray-800 dark:text-[#c9cacc] leading-relaxed",
p { "Yggdrasil 是一个以文字为主的简约博客系统。" }
p { "它使用 Rust + Dioxus 构建，采用 PostgreSQL 作为数据库，支持 Markdown 写作、标签管理和暗色模式。" }
h2 { class: "text-xl font-bold text-gray-900 dark:text-[#dadadb] mt-8 mb-4", "技术栈" }
ul { class: "list-disc pl-5 space-y-1",
li { "Rust + Dioxus 0.7 (全栈 Web 框架)" }
li { "PostgreSQL + tokio-postgres (数据库)" }
li { "Tailwind CSS (样式)" }
li { "Tiptap Editor (富文本编辑器)" }
li { "pulldown-cmark (Markdown 渲染)" }
}
h2 { class: "text-xl font-bold text-gray-900 dark:text-[#dadadb] mt-8 mb-4", "特性" }
ul { class: "list-disc pl-5 space-y-1",
li { "Markdown 写作与实时预览" }
li { "文章标签与归档" }
li { "暗色/亮色主题切换" }
li { "响应式设计" }
li { "文章搜索" }
}
}
}
}
}

114
src/pages/archives.rs
View File

@ -1,11 +1,10 @@
use dioxus::prelude::*;
use crate::api::posts::{list_published_posts, PostListResponse};
use crate::components::header::{Header, NavItemConfig};
use crate::components::footer::Footer;
use crate::components::nav::use_nav_items;
use crate::components::page_layout::PageLayout;
use crate::models::post::Post;
use crate::router::Route;
use crate::theme::ThemeToggle;
#[derive(Clone, PartialEq)]
struct YearGroup {
@ -24,10 +23,7 @@ fn group_posts(posts: &[Post]) -> Vec<YearGroup> {
let mut years: Vec<YearGroup> = vec![];
for post in posts {
let date_str = post
.published_at
.map(|d| d.format("%Y-%m-%d").to_string())
.unwrap_or_else(|| post.created_at.format("%Y-%m-%d").to_string());
let date_str = post.formatted_date();
let parts: Vec<&str> = date_str.split('-').collect();
if parts.len() != 3 {
@ -83,69 +79,59 @@ fn group_posts(posts: &[Post]) -> Vec<YearGroup> {
#[component]
pub fn Archives() -> Element {
let route = use_route::<Route>();
let posts_res = use_resource(list_published_posts);
let nav_items = vec![
NavItemConfig { href: "/", label: "首页", is_active: matches!(route, Route::Home {}) },
NavItemConfig { href: "/archives", label: "归档", is_active: matches!(route, Route::Archives {}) },
NavItemConfig { href: "/tags", label: "标签", is_active: matches!(route, Route::Tags {}) || matches!(route, Route::TagDetail { .. }) },
NavItemConfig { href: "/search", label: "搜索", is_active: matches!(route, Route::Search {}) },
NavItemConfig { href: "/about", label: "关于", is_active: matches!(route, Route::About {}) },
];
let posts_res = use_resource(move || list_published_posts(1, 10000));
let nav_items = use_nav_items(route);
rsx! {
div { class: "min-h-screen flex flex-col bg-white dark:bg-[#1d1e20] transition-colors duration-300",
Header { nav_items, right_content: rsx! { ThemeToggle {} } }
main { class: "flex-1 w-full max-w-3xl mx-auto px-6 py-6",
header { class: "page-header mb-6",
h1 { class: "text-[34px] font-bold text-gray-900 dark:text-[#dadadb]",
"归档"
}
match &*posts_res.read() {
Some(Ok(PostListResponse { posts })) => {
rsx! {
div { class: "mt-2 text-base text-gray-500 dark:text-[#9b9c9d]",
"共 "
span { class: "font-medium text-gray-700 dark:text-[#dadadb]", "{posts.len()}" }
" 篇文章"
}
PageLayout { nav_items,
header { class: "page-header mb-6",
h1 { class: "text-[34px] font-bold text-gray-900 dark:text-[#dadadb]",
"归档"
}
match &*posts_res.read() {
Some(Ok(PostListResponse { posts })) => {
rsx! {
div { class: "mt-2 text-base text-gray-500 dark:text-[#9b9c9d]",
"共 "
span { class: "font-medium text-gray-700 dark:text-[#dadadb]", "{posts.len()}" }
" 篇文章"
}
}
_ => {
rsx! {
div { class: "mt-2 text-base text-gray-500 dark:text-[#9b9c9d]",
"加载中..."
}
}
_ => {
rsx! {
div { class: "mt-2 text-base text-gray-500 dark:text-[#9b9c9d]",
"加载中..."
}
}
}
}
match &*posts_res.read() {
Some(Ok(PostListResponse { posts })) => {
let grouped = group_posts(posts);
rsx! {
for year_group in grouped.iter() {
YearSection { year_group: year_group.clone() }
}
}
match &*posts_res.read() {
Some(Ok(PostListResponse { posts })) => {
let grouped = group_posts(posts);
rsx! {
for year_group in grouped.iter() {
YearSection { year_group: year_group.clone() }
}
}
Some(Err(e)) => {
rsx! {
div { class: "text-center text-red-500 dark:text-red-400 py-20",
"加载失败: {e}"
}
}
Some(Err(e)) => {
rsx! {
div { class: "text-center text-red-500 dark:text-red-400 py-20",
"加载失败: {e}"
}
}
None => {
rsx! {
div { class: "space-y-8 animate-pulse",
for _ in 0..2 {
div { class: "space-y-4",
div { class: "h-8 w-20 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
div { class: "space-y-2",
for _ in 0..3 {
div { class: "h-4 w-full bg-gray-200 dark:bg-[#2a2a2a] rounded" }
}
}
None => {
rsx! {
div { class: "space-y-8 animate-pulse",
for _ in 0..2 {
div { class: "space-y-4",
div { class: "h-8 w-20 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
div { class: "space-y-2",
for _ in 0..3 {
div { class: "h-4 w-full bg-gray-200 dark:bg-[#2a2a2a] rounded" }
}
}
}
@ -154,14 +140,17 @@ pub fn Archives() -> Element {
}
}
}
Footer {}
}
}
}
#[component]
fn YearSection(year_group: YearGroup) -> Element {
let total = year_group.months.iter().map(|m| m.posts.len()).sum::<usize>();
let total = year_group
.months
.iter()
.map(|m| m.posts.len())
.sum::<usize>();
rsx! {
div { class: "archive-year mt-10",
@ -209,10 +198,7 @@ fn MonthSection(month_group: MonthGroup, year: String) -> Element {
#[component]
fn ArchiveEntry(post: Post) -> Element {
let date_str = post
.published_at
.map(|d| d.format("%Y-%m-%d").to_string())
.unwrap_or_else(|| post.created_at.format("%Y-%m-%d").to_string());
let date_str = post.formatted_date();
rsx! {
div { class: "archive-entry relative py-1.5 my-2.5 group",

165
src/pages/home.rs
View File

@ -1,67 +1,68 @@
use dioxus::prelude::*;
use crate::api::posts::{list_published_posts, PostListResponse};
use crate::components::header::{Header, NavItemConfig};
use crate::components::footer::Footer;
use crate::models::post::Post;
use crate::components::nav::use_nav_items;
use crate::components::page_layout::PageLayout;
use crate::components::post_card::PostCard;
use crate::router::Route;
use crate::theme::ThemeToggle;
const POSTS_PER_PAGE: i32 = 10;
#[component]
pub fn Home() -> Element {
let route = use_route::<Route>();
let posts_res = use_resource(list_published_posts);
rsx! { HomeContent { page: 1 } }
}
let nav_items = vec![
NavItemConfig { href: "/", label: "首页", is_active: matches!(route, Route::Home {}) },
NavItemConfig { href: "/archives", label: "归档", is_active: matches!(route, Route::Archives {}) },
NavItemConfig { href: "/tags", label: "标签", is_active: matches!(route, Route::Tags {}) || matches!(route, Route::TagDetail { .. }) },
NavItemConfig { href: "/search", label: "搜索", is_active: matches!(route, Route::Search {}) },
NavItemConfig { href: "/about", label: "关于", is_active: matches!(route, Route::About {}) },
];
#[component]
pub fn HomePage(page: i32) -> Element {
rsx! { HomeContent { page } }
}
#[component]
fn HomeContent(page: i32) -> Element {
let route = use_route::<Route>();
let current_page = page.max(1);
let posts_res = use_resource(move || list_published_posts(current_page, POSTS_PER_PAGE));
let nav_items = use_nav_items(route);
rsx! {
div { class: "min-h-screen flex flex-col bg-white dark:bg-[#1d1e20] transition-colors duration-300",
Header { nav_items, right_content: rsx! { ThemeToggle {} } }
main { class: "flex-1 w-full max-w-3xl mx-auto px-6 py-6",
HomeInfo {}
match &*posts_res.read() {
Some(Ok(PostListResponse { posts })) => {
rsx! {
for post in posts.iter() {
PostEntry { post: post.clone() }
}
if posts.is_empty() {
div { class: "text-center text-gray-500 dark:text-[#9b9c9d] py-20",
"暂无文章"
}
PageLayout { nav_items,
HomeInfo {}
match &*posts_res.read() {
Some(Ok(PostListResponse { posts })) => {
rsx! {
for post in posts.iter() {
PostCard { post: post.clone() }
}
if posts.is_empty() {
div { class: "text-center text-gray-500 dark:text-[#9b9c9d] py-20",
"暂无文章"
}
}
Pagination { current_page, posts: posts.clone() }
}
Some(Err(e)) => {
rsx! {
div { class: "text-center text-red-500 dark:text-red-400 py-20",
"加载失败: {e}"
}
}
Some(Err(e)) => {
rsx! {
div { class: "text-center text-red-500 dark:text-red-400 py-20",
"加载失败: {e}"
}
}
None => {
rsx! {
div { class: "space-y-6 py-4",
for _ in 0..3 {
div { class: "mb-6 p-6 bg-white dark:bg-[#2e2e33] rounded-lg border border-gray-200 dark:border-[#333] animate-pulse",
div { class: "h-7 w-3/4 bg-gray-200 dark:bg-[#2a2a2a] rounded mb-3" }
div { class: "h-4 w-full bg-gray-200 dark:bg-[#2a2a2a] rounded mb-2" }
div { class: "h-4 w-2/3 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
}
}
None => {
rsx! {
div { class: "space-y-6 py-4",
for _ in 0..3 {
div { class: "mb-6 p-6 bg-white dark:bg-[#2e2e33] rounded-lg border border-gray-200 dark:border-[#333] animate-pulse",
div { class: "h-7 w-3/4 bg-gray-200 dark:bg-[#2a2a2a] rounded mb-3" }
div { class: "h-4 w-full bg-gray-200 dark:bg-[#2a2a2a] rounded mb-2" }
div { class: "h-4 w-2/3 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
}
}
}
}
}
Pagination {}
}
Footer {}
}
}
}
@ -81,63 +82,37 @@ fn HomeInfo() -> Element {
}
#[component]
fn PostEntry(post: Post) -> Element {
let post_slug = post.slug.clone();
let date_str = post
.published_at
.map(|d| d.format("%Y-%m-%d").to_string())
.unwrap_or_else(|| post.created_at.format("%Y-%m-%d").to_string());
fn Pagination(current_page: i32, posts: Vec<crate::models::post::Post>) -> Element {
let has_prev = current_page > 1;
let has_next = posts.len() >= POSTS_PER_PAGE as usize;
rsx! {
article { class: "relative mb-6 p-6 bg-white dark:bg-[#2e2e33] rounded-lg border border-gray-200 dark:border-[#333] hover:-translate-y-0.5 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-250",
a {
class: "block group",
href: "/post/{post_slug}",
onclick: move |evt| {
evt.prevent_default();
dioxus::router::navigator().push(format!("/post/{}", post_slug).as_str());
},
h2 { class: "text-2xl font-bold leading-tight text-gray-900 dark:text-[#dadadb] group-hover:opacity-80 transition-opacity",
"{post.title}"
}
div { class: "mt-2 text-sm text-gray-500 dark:text-[#9b9c9d] leading-relaxed line-clamp-2",
"{post.summary.as_deref().unwrap_or(\"\")}"
}
div { class: "mt-3 flex items-center gap-3 text-[13px] text-gray-400 dark:text-[#9b9c9d]",
span { "{date_str}" }
if !post.tags.is_empty() {
span { "·" }
for tag in post.tags.clone().into_iter() {
span {
a {
class: "hover:text-gray-600 dark:hover:text-[#dadadb] transition-colors",
href: "/tags/{tag}",
onclick: move |evt| {
evt.prevent_default();
evt.stop_propagation();
dioxus::router::navigator().push(format!("/tags/{}", tag).as_str());
},
"{tag}"
}
}
nav { class: "flex mt-10 mb-6 justify-between",
if has_prev {
button {
class: "inline-flex items-center px-4 py-2 text-sm text-white bg-gray-900 dark:bg-[#dadadb] dark:text-gray-900 rounded-full hover:opacity-80 transition-opacity cursor-pointer",
onclick: move |_| {
let prev = current_page - 1;
if prev <= 1 {
dioxus::router::navigator().push("/");
} else {
dioxus::router::navigator().push(format!("/page/{}", prev).as_str());
}
}
},
span { class: "mr-1", "«" }
"上一页"
}
}
if has_next {
button {
class: "ml-auto inline-flex items-center px-4 py-2 text-sm text-white bg-gray-900 dark:bg-[#dadadb] dark:text-gray-900 rounded-full hover:opacity-80 transition-opacity cursor-pointer",
onclick: move |_| {
dioxus::router::navigator().push(format!("/page/{}", current_page + 1).as_str());
},
"下一页"
span { class: "ml-1", "»" }
}
}
}
}
}
#[component]
fn Pagination() -> Element {
rsx! {
nav { class: "flex mt-10 mb-6",
button {
class: "ml-auto inline-flex items-center px-4 py-2 text-sm text-white bg-gray-900 dark:bg-[#dadadb] dark:text-gray-900 rounded-full hover:opacity-80 transition-opacity cursor-pointer",
onclick: move |_| { dioxus::router::navigator().push("/page/2"); },
"下一页"
span { class: "ml-1", "»" }
}
}
}
}

4
src/pages/mod.rs
View File

@ -1,7 +1,9 @@
pub mod about;
pub mod admin;
pub mod archives;
pub mod home;
pub mod login;
pub mod post_detail;
pub mod register;
pub mod tags;
pub mod search;
pub mod tags;

155
src/pages/post_detail.rs
View File

@ -1,116 +1,101 @@
use dioxus::prelude::*;
use crate::api::posts::{get_post_by_slug, SinglePostResponse};
use crate::components::header::{Header, NavItemConfig};
use crate::components::footer::Footer;
use crate::components::nav::use_nav_items;
use crate::components::page_layout::PageLayout;
use crate::router::Route;
use crate::theme::ThemeToggle;
#[component]
pub fn PostDetail(slug: String) -> Element {
let route = use_route::<Route>();
let slug_clone = slug.clone();
let post_res = use_resource(move || get_post_by_slug(slug_clone.clone()));
let nav_items = vec![
NavItemConfig { href: "/", label: "首页", is_active: matches!(route, Route::Home {}) },
NavItemConfig { href: "/archives", label: "归档", is_active: matches!(route, Route::Archives {}) },
NavItemConfig { href: "/tags", label: "标签", is_active: matches!(route, Route::Tags {}) || matches!(route, Route::TagDetail { .. }) },
NavItemConfig { href: "/search", label: "搜索", is_active: matches!(route, Route::Search {}) },
NavItemConfig { href: "/about", label: "关于", is_active: matches!(route, Route::About {}) },
];
let nav_items = use_nav_items(route);
rsx! {
div { class: "min-h-screen flex flex-col bg-white dark:bg-[#1d1e20] transition-colors duration-300",
Header { nav_items, right_content: rsx! { ThemeToggle {} } }
main { class: "flex-1 w-full max-w-3xl mx-auto px-6 py-6",
match &*post_res.read() {
Some(Ok(SinglePostResponse { post: Some(post) })) => {
let date_str = post
.published_at
.map(|d| d.format("%Y-%m-%d").to_string())
.unwrap_or_else(|| post.created_at.format("%Y-%m-%d").to_string());
PageLayout { nav_items,
match &*post_res.read() {
Some(Ok(SinglePostResponse { post: Some(post) })) => {
let date_str = post.formatted_date();
rsx! {
article { class: "py-6",
header { class: "mb-8",
h1 { class: "text-3xl md:text-4xl font-bold text-gray-900 dark:text-[#dadadb] leading-tight",
"{post.title}"
}
div { class: "mt-4 flex items-center gap-3 text-sm text-gray-500 dark:text-[#9b9c9d]",
span { "{date_str}" }
if !post.tags.is_empty() {
span { "·" }
for tag in post.tags.clone().into_iter() {
a {
class: "hover:text-gray-700 dark:hover:text-[#dadadb] transition-colors",
href: "/tags/{tag}",
onclick: move |evt| {
evt.prevent_default();
dioxus::router::navigator().push(format!("/tags/{}", tag).as_str());
},
"{tag}"
}
rsx! {
article { class: "py-6",
header { class: "mb-8",
h1 { class: "text-3xl md:text-4xl font-bold text-gray-900 dark:text-[#dadadb] leading-tight",
"{post.title}"
}
div { class: "mt-4 flex items-center gap-3 text-sm text-gray-500 dark:text-[#9b9c9d]",
span { "{date_str}" }
if !post.tags.is_empty() {
span { "·" }
for tag in post.tags.clone().into_iter() {
a {
class: "hover:text-gray-700 dark:hover:text-[#dadadb] transition-colors",
href: "/tags/{tag}",
onclick: move |evt| {
evt.prevent_default();
dioxus::router::navigator().push(format!("/tags/{}", tag).as_str());
},
"{tag}"
}
}
}
}
div {
class: "prose dark:prose-invert max-w-none text-gray-800 dark:text-[#c9cacc] leading-relaxed",
dangerous_inner_html: "{post.content_html.as_deref().unwrap_or(\"\")}"
}
div { class: "mt-12 pt-6 border-t border-gray-200 dark:border-[#333]",
button {
class: "text-sm text-gray-500 dark:text-[#9b9c9d] hover:text-gray-700 dark:hover:text-[#dadadb] transition-colors",
onclick: move |_| {
let _ = dioxus::router::navigator().push("/");
},
"← 返回首页"
}
}
}
}
}
Some(Ok(SinglePostResponse { post: None })) => {
rsx! {
div { class: "text-center py-20",
h2 { class: "text-2xl font-bold text-gray-900 dark:text-[#dadadb] mb-4",
"文章不存在"
}
p { class: "text-gray-500 dark:text-[#9b9c9d] mb-6",
"这篇文章可能已被删除或移动。"
}
div {
class: "prose dark:prose-invert max-w-none text-gray-800 dark:text-[#c9cacc] leading-relaxed",
dangerous_inner_html: "{post.content_html.as_deref().unwrap_or(\"\")}"
}
div { class: "mt-12 pt-6 border-t border-gray-200 dark:border-[#333]",
button {
class: "px-6 py-2 bg-gray-900 dark:bg-[#dadadb] text-white dark:text-gray-900 rounded-full font-medium hover:opacity-80 transition-opacity",
class: "text-sm text-gray-500 dark:text-[#9b9c9d] hover:text-gray-700 dark:hover:text-[#dadadb] transition-colors",
onclick: move |_| {
let _ = dioxus::router::navigator().push("/");
},
"返回首页"
"← 返回首页"
}
}
}
}
Some(Err(e)) => {
rsx! {
div { class: "text-center text-red-500 dark:text-red-400 py-20",
"加载失败: {e}"
}
}
}
None => {
rsx! {
div { class: "animate-pulse py-6 space-y-4",
div { class: "h-10 w-3/4 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
div { class: "h-4 w-32 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
div { class: "h-4 w-full bg-gray-200 dark:bg-[#2a2a2a] rounded mt-8" }
div { class: "h-4 w-full bg-gray-200 dark:bg-[#2a2a2a] rounded" }
div { class: "h-4 w-2/3 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
}
}
}
}
Some(Ok(SinglePostResponse { post: None })) => {
rsx! {
div { class: "text-center py-20",
h2 { class: "text-2xl font-bold text-gray-900 dark:text-[#dadadb] mb-4",
"文章不存在"
}
p { class: "text-gray-500 dark:text-[#9b9c9d] mb-6",
"这篇文章可能已被删除或移动。"
}
button {
class: "px-6 py-2 bg-gray-900 dark:bg-[#dadadb] text-white dark:text-gray-900 rounded-full font-medium hover:opacity-80 transition-opacity",
onclick: move |_| {
let _ = dioxus::router::navigator().push("/");
},
"返回首页"
}
}
}
}
Some(Err(e)) => {
rsx! {
div { class: "text-center text-red-500 dark:text-red-400 py-20",
"加载失败: {e}"
}
}
}
None => {
rsx! {
div { class: "animate-pulse py-6 space-y-4",
div { class: "h-10 w-3/4 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
div { class: "h-4 w-32 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
div { class: "h-4 w-full bg-gray-200 dark:bg-[#2a2a2a] rounded mt-8" }
div { class: "h-4 w-full bg-gray-200 dark:bg-[#2a2a2a] rounded" }
div { class: "h-4 w-2/3 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
}
}
}
}
Footer {}
}
}
}

82
src/pages/search.rs Normal file
View File

@ -0,0 +1,82 @@
use dioxus::prelude::*;
use crate::api::posts::{search_posts, PostListResponse};
use crate::components::nav::use_nav_items;
use crate::components::page_layout::PageLayout;
use crate::components::post_card::PostCard;
use crate::router::Route;
#[component]
pub fn Search() -> Element {
let route = use_route::<Route>();
let mut query = use_signal(|| "".to_string());
let mut search_res = use_signal(|| None::<Result<PostListResponse, ServerFnError>>);
let mut is_searching = use_signal(|| false);
let nav_items = use_nav_items(route);
let mut on_search = move || {
let q = query().trim().to_string();
if q.is_empty() {
return;
}
is_searching.set(true);
search_res.set(None);
spawn(async move {
let res = search_posts(q).await;
search_res.set(Some(res));
is_searching.set(false);
});
};
rsx! {
PageLayout { nav_items,
header { class: "page-header mb-6",
h1 { class: "text-[34px] font-bold text-gray-900 dark:text-[#dadadb]",
"搜索"
}
}
div { class: "mb-8",
div { class: "flex gap-2",
input {
class: "flex-1 px-4 py-2 border border-gray-200 dark:border-[#333] rounded-lg bg-white dark:bg-[#2e2e33] text-gray-900 dark:text-[#dadadb] focus:outline-none focus:border-gray-400 dark:focus:border-gray-600",
r#type: "text",
placeholder: "输入关键词搜索文章...",
value: query(),
oninput: move |e| query.set(e.value()),
onkeydown: move |e| if e.key() == Key::Enter { on_search() },
}
button {
class: "px-6 py-2 bg-gray-900 dark:bg-[#dadadb] text-white dark:text-gray-900 rounded-full font-medium hover:opacity-80 transition-opacity",
onclick: move |_| on_search(),
"搜索"
}
}
}
if is_searching() {
div { class: "space-y-6 py-4 animate-pulse",
for _ in 0..3 {
div { class: "mb-6 p-6 bg-white dark:bg-[#2e2e33] rounded-lg border border-gray-200 dark:border-[#333]",
div { class: "h-7 w-3/4 bg-gray-200 dark:bg-[#2a2a2a] rounded mb-3" }
div { class: "h-4 w-full bg-gray-200 dark:bg-[#2a2a2a] rounded mb-2" }
div { class: "h-4 w-2/3 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
}
}
}
} else if let Some(Ok(PostListResponse { posts })) = search_res() {
if posts.is_empty() {
div { class: "text-center text-gray-500 dark:text-[#9b9c9d] py-20",
"未找到相关文章"
}
} else {
for post in posts.iter() {
PostCard { post: post.clone() }
}
}
} else if let Some(Err(e)) = search_res() {
div { class: "text-center text-red-500 dark:text-red-400 py-20",
"搜索失败: {e}"
}
}
}
}
}

285
src/pages/tags.rs
View File

@ -1,95 +1,91 @@
use dioxus::prelude::*;
use crate::api::posts::{get_posts_by_tag, list_tags, PostListResponse, TagListResponse};
use crate::components::header::{Header, NavItemConfig};
use crate::components::footer::Footer;
use crate::models::post::Post;
use crate::components::nav::use_nav_items;
use crate::components::page_layout::PageLayout;
use crate::components::post_card::PostCard;
use crate::router::Route;
use crate::theme::ThemeToggle;
#[component]
pub fn Tags() -> Element {
let route = use_route::<Route>();
let tags_res = use_resource(list_tags);
let nav_items = vec![
NavItemConfig { href: "/", label: "首页", is_active: matches!(route, Route::Home {}) },
NavItemConfig { href: "/archives", label: "归档", is_active: matches!(route, Route::Archives {}) },
NavItemConfig { href: "/tags", label: "标签", is_active: matches!(route, Route::Tags {}) || matches!(route, Route::TagDetail { .. }) },
NavItemConfig { href: "/search", label: "搜索", is_active: matches!(route, Route::Search {}) },
NavItemConfig { href: "/about", label: "关于", is_active: matches!(route, Route::About {}) },
];
let tags_data = use_memo(move || {
match &*tags_res.read() {
Some(Ok(TagListResponse { tags })) => Some(tags.clone()),
_ => None,
}
});
let total_posts = use_memo(move || {
match &*tags_res.read() {
Some(Ok(TagListResponse { tags })) => tags.iter().map(|t| t.post_count).sum::<i64>(),
_ => 0,
}
});
let has_error = use_memo(move || {
matches!(&*tags_res.read(), Some(Err(_)))
});
let nav_items = use_nav_items(route);
rsx! {
div { class: "min-h-screen flex flex-col bg-white dark:bg-[#1d1e20] transition-colors duration-300",
Header { nav_items, right_content: rsx! { ThemeToggle {} } }
main { class: "flex-1 w-full max-w-3xl mx-auto px-6 py-6",
header { class: "page-header mb-6",
h1 { class: "text-[34px] font-bold text-gray-900 dark:text-[#dadadb]",
"标签"
}
if tags_data().is_some() {
div { class: "mt-2 text-base text-gray-500 dark:text-[#9b9c9d]",
"共 "
span { class: "font-medium text-gray-700 dark:text-[#dadadb]", "{tags_data().unwrap().len()}" }
" 个标签，"
span { class: "font-medium text-gray-700 dark:text-[#dadadb]", "{total_posts()}" }
" 篇文章"
}
} else {
div { class: "mt-2 text-base text-gray-500 dark:text-[#9b9c9d]",
"加载中..."
}
}
PageLayout { nav_items,
header { class: "page-header mb-6",
h1 { class: "text-[34px] font-bold text-gray-900 dark:text-[#dadadb]",
"标签"
}
if has_error() {
div { class: "text-center text-red-500 dark:text-red-400 py-20",
"加载失败"
}
} else if tags_data().is_some() {
ul { class: "flex flex-wrap gap-4 mt-6",
for tag in tags_data().unwrap().into_iter() {
li {
a {
class: "inline-flex items-center px-3 py-1.5 text-base font-medium bg-gray-100 dark:bg-[#2e2e33] text-gray-700 dark:text-[#9b9c9d] rounded-lg hover:bg-gray-200 dark:hover:bg-[#333] transition-colors",
href: "/tags/{tag.name}",
onclick: move |evt| {
evt.prevent_default();
dioxus::router::navigator().push(format!("/tags/{}", tag.name).as_str());
},
"{tag.name}"
sup { class: "ml-1 text-sm text-gray-500 dark:text-[#9b9c9d]", "{tag.post_count}" }
}
match &*tags_res.read() {
Some(Ok(TagListResponse { tags })) => {
let total = tags.iter().map(|t| t.post_count).sum::<i64>();
rsx! {
div { class: "mt-2 text-base text-gray-500 dark:text-[#9b9c9d]",
"共 "
span { class: "font-medium text-gray-700 dark:text-[#dadadb]", "{tags.len()}" }
" 个标签，"
span { class: "font-medium text-gray-700 dark:text-[#dadadb]", "{total}" }
" 篇文章"
}
}
}
} else {
div { class: "flex flex-wrap gap-4 mt-6 animate-pulse",
for _ in 0..8 {
div { class: "h-8 w-16 bg-gray-200 dark:bg-[#2a2a2a] rounded-lg" }
Some(Err(_)) => {
rsx! {
div { class: "mt-2 text-base text-gray-500 dark:text-[#9b9c9d]",
"加载失败"
}
}
}
None => {
rsx! {
div { class: "mt-2 text-base text-gray-500 dark:text-[#9b9c9d]",
"加载中..."
}
}
}
}
}
match &*tags_res.read() {
Some(Ok(TagListResponse { tags })) => {
let tags = tags.clone();
rsx! {
ul { class: "flex flex-wrap gap-4 mt-6",
for tag in tags.into_iter() {
li {
a {
class: "inline-flex items-center px-3 py-1.5 text-base font-medium bg-gray-100 dark:bg-[#2e2e33] text-gray-700 dark:text-[#9b9c9d] rounded-lg hover:bg-gray-200 dark:hover:bg-[#333] transition-colors",
href: "/tags/{tag.name}",
onclick: move |evt| {
evt.prevent_default();
dioxus::router::navigator().push(format!("/tags/{}", tag.name).as_str());
},
"{tag.name}"
sup { class: "ml-1 text-sm text-gray-500 dark:text-[#9b9c9d]", "{tag.post_count}" }
}
}
}
}
}
}
Some(Err(_)) => {
rsx! {
div { class: "text-center text-red-500 dark:text-red-400 py-20",
"加载失败"
}
}
}
None => {
rsx! {
div { class: "flex flex-wrap gap-4 mt-6 animate-pulse",
for _ in 0..8 {
div { class: "h-8 w-16 bg-gray-200 dark:bg-[#2a2a2a] rounded-lg" }
}
}
}
}
}
Footer {}
}
}
}
@ -99,116 +95,63 @@ pub fn TagDetail(tag: String) -> Element {
let route = use_route::<Route>();
let tag_clone = tag.clone();
let posts_res = use_resource(move || get_posts_by_tag(tag_clone.clone()));
let nav_items = vec![
NavItemConfig { href: "/", label: "首页", is_active: matches!(route, Route::Home {}) },
NavItemConfig { href: "/archives", label: "归档", is_active: matches!(route, Route::Archives {}) },
NavItemConfig { href: "/tags", label: "标签", is_active: matches!(route, Route::Tags {}) || matches!(route, Route::TagDetail { .. }) },
NavItemConfig { href: "/search", label: "搜索", is_active: matches!(route, Route::Search {}) },
NavItemConfig { href: "/about", label: "关于", is_active: matches!(route, Route::About {}) },
];
let posts_data = use_memo(move || {
match &*posts_res.read() {
Some(Ok(PostListResponse { posts })) => Some(posts.clone()),
_ => None,
}
});
let post_count = use_memo(move || {
match &*posts_res.read() {
Some(Ok(PostListResponse { posts })) => posts.len(),
_ => 0,
}
});
let has_error = use_memo(move || {
matches!(&*posts_res.read(), Some(Err(_)))
});
let nav_items = use_nav_items(route);
rsx! {
div { class: "min-h-screen flex flex-col bg-white dark:bg-[#1d1e20] transition-colors duration-300",
Header { nav_items, right_content: rsx! { ThemeToggle {} } }
main { class: "flex-1 w-full max-w-3xl mx-auto px-6 py-6",
header { class: "page-header mb-6",
h1 { class: "text-[34px] font-bold text-gray-900 dark:text-[#dadadb]",
"{tag}"
}
if post_count() > 0 || has_error() {
div { class: "mt-2 text-base text-gray-500 dark:text-[#9b9c9d]",
"共 "
span { class: "font-medium text-gray-700 dark:text-[#dadadb]", "{post_count()}" }
" 篇文章"
}
} else {
div { class: "mt-2 text-base text-gray-500 dark:text-[#9b9c9d]",
"加载中..."
}
}
PageLayout { nav_items,
header { class: "page-header mb-6",
h1 { class: "text-[34px] font-bold text-gray-900 dark:text-[#dadadb]",
"{tag}"
}
if has_error() {
div { class: "text-center text-red-500 dark:text-red-400 py-20",
"加载失败"
match &*posts_res.read() {
Some(Ok(PostListResponse { posts })) => {
rsx! {
div { class: "mt-2 text-base text-gray-500 dark:text-[#9b9c9d]",
"共 "
span { class: "font-medium text-gray-700 dark:text-[#dadadb]", "{posts.len()}" }
" 篇文章"
}
}
}
} else if posts_data().is_some() {
for post in posts_data().unwrap().into_iter() {
TagPostEntry { post }
Some(Err(_)) => {
rsx! {
div { class: "mt-2 text-base text-gray-500 dark:text-[#9b9c9d]",
"加载失败"
}
}
}
} else {
div { class: "space-y-6 py-4 animate-pulse",
for _ in 0..3 {
div { class: "mb-6 p-6 bg-white dark:bg-[#2e2e33] rounded-lg border border-gray-200 dark:border-[#333]",
div { class: "h-7 w-3/4 bg-gray-200 dark:bg-[#2a2a2a] rounded mb-3" }
div { class: "h-4 w-full bg-gray-200 dark:bg-[#2a2a2a] rounded mb-2" }
div { class: "h-4 w-2/3 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
None => {
rsx! {
div { class: "mt-2 text-base text-gray-500 dark:text-[#9b9c9d]",
"加载中..."
}
}
}
}
}
Footer {}
}
}
}
#[component]
fn TagPostEntry(post: Post) -> Element {
let post_slug = post.slug.clone();
let date_str = post
.published_at
.map(|d| d.format("%Y-%m-%d").to_string())
.unwrap_or_else(|| post.created_at.format("%Y-%m-%d").to_string());
rsx! {
article { class: "relative mb-6 p-6 bg-white dark:bg-[#2e2e33] rounded-lg border border-gray-200 dark:border-[#333] hover:-translate-y-0.5 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-250",
a {
class: "block group",
href: "/post/{post_slug}",
onclick: move |evt| {
evt.prevent_default();
dioxus::router::navigator().push(format!("/post/{}", post_slug).as_str());
},
h2 { class: "text-2xl font-bold leading-tight text-gray-900 dark:text-[#dadadb] group-hover:opacity-80 transition-opacity",
"{post.title}"
match &*posts_res.read() {
Some(Ok(PostListResponse { posts })) => {
rsx! {
for post in posts.iter() {
PostCard { post: post.clone() }
}
}
}
div { class: "mt-2 text-sm text-gray-500 dark:text-[#9b9c9d] leading-relaxed line-clamp-2",
"{post.summary.as_deref().unwrap_or(\"\")}"
Some(Err(_)) => {
rsx! {
div { class: "text-center text-red-500 dark:text-red-400 py-20",
"加载失败"
}
}
}
div { class: "mt-3 flex items-center gap-3 text-[13px] text-gray-400 dark:text-[#9b9c9d]",
span { "{date_str}" }
if !post.tags.is_empty() {
span { "·" }
for tag in post.tags.clone().into_iter() {
span {
a {
class: "hover:text-gray-600 dark:hover:text-[#dadadb] transition-colors",
href: "/tags/{tag}",
onclick: move |evt| {
evt.prevent_default();
evt.stop_propagation();
dioxus::router::navigator().push(format!("/tags/{}", tag).as_str());
},
"{tag}"
None => {
rsx! {
div { class: "space-y-6 py-4 animate-pulse",
for _ in 0..3 {
div { class: "mb-6 p-6 bg-white dark:bg-[#2e2e33] rounded-lg border border-gray-200 dark:border-[#333]",
div { class: "h-7 w-3/4 bg-gray-200 dark:bg-[#2a2a2a] rounded mb-3" }
div { class: "h-4 w-full bg-gray-200 dark:bg-[#2a2a2a] rounded mb-2" }
div { class: "h-4 w-2/3 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
}
}
}

16
src/router.rs
View File

@ -3,12 +3,14 @@ use std::sync::Arc;
use crate::components::admin_layout::AdminLayout;
use crate::context::UserContext;
use crate::pages::about::About;
use crate::pages::admin::{Admin, Posts, Write};
use crate::pages::archives::Archives;
use crate::pages::home::Home;
use crate::pages::home::{Home, HomePage};
use crate::pages::login::Login;
use crate::pages::post_detail::PostDetail;
use crate::pages::register::Register;
use crate::pages::search::Search;
use crate::pages::tags::{TagDetail, Tags};
use crate::theme::{use_theme_provider, Theme, ThemePreload};
@ -17,6 +19,8 @@ use crate::theme::{use_theme_provider, Theme, ThemePreload};
pub enum Route {
#[route("/")]
Home {},
#[route("/page/:page")]
HomePage { page: i32 },
#[route("/login")]
Login {},
#[route("/register")]
@ -67,13 +71,3 @@ pub fn AppRouter() -> Element {
}
}
}
#[component]
pub fn Search() -> Element {
rsx! { "Search" }
}
#[component]
pub fn About() -> Element {
rsx! { "About" }
}