flowzl/mwy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mwy quanji

Browse Source
This commit is contained in:
flowerstonezl
2026-05-21 15:30:57 +08:00
parent 6cc3fdf411
commit 3f84ad1891
13 changed files with 449 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/components/ReconcilePage.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import { usePreferredReducedMotion } from '@vueuse/core'
import { computed } from 'vue'
import { computed, ref } from 'vue'
import type { Memory } from '../api/client'
import { getStandardNepalTheme } from '../constants/nepalThemes'
import PolaroidCard from './PolaroidCard.vue'
@@ -13,6 +13,7 @@ const props = defineProps<{
const bodyHtml = computed(() => renderMarkdown(props.memory.main_text))
const theme = computed(() => getStandardNepalTheme(props.memory.nepal_art_style))
const reduceMotion = usePreferredReducedMotion()
const talkedItOut = ref(false)
</script>
<template>
@@ -58,7 +59,10 @@ const reduceMotion = usePreferredReducedMotion()
<div class="grid gap-3 sm:grid-cols-[0.92fr_0.16fr_0.92fr] sm:items-center">
<div
class="rounded-[1.5rem] border border-rose-200/65 bg-rose-50/88 px-4 py-4 shadow-[0_10px_20px_rgba(244,114,182,0.08)]"
:class="reduceMotion === 'reduce' ? '' : 'reconcile-card-left'"
:class="[
reduceMotion === 'reduce' ? '' : 'reconcile-card-left',
talkedItOut ? 'sm:translate-x-2' : '',
]"
>
<p class="text-[10px] font-semibold uppercase tracking-[0.25em] text-rose-700/65">
Before
@@ -69,7 +73,13 @@ const reduceMotion = usePreferredReducedMotion()
<div class="relative flex items-center justify-center py-2">
<div
class="flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-br from-emerald-300 to-cyan-300 text-2xl text-white shadow-[0_14px_28px_rgba(16,185,129,0.22)]"
:class="reduceMotion === 'reduce' ? '' : 'reconcile-heartbeat'"
:class="[
reduceMotion === 'reduce' ? '' : 'reconcile-heartbeat',
talkedItOut ? 'scale-110' : '',
]"
role="button"
tabindex="0"
@click="talkedItOut = !talkedItOut"
>
♡
</div>
@@ -78,7 +88,10 @@ const reduceMotion = usePreferredReducedMotion()
<div
class="rounded-[1.5rem] border border-cyan-200/70 bg-cyan-50/88 px-4 py-4 shadow-[0_10px_20px_rgba(34,211,238,0.08)]"
:class="reduceMotion === 'reduce' ? '' : 'reconcile-card-right'"
:class="[
reduceMotion === 'reduce' ? '' : 'reconcile-card-right',
talkedItOut ? 'sm:-translate-x-2' : '',
]"
>
<p class="text-[10px] font-semibold uppercase tracking-[0.25em] text-cyan-700/65">
After
@@ -98,6 +111,19 @@ const reduceMotion = usePreferredReducedMotion()
</span>
</div>
</div>
<div class="mt-4 flex flex-col items-center gap-2">
<button
type="button"
class="rounded-full border border-emerald-200 bg-white/92 px-4 py-2 text-xs font-semibold tracking-[0.18em] text-emerald-900 transition hover:bg-emerald-50"
@click="talkedItOut = !talkedItOut"
>
{{ talkedItOut ? '先把话收回一点' : '把话说开' }}
</button>
<p class="text-center text-[11px] leading-relaxed text-emerald-900/70">
{{ talkedItOut ? '说开以后，卡在中间的那口气终于顺了。' : '轻点一下，让“Before”和“After”靠近一点。' }}
</p>
</div>
</div>
</div>
</div>