收敛首页音频素材卡片
This commit is contained in:
WuYongJie
parent
ed3eb6f72e
commit
5d86c2fab5
65
app/page.tsx
65
app/page.tsx
@ -6,7 +6,6 @@ import { useRouter, useSearchParams } from 'next/navigation'
|
||||
import Image from 'next/image'
|
||||
import { format } from 'date-fns'
|
||||
import UploadModal from '@/components/UploadModal'
|
||||
import AudioVisualizer from '@/components/AudioVisualizer'
|
||||
import Header from '@/components/Header'
|
||||
import ChangePasswordModal from '@/components/ChangePasswordModal'
|
||||
import MaterialPreviewModal from '@/components/MaterialPreviewModal'
|
||||
@ -2033,64 +2032,46 @@ export default function Home() {
|
||||
/>
|
||||
)
|
||||
) : isAudioMaterial ? (
|
||||
// 音频素材卡片 - 支持卡片内播放 + 圆形频谱可视化
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center bg-slate-800 overflow-hidden">
|
||||
{/* 圆形频谱可视化背景 - 只在播放时显示 */}
|
||||
{playingAudioId === material.id && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<AudioVisualizer
|
||||
audioElement={audioRef.current}
|
||||
isPlaying={true}
|
||||
size="sm"
|
||||
coverImage={null}
|
||||
showCoverOnPause={false}
|
||||
<div className="absolute inset-0 flex flex-col justify-between bg-slate-100 p-4 dark:bg-slate-800">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900">
|
||||
<svg className="h-5 w-5 text-slate-500 dark:text-slate-300" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="line-clamp-2 text-sm font-medium text-slate-900 dark:text-white">{material.productModel}</p>
|
||||
<p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
|
||||
{material.audioDuration || '音频素材'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div className="h-1.5 overflow-hidden rounded bg-slate-200 dark:bg-slate-700">
|
||||
<div
|
||||
className="h-full bg-slate-500 transition-[width] duration-100 dark:bg-slate-400"
|
||||
style={{ width: playingAudioId === material.id ? `${audioProgress}%` : '0%' }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{/* 播放进度条（底部） */}
|
||||
{playingAudioId === material.id && (
|
||||
<div className="absolute bottom-0 left-0 right-0 h-1 bg-slate-700 z-20">
|
||||
<div
|
||||
className="h-full bg-slate-400 transition-all duration-100"
|
||||
style={{ width: `${audioProgress}%` }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{/* 信息覆盖层 */}
|
||||
<div className="absolute inset-0 z-10 flex flex-col items-center justify-center pointer-events-none">
|
||||
{/* 播放/暂停按钮 */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleAudioPlay(material.id, audioUrl)
|
||||
}}
|
||||
className={cn(
|
||||
"w-14 h-14 rounded-full flex items-center justify-center border transition-colors pointer-events-auto",
|
||||
playingAudioId === material.id
|
||||
? "bg-white/30 border-white/50 hover:bg-white/40"
|
||||
: "bg-white/20 border-white/30 hover:bg-white/30"
|
||||
)}
|
||||
className="inline-flex h-9 items-center gap-2 rounded-md border border-slate-300 bg-white px-3 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
>
|
||||
{playingAudioId === material.id ? (
|
||||
<svg className="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-7 h-7 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
|
||||
<svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
)}
|
||||
<span>{playingAudioId === material.id ? '暂停' : '播放'}</span>
|
||||
</button>
|
||||
{/* 音频名称 - 只在未播放时显示 */}
|
||||
{playingAudioId !== material.id && (
|
||||
<>
|
||||
<p className="text-white text-sm font-medium text-center px-4 line-clamp-1 mt-3">{material.productModel}</p>
|
||||
{material.audioDuration && (
|
||||
<p className="text-white/80 text-xs mt-1">{material.audioDuration}</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@ -1046,6 +1046,7 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器
|
||||
- `app/page.tsx:400`：精品、下载榜、点赞榜使用多段渐变角标。
|
||||
- `app/page.tsx`：排序方式已从大号胶囊按钮改为普通矩形按钮组。
|
||||
- `app/page.tsx`：首页素材类型筛选和筛选弹窗内选项已从胶囊按钮、hover 滑动显示数量和阴影状态，收为普通矩形按钮；数量默认稳定显示，不再依赖鼠标悬停。
|
||||
- `app/page.tsx`：首页音频素材卡片已从大圆形播放按钮和圆形频谱背景，收为小图标、文件名、普通进度条和矩形播放按钮。
|
||||
- `app/page.tsx`：首页素材卡片已从大圆角、轻阴影和黑色半透明胶囊收为普通 `rounded-lg` 边框卡片、中性标签和弱化的素材型号标识。
|
||||
- `app/profile/page.tsx`：个人页“我的素材 / 我的点赞 / 浏览历史”卡片已从大圆角和黑色渐变覆盖层收为普通边框卡片和浅底信息条。
|
||||
- `components/RankingPanel.tsx`：浮动榜单面板已移除毛玻璃、重阴影、超大圆角和前三名金色卡片感，改为普通边框小面板。
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user