调整首页榜单标签位置

This commit is contained in:
WuYongJie 2026-05-28 21:34:08 +08:00
parent 20c1fc53d1
commit 1920c05f51
2 changed files with 12 additions and 18 deletions

View File

@ -2110,22 +2110,8 @@ export default function Home() {
<span>{videoStatusMeta?.label || '预览生成中'}</span>
</div>
)}
{/* 榜单角标和SPU型号 - 使用z-20确保在音频/视频覆盖层之上 */}
{/* 型号标识 - 使用z-20确保在音频/视频覆盖层之上 */}
<div className="absolute top-3 left-3 flex flex-col items-start gap-1.5 z-20">
{rankingBadges.length > 0 && (
<div className="flex flex-wrap gap-1">
{rankingBadges.map((badge) => (
<span
key={`card-badge-${material.id}-${badge.label}`}
className={cn(
'px-2 py-0.5 rounded-md border border-slate-200 bg-white/90 text-[11px] font-medium text-slate-700 dark:border-slate-700 dark:bg-slate-900/90 dark:text-slate-200'
)}
>
{badge.label}
</span>
))}
</div>
)}
{/* SPU型号 */}
<div className="rounded-md border border-slate-200 bg-white/90 text-slate-800 dark:border-slate-700 dark:bg-slate-900/90 dark:text-slate-100 px-2 py-1 text-xs font-medium">
{material.productModel}
@ -2177,6 +2163,14 @@ export default function Home() {
<div className="p-4 flex flex-col flex-1">
<div className="flex items-center gap-1 mb-2 overflow-hidden whitespace-nowrap">
{rankingBadges.length > 0 && rankingBadges.map((badge) => (
<span
key={`card-badge-${material.id}-${badge.label}`}
className="shrink-0 rounded-md border border-slate-200 bg-slate-50 px-2 py-0.5 text-[11px] font-medium text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"
>
{badge.label}
</span>
))}
{getMaterialTemplateLabel(material) && (
<Tag
size="xs"

View File

@ -1045,7 +1045,7 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器
证据:
- `app/page.tsx:400`:精品、下载榜、点赞榜使用多段渐变角标。
- `app/page.tsx:400`:精品、下载榜、点赞榜仍作为素材卡片状态信息保留,但样式已收为信息区里的中性小标签。
- `app/page.tsx`:排序方式已从大号胶囊按钮改为普通矩形按钮组。
- `app/page.tsx`:首页素材类型筛选和筛选弹窗内选项已从胶囊按钮、hover 滑动显示数量和阴影状态,收为普通矩形按钮;数量默认稳定显示,不再依赖鼠标悬停。
- `app/page.tsx`:首页“上传素材”主按钮已去掉硬编码靛蓝主按钮样式,改为跟随当前主题色的普通矩形主操作按钮。
@ -1053,14 +1053,14 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器
- `app/page.tsx`:首页素材卡片已从大圆角、轻阴影和黑色半透明胶囊收为普通 `rounded-lg` 边框卡片、中性标签和弱化的素材型号标识。
- `app/profile/page.tsx`:个人页“我的素材 / 我的点赞 / 浏览历史”卡片已从大圆角和黑色渐变覆盖层收为普通边框卡片和浅底信息条。
- `components/RankingPanel.tsx`:浮动榜单面板已移除毛玻璃、重阴影、超大圆角和前三名金色卡片感,改为普通边框小面板。
- `app/page.tsx`:榜单角标仍叠在素材封面上,但已从黑色高对比胶囊改为浅底中性标签,后续可继续评估是否移动到卡片信息区。
- `app/page.tsx`:榜单/精品信息已从素材封面移到卡片信息区,并使用浅底中性小标签,避免长期遮挡素材图。
- `app/page.tsx`、`components/MaterialActionButtons.tsx`:素材卡片悬浮点赞按钮已是矩形轻边框样式;公共素材操作按钮也从 `rounded-xl` 和蓝色下载进度条收为 `rounded-md` 与中性进度条。
- `app/page.tsx`:首页空状态已从“快来上传第一个吧”改为“暂无素材,请上传素材”;列表底部已改为“加载更多素材 / 暂无更多素材”。
建议动作:
- 已完成第一轮:素材卡片改为轻边框、少阴影、不上浮,排序控件、筛选按钮和上传按钮改成普通按钮组。
- 仍需继续:榜单/精品信息最好进一步移到卡片信息区或排序条件,不长期压在素材封面上。
- 已完成:榜单/精品信息已从素材封面移到卡片信息区,不再长期压在素材图上。
- 已完成:工作状态文案改为“加载中”“加载更多素材”“暂无更多素材”等朴素表达。
### P2-09 上传、编辑、预览弹窗过圆、过亮、说明过多