mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-07-11 21:03:37 +08:00
alger
3e6f981379
- SongItem 5 变体容器/图片圆角统一为 rounded-xl(12px)： BaseSongItem(rounded-3xl→xl) / Standard(img rounded-2xl→xl) / Compact(rounded-lg→xl) / List(rounded-lg→xl) / Mini(rounded-2xl→xl) - 抽象 HistoryItem.vue：AlbumItem 和 PlaylistItem 提取共享 UI 组件， 消除 ~80 行重复样式代码，同时迁移至内联 Tailwind class - 新增 EmptyState.vue：统一空状态组件（icon + text，暗色模式完整适配） - 动画时长：SearchItem 图片 hover duration-700→duration-500 - MobilePlayBar：进度条颜色 Spotify #1ed760→项目主色 #22c55e
48 lines
1.2 KiB
Vue
48 lines
1.2 KiB
Vue
<template>
|
|
<history-item
|
|
:image-url="getImgUrl(item.coverImgUrl || item.picUrl || '', '100y100')"
|
|
:name="item.name"
|
|
:description="getDescription()"
|
|
:count="item.count"
|
|
:show-count="showCount"
|
|
:show-delete="showDelete"
|
|
@click="emit('click', item)"
|
|
@delete="emit('delete', item)"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import HistoryItem from '@/components/common/HistoryItem.vue';
|
|
import type { PlaylistHistoryItem } from '@/store/modules/playHistory';
|
|
import { getImgUrl } from '@/utils';
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
item: PlaylistHistoryItem;
|
|
showCount?: boolean;
|
|
showDelete?: boolean;
|
|
}>(),
|
|
{
|
|
showCount: false,
|
|
showDelete: false
|
|
}
|
|
);
|
|
|
|
const emit = defineEmits<{
|
|
click: [item: PlaylistHistoryItem];
|
|
delete: [item: PlaylistHistoryItem];
|
|
}>();
|
|
|
|
const { t } = useI18n();
|
|
|
|
const getDescription = () => {
|
|
const parts: string[] = [];
|
|
if (props.item.trackCount !== undefined)
|
|
parts.push(t('user.playlist.trackCount', { count: props.item.trackCount }));
|
|
if (props.item.creator?.nickname) parts.push(props.item.creator.nickname);
|
|
return parts.join(' · ') || t('history.noDescription');
|
|
};
|
|
</script>
|