小红书风格作者卡片需解决头像昵称对齐不稳、关注状态同步难、多端行高不一致三大问题；结构用view+text组合，name与verified分设text，follow-btn用button并设line-height，状态须服务端实时联动且onshow重拉详情。
uni-app 实现小红书风格的笔记详情页底部作者信息卡片，核心不是“堆样式”，而是解决三个实际问题：**头像与昵称对齐不稳、关注按钮状态同步难、多端（尤其小程序）行高/间距渲染不一致**。直接套用 flex 布局容易在微信小程序里出现文字截断或图标错位，得针对性处理。
作者卡片结构必须用 view + text 组合，别用 rich-text
很多开发者一上来就用 rich-text 渲染作者名+认证标，结果在 H5 正常、小程序里文字换行错乱，甚至触发 Maximum call stack size exceeded 内存溢出错误（线上环境尤其明显）。官方 rich-text 对嵌套 inline 标签兼容性差，且无法精确控制单行高度。
- 正确写法：
<view class="author-card"><image :src="note.authorAvatar" class="avatar"></image><view class="info"><text class="name">{{ note.authorName }}</text><text v-if="note.isVerified" class="verified">✓</text></view><button class="follow-btn">{{ isFollowing ? '已关注' : '关注' }}</button></view> -
name和verified必须分两个text，不能合并进一个text里加 icon —— 小程序里 Unicode ✅ 图标在某些安卓机上会撑开整行高度 -
follow-btn用button而非view，否则 iOS 微信小程序点击无反馈，且无法触发真机 touch 状态
flex 布局要禁用 flex-wrap，并手动设 line-height
作者名长度不可控（比如“阿宁今天也在努力搬砖_2026”），默认 flex: 1 容易让按钮被挤到下一行，或昵称文字在窄屏上折两行——小红书 UI 要求作者名始终单行居中对齐头像，按钮固定右对齐。
- 关键 CSS：
.author-card { display: flex; align-items: center; padding: 20rpx 30rpx; background: #fff; } .avatar { width: 64rpx; height: 64rpx; border-radius: 50%; margin-right: 20rpx; } .info { flex: 1; font-size: 28rpx; line-height: 40rpx; } .name { display: inline-block; max-width: 300rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .follow-btn { font-size: 24rpx; padding: 8rpx 24rpx; height: 48rpx; line-height: 48rpx; } -
line-height必须显式设为和元素高度一致（如48rpx），否则 iOS 小程序里按钮文字会垂直偏上 -
.name的max-width建议用rpx而非vw，H5 和小程序计算逻辑不同，vw在某些安卓 WebView 里失效
关注按钮状态必须和服务端实时联动，不能只靠本地 toggle
用户点“关注”后，如果只改本地 isFollowing，再刷新页面或切后台重进，状态就丢了。小红书详情页要求“关注/取消关注”操作后，卡片立即响应，且下次进入仍保持最新状态。
- 每次进入详情页，必须调用一次
getNoteDetail接口，其中返回字段应含is_following: true/false，而不是靠全局用户关系缓存猜测 - 点击按钮时，先发请求：
updateFollow({ authorId: note.authorId, action: isFollowing ? 'cancel' : 'follow' })，成功后再更新本地isFollowing - 避免连续点击：按钮加
:disabled="loading"，并在请求前后置loading = true/false，否则用户连点两次可能发两个请求，导致状态翻转异常
isFollowing 存进 vuex 或 uni.setStorageSync，但更稳妥的是每次 onShow 都重新拉一次笔记详情。小红书自己也是这么做的：你切到别的 tab 再切回来，作者卡片的关注状态永远是服务端最新值。
