fix: 前端设计规范对齐 + UX 改进 #1

openclaw · 2026-03-10T18:05:57+08:00

openclaw commented

2026-03-10 18:05:57 +08:00

First-time contributor

概要

根据 /docs/design.md 设计规范对全站前端进行审查，修复了所有不符合规范的样式，并做了一些 UX 改进。

设计规范对齐 (Design Spec Compliance)

字重修复: body font-medium → font-normal，规范要求正文 400 字重
PostCard hover 效果: 补充 group hover — 标题 underline、箭头 →、translate 动画，与设计示例一致
PostCard 摘要: 补充 text-lg，符合规范 Body 样式
PostMeta 日期颜色: text-neutral-400 → text-neutral-500（规范 Ash 色值）
首页错误信息颜色: text-neutral-400 → text-red-600（规范 Error 色值）
注册页面: 去掉 green/yellow 颜色反馈，改用黑白灰度（规范：摒弃所有非功能性色彩）
草稿页 Publish 按钮: 去掉 green 色
代码块背景色统一: #f6f8fa → #fafafa（规范 Vapor 色值）
ImageUpload: border-2 border-dashed → border solid 细线，更符合瑞士极简风格

Bug 修复

PostPage 404 处理: router.push("/not-found") → notFound()，使用 Next.js 内置 not-found 机制
next.config.ts: 添加 images.remotePatterns，修复外部图片 <Image> 加载报错

UX 改进

编辑器移动端适配: grid-cols-2 → grid-cols-1 md:grid-cols-2
编辑器错误提示: alert() → SaveStatus 组件，保持 UI 一致性
Autosave 间隔: 300ms → 2000ms，减轻后端压力

修改文件 (13 files)

next.config.ts · layout.tsx · page.tsx · PostCard.tsx · PostMeta.tsx · PostContent.tsx · ImageUpload.tsx · register/page.tsx · drafts/page.tsx · posts/[id]/page.tsx · posts/[id]/edit/page.tsx · admin/editor/page.tsx · admin/editor/[id]/page.tsx

## 概要根据 `/docs/design.md` 设计规范对全站前端进行审查，修复了所有不符合规范的样式，并做了一些 UX 改进。 ## 设计规范对齐 (Design Spec Compliance) - **字重修复**: body `font-medium` → `font-normal`，规范要求正文 400 字重 - **PostCard hover 效果**: 补充 `group` hover — 标题 underline、箭头 `→`、translate 动画，与设计示例一致 - **PostCard 摘要**: 补充 `text-lg`，符合规范 Body 样式 - **PostMeta 日期颜色**: `text-neutral-400` → `text-neutral-500`（规范 Ash 色值） - **首页错误信息颜色**: `text-neutral-400` → `text-red-600`（规范 Error 色值） - **注册页面**: 去掉 `green`/`yellow` 颜色反馈，改用黑白灰度（规范：摒弃所有非功能性色彩） - **草稿页 Publish 按钮**: 去掉 `green` 色 - **代码块背景色统一**: `#f6f8fa` → `#fafafa`（规范 Vapor 色值） - **ImageUpload**: `border-2 border-dashed` → `border` solid 细线，更符合瑞士极简风格 ## Bug 修复 - **PostPage 404 处理**: `router.push("/not-found")` → `notFound()`，使用 Next.js 内置 not-found 机制 - **next.config.ts**: 添加 `images.remotePatterns`，修复外部图片 `<Image>` 加载报错 ## UX 改进 - **编辑器移动端适配**: `grid-cols-2` → `grid-cols-1 md:grid-cols-2` - **编辑器错误提示**: `alert()` → `SaveStatus` 组件，保持 UI 一致性 - **Autosave 间隔**: `300ms` → `2000ms`，减轻后端压力 ## 修改文件 (13 files) `next.config.ts` · `layout.tsx` · `page.tsx` · `PostCard.tsx` · `PostMeta.tsx` · `PostContent.tsx` · `ImageUpload.tsx` · `register/page.tsx` · `drafts/page.tsx` · `posts/[id]/page.tsx` · `posts/[id]/edit/page.tsx` · `admin/editor/page.tsx` · `admin/editor/[id]/page.tsx`

openclaw added 1 commit 2026-03-10 18:05:57 +08:00

fix: align frontend with design spec + UX improvements 61e86bf215

Design spec compliance:
- Fix body font-weight: font-medium → font-normal (spec requires 400)
- PostCard: add group hover effects, underline on title hover, arrow →, translate animation
- PostCard: add text-lg to excerpt (spec Body style)
- PostMeta: fix date color neutral-400 → neutral-500 (spec Ash color)
- Homepage: fix error color neutral-400 → red-600 (spec Error color)
- Register: replace green/yellow with black/gray (spec: no non-functional colors)
- Drafts: remove green from Publish button
- PostContent: unify pre background to #fafafa (spec Vapor color)
- ImageUpload: replace dashed border with solid thin line

Bug fixes:
- PostPage: use notFound() instead of router.push('/not-found')
- next.config.ts: add images.remotePatterns for external images

UX improvements:
- Editor: responsive grid-cols-1 md:grid-cols-2 for mobile
- Editor pages: replace alert() with SaveStatus component
- Autosave delay: 300ms → 2000ms to reduce API pressure

This pull request can be merged automatically.

You are not authorized to merge this pull request.

View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.

git fetch -u fix/design-review-improvements:openclaw-fix/design-review-improvements

git checkout openclaw-fix/design-review-improvements

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: carrydela/Rs_blog_front#1

Allow edits from maintainers