Ma/LunaTV
1
0
Fork 0
mirror of https://github.com/MoonTechLab/LunaTV.git synced 2026-02-21 17:24:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add hover tooltip

Browse Source
This commit is contained in:
shinya
2025-07-13 18:33:13 +08:00
parent 9749198479
commit e91d00ec6d
2 changed files with 24 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/EpisodeSelector.tsx
View File

@@ -427,7 +427,7 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
if (!aIsCurrent && bIsCurrent) return 1;
return 0;
})
.map((source) => {
.map((source, index) => {
const isCurrentSource =
source.source?.toString() === currentSource?.toString() &&
source.id?.toString() === currentId?.toString();
@@ -437,7 +437,7 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
onClick={() =>
!isCurrentSource && handleSourceClick(source)
}
className={`flex items-start gap-3 p-3 rounded-lg cursor-pointer transition-all duration-200
className={`flex items-start gap-3 p-3 rounded-lg cursor-pointer transition-all duration-200 relative
${
isCurrentSource
? 'bg-green-500/10 dark:bg-green-500/20 border-green-500/30 border'
@@ -463,9 +463,18 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
<div className='flex-1 min-w-0 flex flex-col justify-between h-20'>
{/* 标题和分辨率 - 顶部 */}
<div className='flex items-start justify-between gap-2 h-6'>
<h3 className='font-medium text-base truncate text-gray-900 dark:text-gray-100 leading-none'>
{source.title}
</h3>
<div className='flex-1 relative group/title'>
<h3 className='font-medium text-base truncate text-gray-900 dark:text-gray-100 leading-none'>
{source.title}
</h3>
{/* 标题级别的 tooltip - 第一个元素不显示 */}
{index !== 0 && (
<div className='absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded-md shadow-lg opacity-0 invisible group-hover/title:opacity-100 group-hover/title:visible transition-all duration-200 ease-out delay-100 whitespace-nowrap z-[9999] pointer-events-none'>
{source.title}
<div className='absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-800'></div>
</div>
)}
</div>
{(() => {
const sourceKey = `${source.source}-${source.id}`;
const videoInfo = videoInfoMap.get(sourceKey);

13
src/components/VideoCard.tsx
View File

@@ -337,9 +337,16 @@ export default function VideoCard({
)}
{/* 标题与来源信息 - 改进颜色过渡和延迟 */}
<span className='mt-2 block text-center text-sm font-semibold truncate text-gray-900 dark:text-gray-100 transition-all duration-300 ease-out group-hover:text-green-600 dark:group-hover:text-green-400'>
{actualTitle}
</span>
<div className='relative'>
<span className='mt-2 block text-center text-sm font-semibold truncate text-gray-900 dark:text-gray-100 transition-all duration-300 ease-out group-hover:text-green-600 dark:group-hover:text-green-400 peer'>
{actualTitle}
</span>
{/* 自定义 tooltip */}
<div className='absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded-md shadow-lg opacity-0 invisible peer-hover:opacity-100 peer-hover:visible transition-all duration-200 ease-out delay-100 whitespace-nowrap z-50 pointer-events-none'>
{actualTitle}
<div className='absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-800'></div>
</div>
</div>
{config.showSourceName && source_name && (
<span className='block text-center text-xs text-gray-500 dark:text-gray-400 mt-1 transition-all duration-300 ease-out delay-75 group-hover:text-green-500 dark:group-hover:text-green-500 group-hover:scale-105'>
<span className='inline-block border rounded px-2 py-0.5 border-gray-500/60 dark:border-gray-400/60 transition-all duration-300 ease-out group-hover:border-green-500/60'>