收敛首页筛选标签组件样式

This commit is contained in:
WuYongJie 2026-05-28 21:55:17 +08:00
parent eda68b6c90
commit da8580659c
2 changed files with 4 additions and 3 deletions

View File

@ -154,7 +154,7 @@ function FieldTagGroup({
<div
ref={containerRef}
className={cn(
'flex flex-wrap gap-2 transition-all duration-200',
'flex flex-wrap gap-2 transition-colors duration-200',
// 响应式:小屏幕时横向滚动
'sm:flex-wrap',
'max-sm:flex-nowrap max-sm:overflow-x-auto max-sm:pb-2 max-sm:-mx-2 max-sm:px-2',
@ -202,7 +202,7 @@ function FieldTagGroup({
<button
onClick={() => setIsExpanded(!isExpanded)}
className={cn(
'px-3 py-1 text-xs font-medium rounded-full border transition-all duration-200',
'px-3 py-1 text-xs font-medium rounded-md border transition-colors duration-200',
'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400',
'border-slate-200 dark:border-slate-700',
'hover:bg-slate-200 dark:hover:bg-slate-700',
@ -246,7 +246,7 @@ export default function HomeFilterTags({
<div className="h-4 w-20 bg-slate-200 dark:bg-slate-700 rounded" />
<div className="flex gap-2">
{[1, 2, 3, 4, 5].map((j) => (
<div key={j} className="h-7 w-16 bg-slate-200 dark:bg-slate-700 rounded-full" />
<div key={j} className="h-7 w-16 bg-slate-200 dark:bg-slate-700 rounded-md" />
))}
</div>
</div>

View File

@ -1048,6 +1048,7 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器
- `app/page.tsx:400`:精品、下载榜、点赞榜仍作为素材卡片状态信息保留,但样式已收为信息区里的中性小标签。
- `app/page.tsx`:排序方式已从大号胶囊按钮改为普通矩形按钮组。
- `app/page.tsx`:首页素材类型筛选和筛选弹窗内选项已从胶囊按钮、hover 滑动显示数量和阴影状态,收为普通矩形按钮;数量默认稳定显示,不再依赖鼠标悬停。
- `components/HomeFilterTags.tsx`:筛选标签组件剩余的展开按钮和加载骨架已从胶囊圆角、`transition-all` 收为普通 `rounded-md` 和颜色过渡,避免后续复用时把胶囊样式带回首页。
- `app/page.tsx`:首页“上传素材”主按钮已去掉硬编码靛蓝主按钮样式,改为跟随当前主题色的普通矩形主操作按钮。
- `app/page.tsx`:首页音频素材卡片已从大圆形播放按钮和圆形频谱背景,收为小图标、文件名、普通进度条和矩形播放按钮。
- `app/page.tsx`:首页素材卡片已从大圆角、轻阴影和黑色半透明胶囊收为普通 `rounded-lg` 边框卡片、中性标签和弱化的素材型号标识。