文章卡片 — 状态变体

共 12 个变体，覆盖技术/生活两种内容类型 × 6 个状态。用于开发对照和边界确认。

技术类文章卡片

技术 2026-06-28

Vue3 组合式 API 最佳实践总结

从 Options API 到 Composition API 的迁移经验，以及在实际项目中的最佳实践总结……

宁
宁白久
👁 1.2k 💬 18
默认
卡片正常展示，无交互
技术 2026-06-28

Vue3 组合式 API 最佳实践总结

从 Options API 到 Composition API 的迁移经验，以及在实际项目中的最佳实践总结……

宁
宁白久
👁 1.2k 💬 18
Hover 悬浮
鼠标移入，卡片上移 2px + 阴影加深
技术 2026-06-28

Vue3 组合式 API 最佳实践总结

从 Options API 到 Composition API 的迁移经验，以及在实际项目中的最佳实践总结……

宁
宁白久
👁 1.2k 💬 18
Pressed 按下
鼠标点击瞬间，缩小 0.98 + 蓝色边框
精选
技术 2026-06-20

从零搭建全栈项目：NestJS + Vue3 实战

一个完整的全栈项目搭建过程，从后端 API 设计到前端组件库集成……

宁
宁白久
👁 3.5k 💬 42
带"精选"标签
代表作/热门文章，右上角显示精选角标
置顶
技术 2026-05-01

博客使用指南 & 常见问题

欢迎使用良人伊欣博客，本文介绍了博客的使用方法、功能介绍以及常见问题解答……

宁
宁白久
👁 8.9k 💬 67
置顶
浅蓝渐变背景 + 置顶角标，始终显示在列表最前
技术 2026-06-25

深入理解 React Server Components 与服务端渲染的边界探索

React Server Components（RSC）是 React 生态系统中一个重要的新特性，它允许组件在服务端运行，减少客户端 JavaScript 的体积。本文将深入探讨 RSC 的原理、与 SSR 的区别，以及在实际项目中的应用场景和最佳实践……

宁
宁白久
👁 567 💬 5
长内容（标题+摘要截断）
标题和摘要超出最大行数，自动省略号截断

生活类文章卡片

生活 2026-06-27

周末去爬山，拍了好多好看的照片

天气特别好，山顶的风景超美，推荐大家有机会也去看看……

Q
刘小Q
👁 892 💬 24
默认
生活卡片用粉色系标签和作者头像
生活 2026-06-27

周末去爬山，拍了好多好看的照片

天气特别好，山顶的风景超美，推荐大家有机会也去看看……

Q
刘小Q
👁 892 💬 24
Hover 悬浮
与技术卡片相同的悬浮效果
生活 2026-06-27

周末去爬山，拍了好多好看的照片

天气特别好，山顶的风景超美，推荐大家有机会也去看看……

Q
刘小Q
👁 892 💬 24
Pressed 按下
粉色边框，缩小 0.98
精选
生活 2026-06-15

我们的三周年纪念日，记录一下

时间过得好快，已经在一起三年了。今天去了那家我们第一次约会的餐厅……

Q
刘小Q
👁 2.1k 💬 36
带"精选"标签
生活类代表作同样显示精选角标
置顶
生活 2026-01-01

认识我们的故事，从这里开始

很多人好奇我们是怎么认识的，今天就来写写我们的故事。第一次见面是在一个技术分享会上……

Q
刘小Q
👁 12k 💬 89
置顶
浅粉渐变背景 + 置顶角标
📸
生活 2026-06-22

海边日落，真的太美了

分享一组我们在海边拍的日落照片，每一张都是原图直出……

Q
刘小Q
👁 1.5k 💬 31
带封面图片
生活类文章可配封面图，图片在卡片顶部全宽展示

设计 Tokens 参考

Token 技术类 生活类 说明
内容类型色 #3B82F6 #EC4899 标签、边框、Pressed 状态
内容类型色/淡 #3B82F6/10 #EC4899/10 标签背景色
圆角 rounded-xl（12px） rounded-xl（12px） 卡片统一圆角
边框 border-[#e5e5e5] border-[#e5e5e5] 默认边框色
Hover 阴影 0 20px 25px -5px rgba(0,0,0,0.1) 悬浮效果，translateY(-2px)
Pressed 缩放 scale(0.98) 按下反馈
作者头像 蓝渐变（蓝400→蓝600） 粉渐变（粉400→粉600） 圆形，带作者姓名首字
精选角标 amber-50 bg + amber-600 text 右上角，与技术/生活类型无关