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

mwy

Browse Source
This commit is contained in:
flowerstonezl
2026-05-19 21:05:31 +08:00
parent 4ae691bfb4
commit a65cb05d5d
15 changed files with 2443 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
frontend/src/components/ReconcilePage.vue Normal file
View File

@@ -0,0 +1,171 @@
<script setup lang="ts">
import { usePreferredReducedMotion } from '@vueuse/core'
import { computed } from 'vue'
import type { Memory } from '../api/client'
import { getStandardNepalTheme } from '../constants/nepalThemes'
import PolaroidCard from './PolaroidCard.vue'
import { renderMarkdown } from '../utils/renderMarkdown'
const props = defineProps<{
memory: Memory
}>()
const bodyHtml = computed(() => renderMarkdown(props.memory.main_text))
const theme = computed(() => getStandardNepalTheme(props.memory.nepal_art_style))
const reduceMotion = usePreferredReducedMotion()
</script>
<template>
<div
class="relative mx-auto max-w-lg overflow-hidden rounded-3xl bg-gradient-to-br px-3 pb-8 pt-6 sm:px-5 sm:pb-10 sm:pt-8"
:class="theme.gradient"
>
<div
class="pointer-events-none absolute -left-10 top-12 h-44 w-44 rounded-full bg-emerald-300/22 blur-[3rem]"
aria-hidden="true"
/>
<div
class="pointer-events-none absolute -right-10 bottom-10 h-52 w-52 rounded-full bg-cyan-300/18 blur-[3.5rem]"
aria-hidden="true"
/>
<div
class="relative z-[1] mx-auto mb-7 max-w-[min(100%,396px)] overflow-hidden rounded-[2rem] border border-emerald-200/65 bg-[linear-gradient(180deg,#f7fffb_0%,#eefcf7_100%)] shadow-[0_24px_56px_-18px_rgba(16,185,129,0.22)]"
>
<div class="pointer-events-none absolute inset-0 nepal-fiber opacity-[0.14] mix-blend-multiply" />
<div class="relative px-5 pb-5 pt-5 sm:px-6 sm:pb-6">
<div class="flex items-start justify-between gap-4">
<div>
<p class="text-[10px] font-semibold uppercase tracking-[0.32em] text-emerald-700/65">
Make Up / 05.04
</p>
<h3 class="mt-2 font-display-cn text-[1.9rem] leading-none text-emerald-950">
和好了，在一起吧
</h3>
</div>
<div
class="rounded-2xl border border-emerald-200/70 bg-white/88 px-3 py-2 text-right shadow-[0_8px_20px_rgba(16,185,129,0.12)]"
>
<p class="text-[9px] font-semibold tracking-[0.22em] text-emerald-700/70">
关系状态
</p>
<p class="mt-1 font-brush text-xl text-emerald-950">已和好</p>
</div>
</div>
<div class="mt-6 rounded-[1.8rem] border border-emerald-200/60 bg-white/78 p-4 shadow-inner">
<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'"
>
<p class="text-[10px] font-semibold uppercase tracking-[0.25em] text-rose-700/65">
Before
</p>
<p class="mt-2 text-lg font-medium text-rose-950">别扭、沉默、想解释</p>
</div>
<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'"
>
♡
</div>
<div class="absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-gradient-to-r from-rose-200 via-emerald-300 to-cyan-200" aria-hidden="true" />
</div>
<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'"
>
<p class="text-[10px] font-semibold uppercase tracking-[0.25em] text-cyan-700/65">
After
</p>
<p class="mt-2 text-lg font-medium text-cyan-950">说开了、靠近了、在一起了</p>
</div>
</div>
<div class="mt-4 rounded-[1.4rem] border border-emerald-200/75 bg-emerald-50/85 px-4 py-4">
<div class="flex flex-wrap justify-center gap-2">
<span
v-for="tag in ['把话说完', '空气变甜', '正式在一起']"
:key="tag"
class="rounded-full border border-emerald-200 bg-white/85 px-3 py-1.5 text-[11px] font-medium text-emerald-800/85"
>
{{ tag }}
</span>
</div>
</div>
</div>
</div>
</div>
<div class="relative z-[1] flex flex-col gap-6 sm:gap-8">
<PolaroidCard :memory="memory" :index="memory.story_order" compact />
<div
class="nepal-torn-panel mx-auto max-w-md border border-emerald-200/70 bg-gradient-to-b from-[#fffefa] to-emerald-50/65 px-5 py-6 shadow-[0_16px_36px_-12px_rgba(16,185,129,0.18)] ring-1 ring-white/80 sm:px-6 sm:py-7"
>
<div class="mb-4 h-1 w-14 rounded-full bg-gradient-to-r from-emerald-400 to-cyan-400" aria-hidden="true" />
<div
class="text-[15px] leading-[1.82] tracking-wide text-emerald-950/88 [&_a]:font-bold [&_a]:text-cyan-700 [&_a]:underline [&_a]:underline-offset-4 [&_blockquote]:border-l-4 [&_blockquote]:border-emerald-300/60 [&_blockquote]:bg-emerald-50/55 [&_blockquote]:py-1 [&_blockquote]:pl-3 [&_blockquote]:text-emerald-900/70 [&_code]:rounded [&_code]:bg-emerald-100/50 [&_code]:px-1.5 [&_strong]:text-emerald-950 [&_p+p]:mt-4"
v-html="bodyHtml"
/>
</div>
</div>
</div>
</template>
<style scoped>
.reconcile-heartbeat {
animation: reconcile-heartbeat 2.4s ease-in-out infinite;
}
@keyframes reconcile-heartbeat {
0%,
100% {
transform: scale(1);
}
20% {
transform: scale(1.08);
}
36% {
transform: scale(0.98);
}
56% {
transform: scale(1.05);
}
}
.reconcile-card-left {
animation: reconcile-card-left 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.reconcile-card-right {
animation: reconcile-card-right 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes reconcile-card-left {
0% {
opacity: 0;
transform: translateX(-16px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes reconcile-card-right {
0% {
opacity: 0;
transform: translateX(16px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
</style>