浅念
cdead49838
Task 10 viewer 互动化： - 点赞：useLikes 批次状态机（500ms 防抖 / 5 次满额即冲 / 失败同 batchId 退避重试 3 次后回滚丢弃），乐观计数 + 服务端 total 权威校准 （countVersion 单调），大图与格子双入口； - WS 实时：RealtimeClient 纯状态机（半频心跳、指数退避重连、三败降级、 重连成功 resync 第 1 页重取），消息路由器做 likes.burst 自身过滤 （originBatchIds 求交）、隐藏页暂停与减少动画下仅校准不出气泡； photo.hidden/deleted 即时移出序列并回退邻居大图；降级后 8s 轮询接管； - 浏览上报：visitorId 跨标签 BroadcastChannel first-writer-wins 协调， 可见时上报、requestId 持久幂等、网络失败指数重试； - 排序：最新/热门 chips（热门走 ov 冷快照），大图打开期间禁用切换； 顶栏「减少动画」偏好开关； - 契约包新增 ./realtime 子路径出口（浏览器面不可引桶出口——其连带 internal-sync 的 node:crypto 会被 Vite 外置化致整页崩溃）； - e2e 注入钩子 __viewerWsUrl/__viewerWsRetryBaseMs/__viewerRealtimePollMs/ __viewerBubbleMs 与 .activity[data-connection] 连接态锚。 vitest：viewer 105（新增 36：likes 批次 8、visitor 协调 5、上报门控 4、 路由 8、WS 状态机 7、排序 4）；Playwright：viewer 21（新增 likes.spec 7、 journey 补互动腿断言）。 Co-Authored-By: Claude Code <noreply@anthropic.com>
88 lines
2.0 KiB
Vue
88 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n';
|
|
import type { LikeBubble } from '../realtime/useAlbumRealtime';
|
|
|
|
// 他人点赞气泡（Task 10）：右下角浮层，含被赞照片缩略图 + ♥ +delta；点击打开
|
|
// 该照片大图（定位）。生成/消散/清空（页面隐藏）由 useAlbumRealtime 管理，
|
|
// 本组件纯展示。减少动画/不可见时根本不会收到气泡（router 门禁）。
|
|
defineProps<{
|
|
bubbles: LikeBubble[];
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
open: [photoId: string];
|
|
}>();
|
|
|
|
const { t } = useI18n();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="like-bubbles" aria-live="polite">
|
|
<button
|
|
v-for="bubble in bubbles"
|
|
:key="bubble.key"
|
|
type="button"
|
|
class="like-bubble"
|
|
:aria-label="t('viewer.bubbleOpen')"
|
|
@click="emit('open', bubble.photoId)"
|
|
>
|
|
<img v-if="bubble.thumbUrl !== null" class="bubble-thumb" :src="bubble.thumbUrl" alt="" loading="lazy">
|
|
<span class="bubble-heart" aria-hidden="true">♥</span>
|
|
<span class="bubble-delta" aria-hidden="true">+{{ bubble.delta }}</span>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* 极简基线样式：视觉打磨留待 P4a。 */
|
|
.like-bubbles {
|
|
position: fixed;
|
|
right: 16px;
|
|
bottom: 24px;
|
|
z-index: 105;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
pointer-events: none;
|
|
}
|
|
.like-bubble {
|
|
pointer-events: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border: 1px solid rgba(255, 255, 255, 0.35);
|
|
border-radius: 10px;
|
|
background: rgba(17, 24, 39, 0.88);
|
|
color: #f9fafb;
|
|
padding: 6px 12px 6px 6px;
|
|
cursor: pointer;
|
|
animation: bubble-rise 300ms ease-out;
|
|
}
|
|
.bubble-thumb {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 6px;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
.bubble-heart {
|
|
color: #ef4444;
|
|
}
|
|
.bubble-delta {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
@keyframes bubble-rise {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(12px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.viewer-reduced-motion .like-bubble {
|
|
animation: none;
|
|
}
|
|
</style>
|