457 lines
9.2 KiB
Vue
457 lines
9.2 KiB
Vue
<template>
|
||
<article class="mk-card" ref="cardRef" :data-transition-slug="slug">
|
||
<!-- 封面 -->
|
||
<div class="mk-cover" :data-hero-cover="slug">
|
||
<img :src="cover" :alt="title || 'cover'" class="mk-img" loading="lazy" />
|
||
<!-- 悬浮层（纯 CSS 控制显示） -->
|
||
<div class="mk-overlay">
|
||
<div class="mk-btns">
|
||
<a
|
||
v-if="visitHref"
|
||
:href="visitHref"
|
||
class="mk-btn"
|
||
target="_blank"
|
||
rel="noopener"
|
||
>
|
||
问
|
||
</a>
|
||
<NuxtLink
|
||
v-if="detailHref"
|
||
:to="detailHref"
|
||
class="mk-btn mk-btn--ghost"
|
||
@click="handleDetailClick"
|
||
>
|
||
详情
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 标题 -->
|
||
<h3 class="mk-title" :title="title" :data-hero-title="slug">
|
||
{{ title }}
|
||
</h3>
|
||
|
||
<!-- 标签 -->
|
||
<div class="mk-tags" v-if="tags?.length">
|
||
<span
|
||
v-for="t in tags"
|
||
:key="t"
|
||
class="mk-tag"
|
||
:class="{ 'mk-tag--rainbow': isRecTag(t) }"
|
||
>
|
||
{{ t }}
|
||
</span>
|
||
</div>
|
||
|
||
<!-- 时间 -->
|
||
<div class="mk-time" v-if="createdAt">
|
||
发布：{{ fdate(createdAt) }}
|
||
</div>
|
||
|
||
<!-- 底部信息 -->
|
||
<footer class="mk-meta">
|
||
<div class="mk-owner">
|
||
<img v-if="ownerAvatar" :src="ownerAvatar" class="mk-avatar" alt="" />
|
||
<span class="mk-owner-name" :title="ownerName">{{ ownerName }}</span>
|
||
</div>
|
||
|
||
<div class="mk-stats">
|
||
<span class="mk-stat">
|
||
<!-- 眼睛 -->
|
||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||
<path
|
||
d="M12 5c5.5 0 9.6 4.1 10.7 6.4a1.9 1.9 0 0 1 0 1.3C21.6 15.9 17.5 20 12 20S2.4 15.9 1.3 12.7a1.9 1.9 0 0 1 0-1.3C2.4 9.1 6.5 5 12 5Zm0 3.2a4.8 4.8 0 1 0 0 9.6 4.8 4.8 0 0 0 0-9.6Zm0 2.4a2.4 2.4 0 1 1 0 4.8 2.4 2.4 0 0 1 0-4.8Z"
|
||
/>
|
||
</svg>
|
||
{{ nfmt(views) }}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
class="mk-stat mk-like"
|
||
:class="{ 'mk-like--active': favorited }"
|
||
@click.stop="emit('toggle-like')"
|
||
:aria-pressed="favorited ? 'true' : 'false'"
|
||
>
|
||
<!-- 心形 -->
|
||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||
<path
|
||
d="M12 21s-6.7-4.5-9.4-7.2A6 6 0 1 1 12 6a6 6 0 1 1 9.4 7.8C18.7 16.5 12 21 12 21Z"
|
||
/>
|
||
</svg>
|
||
{{ nfmt(likes) }}
|
||
</button>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||
import { useSharedTransition } from '@/composables/useSharedTransition'
|
||
|
||
const emit = defineEmits<{
|
||
(e: 'toggle-like'): void
|
||
(e: 'view'): void
|
||
}>()
|
||
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
slug?: string
|
||
cover: string
|
||
title: string
|
||
tags?: string[]
|
||
ownerName?: string
|
||
ownerAvatar?: string
|
||
views?: number
|
||
likes?: number
|
||
favorited?: boolean
|
||
/** 外链访问按钮 */
|
||
visitHref?: string
|
||
/** 站内详情页路由（NuxtLink） */
|
||
detailHref?: string | Record<string, any>
|
||
/** 创建时间 */
|
||
createdAt?: string
|
||
}>(),
|
||
{
|
||
slug: '',
|
||
tags: () => [],
|
||
ownerName: '秒哒官方',
|
||
ownerAvatar: '',
|
||
views: 0,
|
||
likes: 0,
|
||
favorited: false,
|
||
createdAt: '',
|
||
}
|
||
)
|
||
|
||
const cardRef = ref<HTMLElement | null>(null)
|
||
const transition = useSharedTransition()
|
||
|
||
onMounted(() => {
|
||
if (cardRef.value && props.slug) {
|
||
// 标记卡片位置用于转场动画
|
||
transition.markSource(props.slug, cardRef.value)
|
||
}
|
||
})
|
||
|
||
onBeforeUnmount(() => {
|
||
if (cardRef.value && props.slug) {
|
||
// 更新卡片位置（用户可能滚动了页面）
|
||
transition.markSource(props.slug, cardRef.value)
|
||
}
|
||
})
|
||
|
||
function handleDetailClick() {
|
||
// 在导航前标记当前卡片位置
|
||
if (cardRef.value && props.slug) {
|
||
transition.markSource(props.slug, cardRef.value)
|
||
}
|
||
emit('view')
|
||
}
|
||
|
||
/** 简单的 1200 -> 1.2K 格式化 */
|
||
function nfmt(n?: number) {
|
||
const v = n ?? 0
|
||
if (v >= 1_000_000)
|
||
return (v / 1_000_000).toFixed(1).replace(/\.0$/, '') + 'M'
|
||
if (v >= 1_000) return (v / 1_000).toFixed(1).replace(/\.0$/, '') + 'K'
|
||
return String(v)
|
||
}
|
||
|
||
/** 是否为"推荐类"标签（炫彩） */
|
||
function isRecTag(tag?: string) {
|
||
if (!tag) return false
|
||
const t = String(tag).trim().toLowerCase()
|
||
// 兼容：推荐 / 精选 / 热门 / 置顶 / rec（包含这些词也算）
|
||
const keys = ['推荐', '精选', '热门', '置顶', 'rec']
|
||
return keys.some(k => t === k.toLowerCase() || t.includes(k.toLowerCase()))
|
||
}
|
||
|
||
function fdate(v?: string) {
|
||
if (!v) return ''
|
||
try {
|
||
const d = new Date(v)
|
||
if (Number.isNaN(d.getTime())) return ''
|
||
return d.toLocaleDateString()
|
||
} catch {
|
||
return ''
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 容器 */
|
||
.mk-card {
|
||
--radius: 16px;
|
||
--shadow: 0 6px 20px rgba(16, 24, 40, 0.08);
|
||
--shadow-hover: 0 12px 32px rgba(16, 24, 40, 0.14);
|
||
|
||
/* 与首页保持一致的三原色渐变（紫→靛蓝→蓝→青） */
|
||
--rainbow: linear-gradient(
|
||
90deg,
|
||
#7c3aed 0%,
|
||
#6366f1 33%,
|
||
#60a5fa 66%,
|
||
#22d3ee 100%
|
||
);
|
||
|
||
background: #fff;
|
||
border-radius: var(--radius);
|
||
box-shadow: var(--shadow);
|
||
overflow: hidden;
|
||
transition: box-shadow 0.25s ease, transform 0.25s ease;
|
||
}
|
||
|
||
.mk-card:hover,
|
||
.mk-card:focus-within {
|
||
box-shadow: var(--shadow-hover);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* 封面与悬浮层 */
|
||
.mk-cover {
|
||
position: relative;
|
||
aspect-ratio: 16 / 9;
|
||
overflow: hidden;
|
||
border-radius: calc(var(--radius) - 2px);
|
||
margin: 12px 12px 10px;
|
||
}
|
||
|
||
.mk-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
transform: scale(1.001);
|
||
transition: transform 0.35s ease;
|
||
border-radius: inherit;
|
||
}
|
||
|
||
.mk-card:hover .mk-img,
|
||
.mk-card:focus-within .mk-img {
|
||
transform: scale(1.03);
|
||
}
|
||
|
||
/* 渐变遮罩 + 按钮 */
|
||
.mk-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: grid;
|
||
place-items: center;
|
||
padding: 16px;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(0, 0, 0, 0) 30%,
|
||
rgba(0, 0, 0, 0.45) 100%
|
||
);
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 0.25s ease;
|
||
}
|
||
|
||
.mk-card:hover .mk-overlay,
|
||
.mk-card:focus-within .mk-overlay {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.mk-btns {
|
||
display: flex;
|
||
gap: 14px;
|
||
transform: translateY(8px);
|
||
transition: transform 0.25s ease 0.02s;
|
||
}
|
||
|
||
.mk-card:hover .mk-overlay .mk-btns,
|
||
.mk-card:focus-within .mk-overlay .mk-btns {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.mk-btn {
|
||
min-width: 140px;
|
||
height: 44px;
|
||
padding: 0 18px;
|
||
border-radius: 12px;
|
||
border: 1px solid #111827;
|
||
background: #111827;
|
||
color: #fff;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 600;
|
||
letter-spacing: 0.5px;
|
||
text-decoration: none;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.mk-btn:hover {
|
||
filter: brightness(1.07);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.mk-btn--ghost {
|
||
background: rgba(255, 255, 255, 0.15);
|
||
border-color: rgba(255, 255, 255, 0.65);
|
||
color: #fff;
|
||
}
|
||
|
||
/* 标题（单行省略） */
|
||
.mk-title {
|
||
margin: 0 16px;
|
||
font-size: 18px;
|
||
line-height: 1.5;
|
||
font-weight: 700;
|
||
color: #111827;
|
||
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* 标签 */
|
||
.mk-tags {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
padding: 8px 16px 0;
|
||
}
|
||
|
||
.mk-tag {
|
||
font-size: 12px;
|
||
color: #111827;
|
||
background: #f3f4f6;
|
||
border: 1px solid #e5e7eb;
|
||
padding: 2px 8px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
/* 炫彩"推荐"标签 */
|
||
.mk-tag--rainbow {
|
||
color: #fff;
|
||
border: none;
|
||
background-image: var(--rainbow);
|
||
background-size: 220% 220%;
|
||
animation: mkRainbowShift 6s ease infinite;
|
||
box-shadow: 0 6px 14px rgba(99, 102, 241, 0.22);
|
||
}
|
||
|
||
.mk-tag--rainbow:hover {
|
||
filter: brightness(1.05);
|
||
}
|
||
|
||
/* 降低动画偏好时，禁用流动，仅保留渐变底色 */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.mk-tag--rainbow {
|
||
animation: none;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
@keyframes mkRainbowShift {
|
||
0% {
|
||
background-position: 0% 50%;
|
||
}
|
||
50% {
|
||
background-position: 100% 50%;
|
||
}
|
||
100% {
|
||
background-position: 0% 50%;
|
||
}
|
||
}
|
||
|
||
/* 时间 */
|
||
.mk-time {
|
||
margin: 4px 16px 0;
|
||
color: #6b7280;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* 底部信息 */
|
||
.mk-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px 16px 14px;
|
||
}
|
||
|
||
.mk-owner {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.mk-avatar {
|
||
width: 22px;
|
||
height: 22px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
background: #eef2ff;
|
||
}
|
||
|
||
.mk-owner-name {
|
||
font-size: 14px;
|
||
color: #6b7280;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* 统计 */
|
||
.mk-stats {
|
||
display: inline-flex;
|
||
gap: 16px;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.mk-stat {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.mk-stat svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
fill: currentColor;
|
||
}
|
||
|
||
.mk-like {
|
||
background: transparent;
|
||
border: none;
|
||
color: inherit;
|
||
padding: 0;
|
||
cursor: pointer;
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.mk-like svg {
|
||
transition: transform 0.15s ease;
|
||
}
|
||
|
||
.mk-like:hover svg {
|
||
transform: scale(1.08);
|
||
}
|
||
|
||
.mk-like--active {
|
||
color: #e11d48;
|
||
}
|
||
|
||
.mk-like--active svg {
|
||
fill: currentColor;
|
||
}
|
||
|
||
/* 小屏优化 */
|
||
@media (max-width: 640px) {
|
||
.mk-btn {
|
||
min-width: 110px;
|
||
height: 40px;
|
||
}
|
||
|
||
.mk-title {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
</style>
|