HeFanyang/chat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.7

Browse Source
This commit is contained in:
hefanyang
2026-06-14 09:25:59 +08:00
parent a0f441d8ae
commit 6fbf610277
39 changed files with 2492 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.vue
+4
View File
@@ -4,6 +4,8 @@
<n-message-provider>
<n-dialog-provider>
<router-view />
<EchoLayer />
<FlashLayer />
</n-dialog-provider>
</n-message-provider>
</n-notification-provider>
@@ -14,6 +16,8 @@
import { darkTheme } from 'naive-ui'
import type { GlobalThemeOverrides } from 'naive-ui'
import { useUiStore } from '@/stores/ui'
import EchoLayer from '@/components/EchoLayer.vue'
import FlashLayer from '@/components/FlashLayer.vue'
const uiStore = useUiStore()
frontend/src/api/climates.ts
+7
View File
@@ -0,0 +1,7 @@
import api from './client'
export const climatesApi = {
get: (conversationId: string) => api.get(`/climates/${conversationId}`),
getCalendar: (conversationId: string) => api.get(`/climates/${conversationId}/calendar`),
}
frontend/src/api/echoes.ts
+8
View File
@@ -0,0 +1,8 @@
import api from './client'
export const echoesApi = {
send: (toUserId: string, message?: string) =>
api.post('/echoes/', { to_user_id: toUserId, message }),
getAll: () => api.get('/echoes/'),
}
frontend/src/api/flash.ts
+11
View File
@@ -0,0 +1,11 @@
import api from './client'
export const flashApi = {
getActive: () => api.get('/flash/active'),
click: (eventId: string) => api.post(`/flash/${eventId}/click`),
claim: (eventId: string) => api.post(`/flash/${eventId}/claim`),
getAlbum: () => api.get('/flash/album'),
}
frontend/src/api/leaves.ts
+2
View File
@@ -7,4 +7,6 @@ export const leavesApi = {
api.put(`/leaves/${leafId}`, data),
getCollection: () => api.get('/leaves/collection'),
getGrove: () => api.get('/leaves/grove'),
}
frontend/src/api/sync.ts
+10
View File
@@ -0,0 +1,10 @@
import api from './client'
export const syncApi = {
getQuestion: () => api.get('/sync/question'),
submitAnswer: (questionId: string, friendId: string, answer: string) =>
api.post('/sync/answer', { question_id: questionId, friend_id: friendId, answer }),
getSeed: (seedId: string) => api.get(`/sync/${seedId}`),
}
frontend/src/api/trees.ts
+2
View File
@@ -6,4 +6,6 @@ export const treesApi = {
getTree: (friendId: string) => api.get(`/trees/${friendId}`),
water: (friendId: string) => api.post(`/trees/${friendId}/water`),
heartbeat: (friendId: string) => api.get(`/trees/${friendId}/heartbeat`),
}
frontend/src/components/EchoLayer.vue
+120
View File
@@ -0,0 +1,120 @@
<template>
<div class="echo-layer">
<!-- 飘入的回音叶 -->
<transition name="echo">
<div v-if="active" class="echo-leaf" :key="active.id">
<svg viewBox="0 0 100 120" class="leaf-svg">
<defs>
<radialGradient :id="`eg-${active.id}`">
<stop offset="0%" :stop-color="leafColor(style, 20)" />
<stop offset="100%" :stop-color="leafColor(style)" />
</radialGradient>
</defs>
<path :d="leafPath(style.shapeVariant)" :fill="`url(#eg-${active.id})`" />
<g stroke="rgba(255,255,255,0.5)" stroke-width="0.8" fill="none">
<path v-for="(vp, i) in veinPaths(style)" :key="i" :d="vp" />
</g>
</svg>
</div>
</transition>
<!-- 提示文字 -->
<transition name="echo-text">
<div v-if="active" class="echo-text-bubble">
<span class="echo-name">{{ active.from_nickname || active.from_username }}</span>
<span class="echo-hint">在想你 🌿</span>
</div>
</transition>
<!-- 发送成功反馈 -->
<transition name="echo-toast">
<div v-if="sentToast" class="echo-toast">
🍃 回音已寄出{{ sentToast.online ? '，TA 感受到了' : '，将在 TA 的花园降落' }}
</div>
</transition>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { generateLeafStyle, leafColor, leafPath, veinPaths } from '@/utils/leafGenerator'
const active = ref<any>(null)
const sentToast = ref<any>(null)
let hideTimer: ReturnType<typeof setTimeout>
const style = computed(() => active.value
? generateLeafStyle(active.value.leaf_seed)
: generateLeafStyle('0000000000000000'))
function onEchoReceived(e: Event) {
const data = (e as CustomEvent).detail
active.value = data
clearTimeout(hideTimer)
hideTimer = setTimeout(() => (active.value = null), 3500)
}
function onEchoSent(e: Event) {
const data = (e as CustomEvent).detail
sentToast.value = data
setTimeout(() => (sentToast.value = null), 2500)
}
onMounted(() => {
window.addEventListener('qingye:echo-received', onEchoReceived)
window.addEventListener('qingye:echo-sent', onEchoSent)
})
onUnmounted(() => {
window.removeEventListener('qingye:echo-received', onEchoReceived)
window.removeEventListener('qingye:echo-sent', onEchoSent)
})
</script>
<style scoped>
.echo-layer {
position: fixed; inset: 0; pointer-events: none; z-index: 1500; overflow: hidden;
}
/* 飘入的叶子 */
.echo-leaf {
position: fixed; top: 50%; left: 50%;
width: 120px; height: 144px;
filter: drop-shadow(0 0 24px rgba(0,200,150,0.7));
}
.leaf-svg { width: 100%; height: 100%; animation: leaf-float 3.5s ease-out; }
@keyframes leaf-float {
0% { transform: translate(-50%, -300%) scale(0.3) rotate(-180deg); opacity: 0; }
20% { opacity: 1; }
50% { transform: translate(-50%, -50%) scale(1.1) rotate(0deg); }
80% { transform: translate(-50%, -50%) scale(1) rotate(8deg); opacity: 1; }
100% { transform: translate(-50%, 200%) scale(0.6) rotate(20deg); opacity: 0; }
}
/* 提示文字 */
.echo-text-bubble {
position: fixed; top: 62%; left: 50%; transform: translateX(-50%);
background: var(--color-surface); padding: 12px 24px; border-radius: 24px;
box-shadow: 0 8px 24px rgba(0,150,136,0.25); display: flex; flex-direction: column;
align-items: center; gap: 2px; animation: text-pop 3.5s ease;
}
@keyframes text-pop {
0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
15%, 75% { opacity: 1; transform: translateX(-50%) translateY(0); }
100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}
.echo-name { font-weight: 600; font-size: 15px; color: var(--color-primary-darker); }
.echo-hint { font-size: 13px; color: var(--color-text-secondary); }
/* 发送反馈 toast */
.echo-toast {
position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%);
background: var(--color-primary); color: white; padding: 10px 20px;
border-radius: 20px; box-shadow: 0 4px 16px rgba(0,150,136,0.3);
font-size: 13px; animation: toast-up 2.5s ease;
}
@keyframes toast-up {
0% { opacity: 0; transform: translateX(-50%) translateY(20px); }
15%, 80% { opacity: 1; transform: translateX(-50%) translateY(0); }
100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}
</style>
frontend/src/components/FlashLayer.vue
+242
View File
@@ -0,0 +1,242 @@
<template>
<div class="flash-layer">
<!-- 萤火虫粒子背景 -->
<transition name="flash-fade">
<div v-if="active" class="flash-overlay">
<span v-for="i in 18" :key="i" class="firefly" :style="fireflyStyle(i)"></span>
</div>
</transition>
<!-- 中央集气面板 -->
<transition name="flash-pop">
<div v-if="active" class="flash-panel">
<span class="flash-close" @click.stop="dismiss">✕</span>
<div class="flash-tap-area" @click="onTap">
<div class="flash-title">✨ 萤火虫降临</div>
<div class="flash-progress-ring">
<svg viewBox="0 0 100 100" class="ring-svg">
<circle cx="50" cy="50" r="44" class="ring-bg" />
<circle cx="50" cy="50" r="44" class="ring-fill"
:style="{ strokeDashoffset: ringOffset }" />
</svg>
<div class="ring-center">
<div class="ring-count">{{ progress.total }}</div>
<div class="ring-target">/ {{ active.target_clicks }}</div>
</div>
</div>
<div class="flash-hint">点击集气 · 集满全服掉限定叶 🌟</div>
<div v-if="myClicks > 0" class="my-clicks">你贡献了 {{ myClicks }} 次</div>
</div>
</div>
</transition>
<!-- 达标庆祝 -->
<transition name="flash-pop">
<div v-if="reward" class="reward-modal" @click.self="reward = null">
<div class="reward-card">
<div class="reward-glow"></div>
<div class="reward-leaf">
<svg viewBox="0 0 100 120" class="reward-svg">
<defs>
<radialGradient id="flash-grad">
<stop offset="0%" :stop-color="leafColor(style, 25)" />
<stop offset="100%" :stop-color="leafColor(style)" />
</radialGradient>
</defs>
<path :d="leafPath(style.shapeVariant)" fill="url(#flash-grad)" />
<g stroke="rgba(255,255,255,0.6)" stroke-width="0.8" fill="none">
<path v-for="(vp, i) in veinPaths(style)" :key="i" :d="vp" />
</g>
<!-- 萤火虫光点 -->
<circle v-for="i in 4" :key="'g'+i" :cx="30 + i*12" :cy="40 + (i%2)*30" r="2" fill="rgba(255,235,100,0.9)" />
</svg>
</div>
<h3>限定纪念叶到手！</h3>
<p class="reward-variant">{{ reward.leaf_variant }}</p>
<p class="reward-desc">永不复刻 · 已收入图鉴</p>
<n-button type="primary" round @click="claimReward">收入图鉴</n-button>
</div>
</div>
</transition>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { flashApi } from '@/api/flash'
import { generateLeafStyle, leafColor, leafPath, veinPaths } from '@/utils/leafGenerator'
const active = ref<any>(null)
const reward = ref<any>(null)
const progress = ref<any>({ total: 0 })
const myClicks = ref(0)
const dismissedIds = ref<Set<string>>(new Set()) // 用户已忽略的事件，不再弹回
let pollTimer: ReturnType<typeof setInterval>
let claimTimer: ReturnType<typeof setTimeout>
const style = computed(() => reward.value
? generateLeafStyle(reward.value.leaf_seed)
: generateLeafStyle('0000000000000000'))
const ringOffset = computed(() => {
const p = progress.value.progress || 0
return 276 - 276 * p // 276 = 2π*44
})
function fireflyStyle(i: number): Record<string, string> {
const left = (i * 53) % 100
const top = (i * 37) % 100
const delay = (i % 6) * 0.3
const dur = 2.5 + (i % 4)
return {
left: left + '%',
top: top + '%',
animationDelay: delay + 's',
animationDuration: dur + 's',
}
}
function onFlash(e: Event) {
const data = (e as CustomEvent).detail
if (data._phase === 'flash.spawn') {
if (dismissedIds.value.has(data.id)) return // 已忽略的不再弹
active.value = data
progress.value = { total: data.total_clicks || 0, progress: data.progress || 0, target: data.target_clicks }
} else if (data._phase === 'flash.progress') {
progress.value = data
} else if (data._phase === 'flash.result' && data.reached) {
// 达标：显示奖励并关闭集气面板
reward.value = { ...data, event_id: data.event_id }
active.value = null
}
}
async function onTap() {
if (!active.value) return
try {
const { data } = await flashApi.click(active.value.id)
progress.value = data
myClicks.value = data.my_clicks
// 本地达标也立即关闭面板，触发奖励
if (data.reached && !reward.value) {
reward.value = { event_id: active.value.id, leaf_seed: active.value.leaf_seed, leaf_variant: active.value.leaf_variant }
active.value = null
}
} catch {}
}
function dismiss() {
if (active.value) dismissedIds.value.add(active.value.id)
active.value = null
}
async function claimReward() {
if (!reward.value) return
try {
await flashApi.claim(reward.value.event_id)
reward.value = null
} catch {}
}
// 轮询检查是否有进行中的事件（弥补未在线时错过 spawn 的情况）
async function pollActive() {
// 若当前已有面板或奖励弹窗，先检查是否到期
if (active.value) {
if (new Date(active.value.end_at).getTime() <= Date.now()) {
active.value = null // 事件到期，自动关闭
return
}
}
try {
const { data } = await flashApi.getActive()
if (data.event && !reward.value && !dismissedIds.value.has(data.event.id)) {
active.value = data.event
progress.value = {
total: data.event.total_clicks,
progress: data.event.progress,
target: data.event.target_clicks,
}
}
} catch {}
}
onMounted(() => {
window.addEventListener('qingye:flash', onFlash)
pollActive()
pollTimer = setInterval(pollActive, 20000) // 每 20 秒检查一次（更轻量）
})
onUnmounted(() => {
window.removeEventListener('qingye:flash', onFlash)
clearInterval(pollTimer)
})
</script>
<style scoped>
.flash-layer { position: fixed; inset: 0; pointer-events: none; z-index: 1400; }
/* 萤火虫粒子 */
.flash-overlay { position: fixed; inset: 0; pointer-events: none; }
.firefly {
position: absolute; width: 6px; height: 6px; border-radius: 50%;
background: radial-gradient(circle, #FFEB3B 0%, rgba(255,200,0,0.4) 60%, transparent 100%);
box-shadow: 0 0 8px #FFEB3B;
animation: firefly-float ease-in-out infinite;
}
@keyframes firefly-float {
0%, 100% { transform: translate(0, 0); opacity: 0.3; }
50% { transform: translate(20px, -30px); opacity: 1; }
}
/* 中央面板 */
.flash-panel {
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
background: rgba(20,30,28,0.92); color: white; padding: 24px 32px; border-radius: 24px;
text-align: center; pointer-events: auto;
box-shadow: 0 0 60px rgba(255,235,59,0.4); backdrop-filter: blur(8px);
}
.flash-close {
position: absolute; top: 10px; right: 14px; cursor: pointer;
font-size: 18px; color: rgba(255,255,255,0.6); line-height: 1; z-index: 2;
}
.flash-close:hover { color: white; }
.flash-tap-area { cursor: pointer; }
.flash-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; color: #FFEB3B; }
.flash-progress-ring { position: relative; width: 140px; height: 140px; margin: 0 auto 12px; }
.ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(255,255,255,0.15); stroke-width: 6; }
.ring-fill { fill: none; stroke: #FFEB3B; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 276; transition: stroke-dashoffset 0.3s; filter: drop-shadow(0 0 4px #FFEB3B); }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-count { font-size: 32px; font-weight: 800; color: white; }
.ring-target { font-size: 12px; color: rgba(255,255,255,0.6); }
.flash-hint { font-size: 12px; color: rgba(255,255,255,0.7); }
.my-clicks { font-size: 11px; color: #FFEB3B; margin-top: 6px; }
/* 达标奖励 */
.reward-modal {
position: fixed; inset: 0; background: rgba(0,0,0,0.7); pointer-events: auto;
display: flex; align-items: center; justify-content: center; z-index: 1600;
}
.reward-card {
background: var(--color-surface); padding: 32px; border-radius: 24px; text-align: center;
position: relative; overflow: hidden; max-width: 320px;
}
.reward-glow {
position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(255,235,59,0.3), transparent 60%);
animation: glow 2s ease-in-out infinite;
}
@keyframes glow { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
.reward-leaf { position: relative; margin: 0 auto 16px; width: 120px; height: 144px; filter: drop-shadow(0 0 20px rgba(255,200,0,0.6)); }
.reward-svg { width: 100%; height: 100%; animation: reward-bloom 0.8s ease; }
@keyframes reward-bloom { 0% { transform: scale(0.3) rotate(-180deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.reward-card h3 { margin: 0 0 4px; font-size: 18px; color: var(--color-primary-darker); position: relative; }
.reward-variant { font-size: 12px; color: var(--color-text-hint); margin: 4px 0; font-family: monospace; position: relative; }
.reward-desc { font-size: 13px; color: var(--color-text-secondary); margin: 4px 0 16px; position: relative; }
/* transitions */
.flash-fade-enter-active, .flash-fade-leave-active { transition: opacity 0.5s; }
.flash-fade-enter-from, .flash-fade-leave-to { opacity: 0; }
.flash-pop-enter-active { animation: pop-in 0.4s ease; }
.flash-pop-leave-active { transition: opacity 0.3s; }
.flash-pop-leave-to { opacity: 0; }
@keyframes pop-in { 0% { transform: translate(-50%, -50%) scale(0.7); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
</style>
frontend/src/composables/useWebSocket.ts
+12
View File
@@ -112,6 +112,18 @@ export function useWebSocket() {
window.dispatchEvent(new CustomEvent('qingye:member-removed', { detail: event.data }))
chatStore.fetchConversations()
break
case 'echo.send':
// 收到一片回音叶：有人在想你
window.dispatchEvent(new CustomEvent('qingye:echo-received', { detail: event.data }))
break
case 'heartbeat.sync':
window.dispatchEvent(new CustomEvent('qingye:heartbeat', { detail: event.data }))
break
case 'flash.spawn':
case 'flash.progress':
case 'flash.result':
window.dispatchEvent(new CustomEvent('qingye:flash', { detail: { ...event.data, _phase: event.type } }))
break
case 'error':
console.error('服务端错误:', event.data.message)
break
frontend/src/router/index.ts
+36
View File
@@ -130,6 +130,42 @@ const routes: RouteRecordRaw[] = [
default: () => import('@/views/garden/CapsuleView.vue'),
},
},
{
path: 'sync',
name: 'GardenSync',
meta: { hideSecondary: true },
components: {
secondary: () => import('@/views/garden/GardenSidebar.vue'),
default: () => import('@/views/garden/SyncView.vue'),
},
},
{
path: 'grove',
name: 'GardenGrove',
meta: { hideSecondary: true },
components: {
secondary: () => import('@/views/garden/GardenSidebar.vue'),
default: () => import('@/views/garden/GroveView.vue'),
},
},
{
path: 'heartbeat',
name: 'GardenHeartbeat',
meta: { hideSecondary: true },
components: {
secondary: () => import('@/views/garden/GardenSidebar.vue'),
default: () => import('@/views/garden/HeartbeatView.vue'),
},
},
{
path: 'firefly',
name: 'GardenFirefly',
meta: { hideSecondary: true },
components: {
secondary: () => import('@/views/garden/GardenSidebar.vue'),
default: () => import('@/views/garden/FireflyView.vue'),
},
},
],
},
frontend/src/views/chat/ChatRoomView.vue
+67
View File
@@ -12,6 +12,9 @@
<span v-else-if="convDetail?.type === 'group'" class="member-count">{{ convDetail.members?.length || 0 }} 位成员</span>
<span v-else class="member-count" :class="{ online: isOtherOnline }">{{ isOtherOnline ? '在线' : '离线' }}</span>
</div>
<span v-if="climate" class="climate-badge" @click="showCalendar = !showCalendar" :title="climateDesc">
{{ climate.emoji }} {{ climate.temperature }}°
</span>
<n-button v-if="convDetail?.type === 'group'" quaternary size="small" @click="showGroupInfo = !showGroupInfo">群信息 ▾</n-button>
<n-button quaternary size="small" @click="toggleSearch" title="搜索">🔍</n-button>
</div>
@@ -24,6 +27,20 @@
<n-button size="tiny" quaternary @click="showSearch = false; searchResults = []">✕</n-button>
</div>
<!-- 气候日历 -->
<div v-if="showCalendar" class="calendar-bar">
<div class="calendar-header">
<span>{{ climateDesc }}</span>
<span class="close-btn" @click="showCalendar = false">✕</span>
</div>
<div class="calendar-grid">
<div v-for="(day, i) in calendar" :key="i" class="cal-cell" :title="day.date">
<span class="cal-emoji">{{ day.emoji }}</span>
</div>
<div v-if="calendar.length === 0" class="cal-empty">还没有气候记录，多聊聊就有了</div>
</div>
</div>
<!-- 搜索结果 -->
<div v-if="searchResults.length > 0" class="search-results">
<div class="search-results-header">
@@ -166,6 +183,7 @@ import { useAuthStore } from '@/stores/auth'
import { useUiStore } from '@/stores/ui'
import { useWebSocket } from '@/composables/useWebSocket'
import { chatApi } from '@/api/chat'
import { climatesApi } from '@/api/climates'
import api from '@/api/client'
import GroupInfoPanel from './GroupInfoPanel.vue'
import dayjs from 'dayjs'
@@ -197,8 +215,24 @@ const showForwardModal = ref(false)
const forwardTarget = ref<string | null>(null)
const forwardContent = ref('')
const forwardSender = ref('')
const climate = ref<any>(null)
const calendar = ref<any[]>([])
const showCalendar = ref(false)
const emojis = EMOJIS
const SEASON_LABEL: Record<string, string> = {
spring: '春', summer: '夏', autumn: '秋', winter: '冬',
}
const WEATHER_LABEL: Record<string, string> = {
sunny: '晴朗', cloudy: '多云', rainy: '绵绵细雨', windy: '微风', snowy: '飘雪',
}
const climateDesc = computed(() => {
if (!climate.value) return ''
const s = SEASON_LABEL[climate.value.season] || ''
const w = WEATHER_LABEL[climate.value.weather] || ''
return `你们的对话正处于「${s}天 · ${w}」，${climate.value.temperature}°C`
})
// Typing indicator: get users typing in current conversation
const currentTypingUsers = computed(() => {
const convId = route.params.id as string
@@ -233,6 +267,7 @@ onMounted(async () => {
await nextTick()
scrollToBottom()
markRead()
loadClimate(id)
}
document.addEventListener('click', closeCtxMenu)
})
@@ -258,6 +293,15 @@ async function loadDetail() {
} catch {}
}
async function loadClimate(id: string) {
try {
const { data } = await climatesApi.get(id)
climate.value = data
const { data: cal } = await climatesApi.getCalendar(id)
calendar.value = cal
} catch {}
}
function markRead() {
const msgs = chatStore.currentMessages
if (msgs.length > 0 && chatStore.activeConversation) {
@@ -500,6 +544,29 @@ function formatTimeDivider(time: string) {
.typing-indicator { font-size: 12px; color: var(--color-primary); font-style: italic; animation: typing-fade 1.5s ease infinite; }
@keyframes typing-fade { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
/* 气候徽章 */
.climate-badge {
font-size: 13px; padding: 3px 10px; border-radius: 12px;
background: var(--color-primary-lightest); color: var(--color-primary);
cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.climate-badge:hover { background: var(--color-primary-lighter); color: white; }
/* 气候日历 */
.calendar-bar {
background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 12px 20px;
}
.calendar-header {
display: flex; justify-content: space-between; align-items: center;
font-size: 13px; color: var(--color-text-secondary); margin-bottom: 10px;
}
.calendar-header .close-btn { cursor: pointer; color: var(--color-text-hint); }
.calendar-grid {
display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px;
}
.cal-cell { display: flex; align-items: center; justify-content: center; font-size: 16px; padding: 2px; }
.cal-empty { grid-column: 1 / -1; text-align: center; font-size: 12px; color: var(--color-text-hint); padding: 12px; }
.chat-body { flex: 1; display: flex; overflow: hidden; position: relative; }
.message-list { flex: 1; overflow-y: auto; padding: 16px 20px; }
frontend/src/views/contacts/FriendProfileCard.vue
+19
View File
@@ -34,6 +34,9 @@
<!-- 操作按钮 -->
<div class="card-actions">
<n-button type="primary" block @click="startChat">发消息</n-button>
<n-button quaternary type="primary" block @click="sendEcho" :loading="sendingEcho">
🍃 想念 TA（寄一片回音叶）
</n-button>
<n-button type="error" ghost block @click="handleRemove">删除好友</n-button>
</div>
</div>
@@ -47,6 +50,7 @@ import { useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'
import { chatApi } from '@/api/chat'
import { friendsApi } from '@/api/friends'
import { echoesApi } from '@/api/echoes'
const props = defineProps<{ visible: boolean; friend: any }>()
const emit = defineEmits<{ close: []; updated: [] }>()
@@ -54,6 +58,7 @@ const emit = defineEmits<{ close: []; updated: [] }>()
const router = useRouter()
const message = useMessage()
const remark = ref('')
const sendingEcho = ref(false)
watch(() => props.friend, (f) => {
remark.value = f?.remark || ''
@@ -69,6 +74,20 @@ async function startChat() {
}
}
async function sendEcho() {
sendingEcho.value = true
try {
const { data } = await echoesApi.send(props.friend.friend_user_id)
// 触发全局发送反馈
window.dispatchEvent(new CustomEvent('qingye:echo-sent', { detail: { online: data.delivered_online } }))
emit('close')
} catch (e: any) {
message.error(e.response?.data?.detail || '寄送失败')
} finally {
sendingEcho.value = false
}
}
async function saveRemark() {
try {
await friendsApi.updateRemark(props.friend.friend_user_id, remark.value || null)
frontend/src/views/garden/FireflyView.vue
+128
View File
@@ -0,0 +1,128 @@
<template>
<div class="firefly-view">
<div class="ff-header">
<h2>✨ 萤火虫时刻</h2>
<p class="subtitle">全服随机降临，一起集气点亮，掉落永不复刻的限定叶</p>
</div>
<!-- 状态卡 -->
<div class="status-card">
<div v-if="active" class="active-event">
<div class="event-title">🟢 萤火虫正在降临！</div>
<div class="event-progress">
<div class="prog-bar"><div class="prog-fill" :style="{ width: (active.progress * 100) + '%' }"></div></div>
<span>{{ active.total_clicks }} / {{ active.target_clicks }}</span>
</div>
<div class="countdown">⏱️ 剩余 {{ countdown }}</div>
<p class="hint">点击屏幕中央的萤火虫面板参与集气</p>
</div>
<div v-else class="no-event">
<div class="no-icon">🌌</div>
<p>此刻森林很安静</p>
<p class="sub-hint">萤火虫会在不经意时降临，留意闪烁的光点</p>
</div>
</div>
<!-- 图鉴 -->
<div class="album-section">
<h3>🌟 我的限定叶图鉴</h3>
<div v-if="album.length === 0" class="album-empty">
还没有收集到限定叶，下次萤火虫降临别忘了参与
</div>
<div v-else class="album-grid">
<div v-for="(item, i) in album" :key="i" class="album-leaf">
<svg viewBox="0 0 100 120" class="album-svg">
<path :d="leafPath(generateLeafStyle(item.leaf_seed).shapeVariant)"
:fill="leafColor(generateLeafStyle(item.leaf_seed))" />
<circle v-for="j in 3" :key="j" :cx="30 + j*18" :cy="45 + (j%2)*25" r="2" fill="rgba(255,235,100,0.85)" />
</svg>
<span class="album-variant">{{ item.leaf_variant }}</span>
<span class="album-clicks">贡献 {{ item.my_clicks }} 击</span>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { flashApi } from '@/api/flash'
import { generateLeafStyle, leafColor, leafPath } from '@/utils/leafGenerator'
const active = ref<any>(null)
const album = ref<any[]>([])
const now = ref(Date.now())
let pollTimer: ReturnType<typeof setInterval>
let tickTimer: ReturnType<typeof setInterval>
const countdown = computed(() => {
if (!active.value) return ''
const left = Math.max(0, Math.floor((new Date(active.value.end_at).getTime() - now.value) / 1000))
const m = Math.floor(left / 60)
const s = left % 60
return `${m}:${s.toString().padStart(2, '0')}`
})
async function poll() {
try {
const { data } = await flashApi.getActive()
active.value = data.event
} catch {}
}
onMounted(async () => {
await poll()
await loadAlbum()
pollTimer = setInterval(poll, 5000)
tickTimer = setInterval(() => (now.value = Date.now()), 1000)
})
onUnmounted(() => {
clearInterval(pollTimer)
clearInterval(tickTimer)
})
async function loadAlbum() {
try {
const { data } = await flashApi.getAlbum()
album.value = data
} catch {}
}
</script>
<style scoped>
.firefly-view {
flex: 1; overflow-y: auto; padding: 24px;
background: linear-gradient(180deg, var(--color-bg) 0%, #1a2e2a 200%);
}
.ff-header { text-align: center; margin-bottom: 20px; }
.ff-header h2 { margin: 0; font-size: 22px; color: var(--color-primary-darker); }
.subtitle { font-size: 13px; color: var(--color-text-hint); margin: 4px 0 0; }
.status-card {
max-width: 480px; margin: 0 auto 24px; padding: 24px; border-radius: 16px;
background: var(--color-surface); border: 1px solid var(--color-border); text-align: center;
}
.active-event .event-title { font-size: 16px; color: var(--color-success); font-weight: 700; margin-bottom: 12px; }
.event-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.prog-bar { flex: 1; height: 10px; background: var(--color-bg); border-radius: 5px; overflow: hidden; }
.prog-fill { height: 100%; background: linear-gradient(90deg, #FFC107, #FFEB3B); transition: width 0.4s; }
.countdown { font-size: 20px; font-weight: 700; color: #FF9800; margin: 8px 0; }
.hint { font-size: 12px; color: var(--color-text-hint); }
.no-event .no-icon { font-size: 56px; margin-bottom: 8px; }
.no-event p { margin: 4px 0; color: var(--color-text-secondary); }
.sub-hint { font-size: 12px; color: var(--color-text-hint) !important; }
.album-section { max-width: 560px; margin: 0 auto; }
.album-section h3 { font-size: 16px; color: var(--color-text-primary); margin-bottom: 12px; }
.album-empty { text-align: center; padding: 30px; color: var(--color-text-hint); font-size: 13px; background: var(--color-surface); border-radius: 12px; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.album-leaf {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 12px 8px; background: var(--color-surface); border-radius: 12px;
border: 1px solid var(--color-border); position: relative;
}
.album-svg { width: 64px; height: 77px; filter: drop-shadow(0 2px 6px rgba(255,200,0,0.3)); }
.album-variant { font-size: 10px; color: var(--color-text-hint); font-family: monospace; }
.album-clicks { font-size: 11px; color: var(--color-primary); }
</style>
frontend/src/views/garden/GardenSidebar.vue
+16
View File
@@ -24,6 +24,22 @@
<span class="menu-icon">⏳</span>
<span class="menu-label">时光胶囊</span>
</router-link>
<router-link to="/garden/sync" class="menu-item" active-class="active">
<span class="menu-icon">🌱</span>
<span class="menu-label">默契种子</span>
</router-link>
<router-link to="/garden/grove" class="menu-item" active-class="active">
<span class="menu-icon">🌲</span>
<span class="menu-label">情绪共鸣林</span>
</router-link>
<router-link to="/garden/heartbeat" class="menu-item" active-class="active">
<span class="menu-icon">💓</span>
<span class="menu-label">心跳同步</span>
</router-link>
<router-link to="/garden/firefly" class="menu-item" active-class="active">
<span class="menu-icon">✨</span>
<span class="menu-label">萤火虫时刻</span>
</router-link>
</div>
</div>
</template>
frontend/src/views/garden/GardenView.vue
+50
View File
@@ -32,6 +32,51 @@
</div>
<span class="card-arrow">›</span>
</div>
<div class="feature-card echo-card" @click="$router.push('/contacts')">
<div class="card-icon">🍃</div>
<div class="card-body">
<h3>念念回音</h3>
<p>在好友资料卡寄一片"我在想你"的回音叶</p>
</div>
<span class="card-arrow">›</span>
</div>
<div class="feature-card sync-card" @click="$router.push('/garden/sync')">
<div class="card-icon">🌱</div>
<div class="card-body">
<h3>默契种子</h3>
<p>和好友盲答一题，默契会长出独特的叶子</p>
</div>
<span class="card-arrow">›</span>
</div>
<div class="feature-card grove-card" @click="$router.push('/garden/grove')">
<div class="card-icon">🌲</div>
<div class="card-body">
<h3>情绪共鸣林</h3>
<p>俯瞰朋友圈今日的情绪天气，你并不孤单</p>
</div>
<span class="card-arrow">›</span>
</div>
<div class="feature-card heartbeat-card" @click="$router.push('/garden/heartbeat')">
<div class="card-icon">💓</div>
<div class="card-body">
<h3>心跳同步森林</h3>
<p>你们的叶子在同一节拍上呼吸</p>
</div>
<span class="card-arrow">›</span>
</div>
<div class="feature-card firefly-card" @click="$router.push('/garden/firefly')">
<div class="card-icon">✨</div>
<div class="card-body">
<h3>萤火虫时刻</h3>
<p>全服随机降临，集气点亮掉限定叶</p>
</div>
<span class="card-arrow">›</span>
</div>
</div>
<div class="garden-quote">
@@ -73,6 +118,11 @@
.leaf-card { border-left: 4px solid #66BB6A; }
.tree-card { border-left: 4px solid #8D6E63; }
.capsule-card { border-left: 4px solid #FFB74D; }
.echo-card { border-left: 4px solid #26A69A; }
.sync-card { border-left: 4px solid #9CCC65; }
.grove-card { border-left: 4px solid #7CB342; }
.heartbeat-card { border-left: 4px solid #EC407A; }
.firefly-card { border-left: 4px solid #FFC107; }
.garden-quote { text-align: center; margin-top: 48px; }
.garden-quote p { font-size: 13px; color: var(--color-text-hint); font-style: italic; margin: 0; }
frontend/src/views/garden/GroveView.vue
+212
View File
@@ -0,0 +1,212 @@
<template>
<div class="grove-view">
<div class="grove-header">
<h2>🌲 情绪共鸣林</h2>
<p class="subtitle">{{ weatherText }}</p>
</div>
<div class="grove-stage" :class="weatherClass">
<!-- 天气遮罩层 -->
<div class="weather-overlay" :class="weatherClass"></div>
<!-- 雾气（低落多时） -->
<div v-if="gloomyRatio > 0.5" class="mist"></div>
<!-- 暖光（开心多时） -->
<div v-if="happyRatio > 0.5" class="warm-glow"></div>
<!-- 叶子们 -->
<div v-if="grove && grove.total > 0" class="forest">
<div v-for="(leaf, i) in grove.leaves" :key="i" class="grove-leaf"
:class="{ self: leaf.is_self }"
:style="leafPosition(leaf, i)">
<svg viewBox="0 0 100 120" class="mini-leaf-svg" :class="{ sway: !leaf.is_self }">
<path :d="leafPath(generateLeafStyle(leaf.leaf_seed).shapeVariant)"
:fill="leaf.is_self ? leafColor(generateLeafStyle(leaf.leaf_seed), 15) : leafColor(generateLeafStyle(leaf.leaf_seed))"
:opacity="leaf.is_self ? 1 : 0.85" />
</svg>
<span v-if="leaf.mood" class="leaf-mood-emoji">{{ moodEmoji(leaf.mood) }}</span>
<div v-if="leaf.is_self" class="self-glow"></div>
</div>
</div>
<div v-else class="empty-forest">
<div style="font-size: 56px">🌳</div>
<p>今天还是一片空林</p>
<p class="empty-hint">领取你的今日心情叶，森林就会亮起来</p>
<n-button type="primary" round size="small" @click="$router.push('/garden/leaf')">去领今日叶</n-button>
</div>
</div>
<!-- 情绪统计 -->
<div v-if="grove && grove.total > 0" class="mood-stats">
<span class="stat-label">今日朋友圈情绪</span>
<div class="mood-bars">
<div v-for="m in moodStats" :key="m.key" class="mood-bar">
<span class="mood-emoji">{{ m.emoji }}</span>
<div class="bar-track">
<div class="bar-fill" :style="{ width: m.percent + '%', background: m.color }"></div>
</div>
<span class="mood-count">{{ m.count }}</span>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { leavesApi } from '@/api/leaves'
import { generateLeafStyle, leafColor, leafPath } from '@/utils/leafGenerator'
const grove = ref<any>(null)
const MOOD_META: Record<string, { emoji: string; color: string; happy: number }> = {
happy: { emoji: '😊', color: '#FFD54F', happy: 1 },
energetic: { emoji: '⚡', color: '#66BB6A', happy: 1 },
grateful: { emoji: '🙏', color: '#26A69A', happy: 1 },
calm: { emoji: '🌙', color: '#90A4AE', happy: 0.5 },
thoughtful: { emoji: '🤔', color: '#7E57C2', happy: 0.3 },
lazy: { emoji: '😴', color: '#78909C', happy: 0.2 },
unknown: { emoji: '🍃', color: '#A5D6A7', happy: 0.5 },
}
const happyRatio = computed(() => {
if (!grove.value) return 0
const counts = grove.value.mood_counts
let happy = 0, total = 0
for (const [k, v] of Object.entries(counts)) {
total += v as number
if ((MOOD_META[k]?.happy || 0.5) >= 1) happy += v as number
}
return total ? happy / total : 0
})
const gloomyRatio = computed(() => {
if (!grove.value) return 0
const counts = grove.value.mood_counts
let gloomy = 0, total = 0
for (const [k, v] of Object.entries(counts)) {
total += v as number
if ((MOOD_META[k]?.happy || 0.5) <= 0.3) gloomy += v as number
}
return total ? gloomy / total : 0
})
const weatherClass = computed(() => {
if (happyRatio.value > 0.5) return 'sunny'
if (gloomyRatio.value > 0.5) return 'misty'
return 'balanced'
})
const weatherText = computed(() => {
if (!grove.value || grove.value.total === 0) return '俯瞰整片森林的情绪天气'
if (happyRatio.value > 0.5) return '☀️ 今天朋友圈阳光正好，暖意融融'
if (gloomyRatio.value > 0.5) return '🌫️ 今天林子有些低沉，给朋友一个拥抱吧'
return '🌤️ 森林平静地呼吸着'
})
const moodStats = computed(() => {
if (!grove.value) return []
const counts = grove.value.mood_counts
const total = grove.value.total
return Object.entries(counts).map(([k, v]) => ({
key: k,
emoji: MOOD_META[k]?.emoji || '🍃',
color: MOOD_META[k]?.color || '#A5D6A7',
count: v as number,
percent: Math.round(((v as number) / total) * 100),
})).sort((a, b) => b.count - a.count)
})
function leafPosition(leaf: any, i: number): Record<string, string> {
if (leaf.is_self) {
return { left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }
}
// 环形排布
const angle = leaf.angle
const radius = 38 + (i % 2) * 6 // %
const x = 50 + Math.cos(angle) * radius
const y = 50 + Math.sin(angle) * radius * 0.7
return { left: x + '%', top: y + '%', transform: 'translate(-50%, -50%)' }
}
function moodEmoji(mood: string): string {
return MOOD_META[mood]?.emoji || ''
}
onMounted(async () => {
try {
const { data } = await leavesApi.getGrove()
grove.value = data
} catch {}
})
</script>
<style scoped>
.grove-view {
flex: 1; overflow-y: auto; padding: 24px;
}
.grove-header { text-align: center; margin-bottom: 12px; }
.grove-header h2 { margin: 0; font-size: 22px; color: var(--color-primary-darker); }
.subtitle { font-size: 14px; color: var(--color-text-secondary); margin: 6px 0 0; }
.grove-stage {
position: relative; height: 420px; max-width: 560px; margin: 0 auto 20px;
border-radius: 20px; overflow: hidden;
background: radial-gradient(ellipse at center, #E8F5E9 0%, #C8E6C9 100%);
transition: background 1s;
}
.grove-stage.misty { background: radial-gradient(ellipse at center, #CFD8DC 0%, #B0BEC5 100%); }
.grove-stage.sunny { background: radial-gradient(ellipse at center, #FFF8E1 0%, #FFE082 100%); }
.weather-overlay { position: absolute; inset: 0; pointer-events: none; }
.mist {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(200,210,215,0.5) 100%);
backdrop-filter: blur(1px); animation: mist-drift 8s ease-in-out infinite;
}
@keyframes mist-drift { 0%,100% { opacity: 0.6; } 50% { opacity: 0.9; } }
.warm-glow {
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(circle at 50% 40%, rgba(255,213,79,0.35) 0%, transparent 60%);
animation: glow-pulse 4s ease-in-out infinite;
}
@keyframes glow-pulse { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
.forest { position: absolute; inset: 0; }
.grove-leaf { position: absolute; transition: all 0.6s ease; }
.grove-leaf.self { z-index: 10; }
.mini-leaf-svg { width: 48px; height: 58px; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.15)); }
.grove-leaf.self .mini-leaf-svg { width: 72px; height: 86px; }
.mini-leaf-svg.sway { animation: grove-sway 3s ease-in-out infinite; transform-origin: 50% 90%; }
.mini-leaf-svg.sway:nth-child(odd) { animation-delay: -1.5s; }
@keyframes grove-sway { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.leaf-mood-emoji { position: absolute; top: -6px; right: -6px; font-size: 16px; }
.self-glow {
position: absolute; inset: -16px; border-radius: 50%;
background: radial-gradient(circle, rgba(0,200,150,0.4) 0%, transparent 70%);
animation: self-pulse 2s ease-in-out infinite; pointer-events: none;
}
@keyframes self-pulse { 0%,100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.2); opacity: 1; } }
.empty-forest {
position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 8px; color: var(--color-text-hint);
}
.empty-hint { font-size: 12px; }
.mood-stats {
max-width: 560px; margin: 0 auto; background: var(--color-surface);
border-radius: 14px; padding: 16px 20px; border: 1px solid var(--color-border);
}
.stat-label { font-size: 13px; color: var(--color-text-secondary); font-weight: 500; display: block; margin-bottom: 12px; }
.mood-bars { display: flex; flex-direction: column; gap: 8px; }
.mood-bar { display: flex; align-items: center; gap: 8px; }
.mood-emoji { font-size: 16px; width: 24px; text-align: center; }
.bar-track { flex: 1; height: 10px; background: var(--color-bg); border-radius: 5px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 5px; transition: width 0.8s; }
.mood-count { font-size: 12px; color: var(--color-text-hint); width: 20px; text-align: right; }
</style>
frontend/src/views/garden/HeartbeatView.vue
+187
View File
@@ -0,0 +1,187 @@
<template>
<div class="heartbeat-view">
<div class="hb-header">
<h2>💓 心跳同步森林</h2>
<p class="subtitle">你们的呼吸，在同一节拍上</p>
</div>
<div v-if="trees.length === 0 && !loading" class="empty">
<div style="font-size: 56px">🌱</div>
<p>加个好友，开始同步心跳</p>
</div>
<template v-else>
<!-- 好友选择 -->
<div class="friend-selector">
<div v-for="t in trees" :key="t.friend_id" class="friend-chip"
:class="{ active: selectedFriend === t.friend_id }"
@click="selectFriend(t.friend_id)">
<n-avatar :size="32" round :style="{ background: 'var(--color-primary)' }">
{{ (t.friend_name || '?')[0] }}
</n-avatar>
</div>
</div>
<!-- 心跳舞台 -->
<div v-if="hb" class="hb-stage">
<!-- 两片叶子 -->
<div class="leaves-pair">
<!-- 我的叶子 -->
<div class="leaf-side">
<svg viewBox="0 0 100 120" class="hb-leaf mine" :style="myLeafStyle">
<path :d="leafPath(myStyle.shapeVariant)" :fill="leafColor(myStyle)" />
<g stroke="rgba(255,255,255,0.4)" stroke-width="0.8" fill="none">
<path v-for="(vp, i) in veinPaths(myStyle)" :key="i" :d="vp" />
</g>
</svg>
<span class="leaf-label">我</span>
</div>
<!-- 连接线（心跳波） -->
<div class="hb-link" :style="{ animationDuration: cycleMs + 'ms' }">
<span class="pulse-dot" :style="{ animationDuration: cycleMs + 'ms' }"></span>
</div>
<!-- 好友的叶子 -->
<div class="leaf-side" :class="{ offline: !hb.is_online }">
<svg viewBox="0 0 100 120" class="hb-leaf friend" :style="friendLeafStyle">
<path :d="leafPath(friendStyle.shapeVariant)" :fill="leafColor(friendStyle)" />
<g stroke="rgba(255,255,255,0.4)" stroke-width="0.8" fill="none">
<path v-for="(vp, i) in veinPaths(friendStyle)" :key="i" :d="vp" />
</g>
</svg>
<span class="leaf-label">{{ hb.friend_name }}</span>
<span v-if="!hb.is_online" class="offline-tag">已下线</span>
</div>
</div>
<!-- BPM 信息 -->
<div class="bpm-info">
<span class="bpm-num">{{ hb.bpm }}</span>
<span class="bpm-unit">BPM</span>
<span class="bpm-desc">{{ bpmDesc }}</span>
</div>
<div class="hb-stats">近 7 天 {{ hb.msg_7d }} 条消息 · {{ hb.is_online ? '在线' : '离线' }}</div>
</div>
</template>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { treesApi } from '@/api/trees'
import { generateLeafStyle, leafColor, leafPath, veinPaths } from '@/utils/leafGenerator'
import { useAuthStore } from '@/stores/auth'
const auth = useAuthStore()
const trees = ref<any[]>([])
const selectedFriend = ref<string | null>(null)
const hb = ref<any>(null)
const loading = ref(true)
const myStyle = computed(() => {
const seed = (auth.user?.id || '0').padEnd(16, '0').slice(0, 16)
return generateLeafStyle(seed)
})
const friendStyle = computed(() =>
hb.value ? generateLeafStyle(hb.value.friend_leaf_seed) : generateLeafStyle('0000000000000000')
)
// 一次呼吸的毫秒数（BPM → 周期）。心跳周期 = 60s/bpm
const cycleMs = computed(() => Math.round(60000 / (hb.value?.bpm || 60)))
// 关键同步巧思：基于墙钟时间算相位，双方天然同步
// animation-delay 让动画的"起点"对齐到全局时间，即使双方分别加载也对齐
const phaseDelay = computed(() => {
const now = Date.now()
const cycle = cycleMs.value
return -(now % cycle) + 'ms'
})
const myLeafStyle = computed(() => ({
animation: `heartbeat-breathe ${cycleMs.value}ms ease-in-out infinite`,
animationDelay: phaseDelay.value,
}))
const friendLeafStyle = computed(() => ({
animation: `heartbeat-breathe ${cycleMs.value}ms ease-in-out infinite`,
animationDelay: phaseDelay.value,
filter: hb.value?.is_online ? 'none' : 'grayscale(0.6) opacity(0.5)',
}))
const bpmDesc = computed(() => {
const bpm = hb.value?.bpm || 0
if (bpm < 50) return '沉睡中，静静陪伴'
if (bpm < 60) return '平静的呼吸'
if (bpm < 75) return '温暖的同频'
if (bpm < 85) return '活跃的心跳'
return '热烈的共振'
})
onMounted(async () => {
loading.value = true
try {
const { data } = await treesApi.getAll()
trees.value = data
if (data.length > 0) await selectFriend(data[0].friend_id)
} catch {} finally {
loading.value = false
}
})
async function selectFriend(friendId: string) {
selectedFriend.value = friendId
try {
const { data } = await treesApi.heartbeat(friendId)
hb.value = data
} catch {}
}
</script>
<style scoped>
.heartbeat-view {
flex: 1; overflow-y: auto; padding: 24px;
background: linear-gradient(180deg, var(--color-bg) 0%, #E8F5E9 100%);
}
.hb-header { text-align: center; margin-bottom: 16px; }
.hb-header h2 { margin: 0; font-size: 22px; color: var(--color-primary-darker); }
.subtitle { font-size: 13px; color: var(--color-text-hint); margin: 4px 0 0; }
.empty { text-align: center; padding: 60px; color: var(--color-text-hint); }
.friend-selector { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.friend-chip { cursor: pointer; padding: 3px; border-radius: 50%; border: 2px solid transparent; }
.friend-chip:hover { border-color: var(--color-primary-lighter); }
.friend-chip.active { border-color: var(--color-primary); }
.hb-stage { max-width: 480px; margin: 0 auto; text-align: center; }
.leaves-pair { display: flex; align-items: center; justify-content: center; gap: 12px; height: 240px; }
.leaf-side { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.leaf-side.offline .hb-leaf { animation: leaf-fall 2s ease forwards; }
@keyframes leaf-fall {
0% { transform: rotate(0); }
100% { transform: rotate(30deg) translateY(20px); opacity: 0.4; }
}
.hb-leaf { width: 110px; height: 132px; filter: drop-shadow(0 6px 12px rgba(0,150,136,0.2)); transform-origin: 50% 100%; }
@keyframes heartbeat-breathe {
0%, 100% { transform: scale(0.92); }
50% { transform: scale(1.05); }
}
.leaf-label { font-size: 12px; color: var(--color-text-secondary); }
.offline-tag { font-size: 10px; color: var(--color-text-hint); }
.hb-link { flex: 0 0 60px; height: 4px; background: var(--color-border); border-radius: 2px; position: relative; overflow: hidden; }
.pulse-dot {
position: absolute; top: -3px; left: 0; width: 10px; height: 10px;
border-radius: 50%; background: var(--color-primary);
animation: pulse-travel linear infinite;
box-shadow: 0 0 8px var(--color-primary);
}
@keyframes pulse-travel {
0% { left: -10px; }
100% { left: 60px; }
}
.bpm-info { margin-top: 20px; }
.bpm-num { font-size: 48px; font-weight: 800; color: var(--color-primary); }
.bpm-unit { font-size: 16px; color: var(--color-text-hint); margin-left: 4px; }
.bpm-desc { display: block; font-size: 14px; color: var(--color-text-secondary); margin-top: 4px; }
.hb-stats { font-size: 12px; color: var(--color-text-hint); margin-top: 8px; }
</style>
frontend/src/views/garden/SyncView.vue
+198
View File
@@ -0,0 +1,198 @@
<template>
<div class="sync-view">
<div class="sync-header">
<h2>🌱 默契种子</h2>
<p class="subtitle">和好友盲答同一题，看看默契长出什么样的叶子</p>
</div>
<div class="sync-main">
<!-- 今日题目 -->
<div v-if="question" class="question-card">
<div class="q-label">今日默契题</div>
<div class="q-content">{{ question.content }}</div>
</div>
<!-- 选好友 + 作答 -->
<div v-if="question" class="answer-section">
<div class="form-row">
<span class="form-label">和谁默契？</span>
<n-select v-model:value="selectedFriend" :options="friendOptions" placeholder="选择好友" />
</div>
<div class="form-row">
<span class="form-label">你的答案</span>
<n-input v-model:value="myAnswer" type="textarea" :rows="3"
placeholder="凭直觉写，越真诚越默契..." maxlength="500" show-count />
</div>
<n-button type="primary" round block :loading="submitting"
:disabled="!selectedFriend || !myAnswer.trim()" @click="submit">
种下默契种子
</n-button>
</div>
<!-- 结果区 -->
<div v-if="result" class="result-card" :class="{ revealed: result.score != null }">
<template v-if="result.score != null">
<!-- 揭晓 -->
<div class="leaf-stage">
<svg viewBox="0 0 100 120" class="result-leaf" :class="{ bloom: true }">
<defs>
<linearGradient id="sync-grad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" :stop-color="leafColor(style, 15)" />
<stop offset="100%" :stop-color="leafColor(style, -10)" />
</linearGradient>
</defs>
<path :d="leafPath(style.shapeVariant)" fill="url(#sync-grad)" />
<g stroke="rgba(255,255,255,0.4)" stroke-width="0.8" fill="none">
<path v-for="(vp, i) in veinPaths(style)" :key="i" :d="vp" />
</g>
</svg>
</div>
<div class="score-display">
<span class="score-num">{{ result.score }}</span>
<span class="score-unit">默契度</span>
</div>
<div class="score-comment">{{ scoreComment(result.score) }}</div>
<div class="answers-compare">
<div class="answer-box mine">
<span class="ans-label">你</span>
<span class="ans-text">{{ result.my_answer }}</span>
</div>
<div class="answer-box partner">
<span class="ans-label">TA</span>
<span class="ans-text">{{ result.partner_answer }}</span>
</div>
</div>
</template>
<template v-else>
<!-- 等待对方 -->
<div class="waiting">
<div class="seed-sprout">🌱</div>
<p>种子已种下，等 TA 来回答</p>
<p class="waiting-hint">你们都答完，默契叶就会发芽</p>
</div>
</template>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useMessage } from 'naive-ui'
import { syncApi } from '@/api/sync'
import { friendsApi } from '@/api/friends'
import { generateLeafStyle, leafColor, leafPath, veinPaths } from '@/utils/leafGenerator'
const message = useMessage()
const question = ref<any>(null)
const friends = ref<any[]>([])
const selectedFriend = ref<string | null>(null)
const myAnswer = ref('')
const submitting = ref(false)
const result = ref<any>(null)
const friendOptions = computed(() =>
friends.value.map((f) => ({
label: f.remark || f.nickname || f.username,
value: f.friend_user_id,
}))
)
const style = computed(() =>
result.value?.leaf_seed
? generateLeafStyle(result.value.leaf_seed)
: generateLeafStyle('0000000000000000')
)
onMounted(async () => {
try {
const { data } = await syncApi.getQuestion()
question.value = data
} catch {
message.error('加载题目失败')
}
try {
const { data } = await friendsApi.getFriends()
friends.value = data
} catch {}
})
async function submit() {
if (!selectedFriend.value || !myAnswer.value.trim()) return
submitting.value = true
try {
const { data } = await syncApi.submitAnswer(question.value.id, selectedFriend.value, myAnswer.value.trim())
result.value = { ...data, my_answer: myAnswer.value.trim() }
if (data.score != null) {
message.success('默契叶发芽了！')
} else {
message.success('种子已种下，等 TA 回答')
}
} catch (e: any) {
message.error(e.response?.data?.detail || '提交失败')
} finally {
submitting.value = false
}
}
function scoreComment(score: number): string {
if (score >= 80) return '心有灵犀！这片叶子饱满得像要发光 ✨'
if (score >= 60) return '相当默契，叶子长得很精神 🌿'
if (score >= 40) return '有点默契，叶子还在成长 🌱'
if (score >= 20) return '需要多聊聊，叶子还嫩着呢'
return '可能想到了不同的方向，但这也很可爱'
}
</script>
<style scoped>
.sync-view {
flex: 1; overflow-y: auto; padding: 24px;
background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-primary-lightest) 100%);
}
.sync-header { text-align: center; margin-bottom: 20px; }
.sync-header h2 { margin: 0; font-size: 22px; color: var(--color-primary-darker); }
.subtitle { font-size: 13px; color: var(--color-text-hint); margin: 4px 0 0; }
.sync-main { max-width: 480px; margin: 0 auto; }
.question-card {
background: var(--color-surface); border-radius: 14px; padding: 20px;
margin-bottom: 16px; border-left: 4px solid var(--color-primary);
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.q-label { font-size: 12px; color: var(--color-primary); font-weight: 600; margin-bottom: 6px; }
.q-content { font-size: 17px; font-weight: 600; color: var(--color-text-primary); line-height: 1.5; }
.answer-section { background: var(--color-surface); border-radius: 14px; padding: 20px; margin-bottom: 16px; }
.form-row { margin-bottom: 16px; }
.form-label { display: block; font-size: 13px; color: var(--color-text-secondary); margin-bottom: 6px; font-weight: 500; }
.result-card {
background: var(--color-surface); border-radius: 14px; padding: 24px; text-align: center;
border: 1px solid var(--color-border);
}
.result-card.revealed { border-color: var(--color-primary); box-shadow: 0 4px 16px rgba(0,150,136,0.15); }
.leaf-stage { display: flex; justify-content: center; margin-bottom: 12px; filter: drop-shadow(0 6px 12px rgba(0,150,136,0.2)); }
.result-leaf { width: 120px; height: 144px; }
.result-leaf.bloom { animation: bloom 0.8s ease; }
@keyframes bloom { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.score-display { margin-bottom: 4px; }
.score-num { font-size: 48px; font-weight: 800; color: var(--color-primary); }
.score-unit { font-size: 14px; color: var(--color-text-hint); margin-left: 4px; }
.score-comment { font-size: 14px; color: var(--color-text-secondary); margin-bottom: 20px; }
.answers-compare { display: flex; gap: 12px; text-align: left; }
.answer-box { flex: 1; padding: 12px; border-radius: 10px; background: var(--color-bg); }
.answer-box.mine { border-left: 3px solid var(--color-primary); }
.answer-box.partner { border-left: 3px solid var(--color-primary-lighter); }
.ans-label { display: block; font-size: 11px; font-weight: 700; color: var(--color-primary); margin-bottom: 4px; }
.ans-text { font-size: 13px; color: var(--color-text-primary); line-height: 1.5; }
.waiting { padding: 30px 0; }
.seed-sprout { font-size: 64px; animation: sprout 2s ease-in-out infinite; }
@keyframes sprout { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.waiting p { margin: 8px 0; color: var(--color-text-secondary); }
.waiting-hint { font-size: 12px; color: var(--color-text-hint) !important; }
</style>