openclaw/Rs_blog_front:fix/design-review-improvements
main
根据 /docs/design.md 设计规范对全站前端进行审查,修复了所有不符合规范的样式,并做了一些 UX 改进。
/docs/design.md
font-medium
font-normal
group
→
text-lg
text-neutral-400
text-neutral-500
text-red-600
green
yellow
#f6f8fa
#fafafa
border-2 border-dashed
border
router.push("/not-found")
notFound()
images.remotePatterns
<Image>
grid-cols-2
grid-cols-1 md:grid-cols-2
alert()
SaveStatus
300ms
2000ms
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
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
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
No dependencies set.
The note is not visible to the blocked user.
概要
根据
/docs/design.md设计规范对全站前端进行审查,修复了所有不符合规范的样式,并做了一些 UX 改进。设计规范对齐 (Design Spec Compliance)
font-medium→font-normal,规范要求正文 400 字重grouphover — 标题 underline、箭头→、translate 动画,与设计示例一致text-lg,符合规范 Body 样式text-neutral-400→text-neutral-500(规范 Ash 色值)text-neutral-400→text-red-600(规范 Error 色值)green/yellow颜色反馈,改用黑白灰度(规范:摒弃所有非功能性色彩)green色#f6f8fa→#fafafa(规范 Vapor 色值)border-2 border-dashed→bordersolid 细线,更符合瑞士极简风格Bug 修复
router.push("/not-found")→notFound(),使用 Next.js 内置 not-found 机制images.remotePatterns,修复外部图片<Image>加载报错UX 改进
grid-cols-2→grid-cols-1 md:grid-cols-2alert()→SaveStatus组件,保持 UI 一致性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.tsxDesign 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 pressureView command line instructions
Checkout
From your project repository, check out a new branch and test the changes.