91 lines
3.5 KiB
Vue
91 lines
3.5 KiB
Vue
|
<script setup>
|
|||
|
|
// 分析页目前为静态占位，实现基础对话 UI，后续接入真实 AI 逻辑
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="h-full flex flex-col animate-fade-in pb-6">
|
|||
|
|
<div class="flex items-center gap-3 mb-4">
|
|||
|
|
<div
|
|||
|
|
class="w-10 h-10 rounded-full bg-gradient-warm flex items-center justify-center text-white shadow-lg shadow-orange-200"
|
|||
|
|
>
|
|||
|
|
<i class="ph-fill ph-sparkle" />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h2 class="text-xl font-extrabold text-stone-800">AI 财务顾问</h2>
|
|||
|
|
<p class="text-xs text-stone-400">Powered by Gemini</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Chat Area -->
|
|||
|
|
<div class="flex-1 overflow-y-auto space-y-5 pr-1 pb-2">
|
|||
|
|
<!-- Bot Message -->
|
|||
|
|
<div class="flex gap-3">
|
|||
|
|
<div
|
|||
|
|
class="w-8 h-8 rounded-full bg-stone-100 flex items-center justify-center text-stone-400 mt-1 shrink-0"
|
|||
|
|
>
|
|||
|
|
<i class="ph-fill ph-robot" />
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
class="bg-white p-4 rounded-2xl rounded-tl-none shadow-sm border border-stone-100 text-sm text-stone-600 leading-relaxed max-w-[85%]"
|
|||
|
|
>
|
|||
|
|
<p>你好 Alex！👋 我分析了你本周的饮食记录。</p>
|
|||
|
|
<div class="mt-3 bg-stone-50 rounded-xl p-3 border border-stone-100">
|
|||
|
|
<div class="flex items-center gap-2 mb-2">
|
|||
|
|
<i class="ph-fill ph-warning text-orange-400" />
|
|||
|
|
<span class="font-bold text-stone-700 text-xs">高热量警告</span>
|
|||
|
|
</div>
|
|||
|
|
<p class="text-xs">
|
|||
|
|
周二和周四的晚餐摄入热量超标 30%，主要是因为“炸鸡”和“奶茶”。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<p class="mt-3">建议今晚尝试清淡饮食，比如蔬菜沙拉或三文鱼。</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- User Message -->
|
|||
|
|
<div class="flex gap-3 flex-row-reverse">
|
|||
|
|
<div
|
|||
|
|
class="bg-stone-700 text-white p-4 rounded-2xl rounded-tr-none shadow-lg text-sm max-w-[85%]"
|
|||
|
|
>
|
|||
|
|
如果是自己做饭，有什么推荐的食谱吗？要简单的。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Bot Message 2 -->
|
|||
|
|
<div class="flex gap-3">
|
|||
|
|
<div
|
|||
|
|
class="w-8 h-8 rounded-full bg-stone-100 flex items-center justify-center text-stone-400 mt-1 shrink-0"
|
|||
|
|
>
|
|||
|
|
<i class="ph-fill ph-robot" />
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
class="bg-white p-4 rounded-2xl rounded-tl-none shadow-sm border border-stone-100 text-sm text-stone-600 leading-relaxed max-w-[85%]"
|
|||
|
|
>
|
|||
|
|
<p>基于你冰箱里的食材（上次记录），推荐：</p>
|
|||
|
|
<p class="font-bold text-stone-800 mt-2 mb-1">🥑 牛油果虾仁拌饭</p>
|
|||
|
|
<ul class="list-disc list-inside text-xs space-y-1 marker:text-orange-400">
|
|||
|
|
<li>热量：约 450 kcal</li>
|
|||
|
|
<li>耗时：10 分钟</li>
|
|||
|
|
<li>成本：约 ¥18</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Input Area -->
|
|||
|
|
<div class="mt-2 relative shrink-0">
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
placeholder="输入消息..."
|
|||
|
|
class="w-full pl-5 pr-12 py-3.5 rounded-full bg-white border border-stone-100 focus:outline-none focus:border-orange-300 focus:ring-4 focus:ring-orange-50 transition text-sm shadow-sm text-stone-700 font-medium placeholder-stone-300"
|
|||
|
|
/>
|
|||
|
|
<button
|
|||
|
|
class="absolute right-2 top-2 w-9 h-9 bg-gradient-warm text-white rounded-full flex items-center justify-center hover:scale-105 transition shadow-md"
|
|||
|
|
>
|
|||
|
|
<i class="ph-bold ph-arrow-up" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|