From 8294c12d177efb540b5ec33998b5b66fc9d0cf6d Mon Sep 17 00:00:00 2001
From: Julian Freeman <freemanjulian372@gmail.com>
Date: Wed, 25 Feb 2026 11:55:55 -0400
Subject: [PATCH] fix eval ui on the bottom

---
 src/App.vue | 72 ++++++++++++++++++++++++++---------------------------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 486ea4e..126faac 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -609,46 +609,46 @@ const translate = async () => {
               {{ targetText }}
             </template>
             <span v-else class="text-slate-300 dark:text-slate-600 italic">翻译结果将在此显示...</span>
+          </div>
 
-            <!-- Evaluation Results -->
-            <div v-if="isEvaluating || evaluationResult" class="mt-8 pt-6 border-t dark:border-slate-800 space-y-4 animate-in fade-in slide-in-from-bottom-2 duration-500">
-              <div class="flex items-center justify-between">
-                <div class="flex items-center gap-2">
-                  <div :class="cn(
-                    'w-2 h-2 rounded-full',
-                    isEvaluating ? 'bg-blue-400 animate-pulse' : (evaluationResult?.score && evaluationResult.score >= 80 ? 'bg-green-500' : evaluationResult?.score && evaluationResult.score >= 60 ? 'bg-amber-500' : 'bg-red-500')
-                  )"></div>
-                  <h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest">质量审计</h3>
-                </div>
-                <div v-if="evaluationResult" :class="cn(
-                  'text-lg font-black font-mono',
-                  evaluationResult.score >= 80 ? 'text-green-600' : evaluationResult.score >= 60 ? 'text-amber-600' : 'text-red-600'
-                )">
-                  {{ evaluationResult.score }} <span class="text-[10px] font-normal opacity-50">/ 100</span>
-                </div>
-                <div v-else-if="isEvaluating" class="flex items-center gap-1.5 text-xs text-blue-500 font-medium">
-                  <Loader2 class="w-3 h-3 animate-spin" />
-                  正在审计...
-                </div>
+          <!-- Evaluation Results -->
+          <div v-if="isEvaluating || evaluationResult" class="px-6 py-4 bg-slate-200/20 dark:bg-slate-800/20 border-t border-dashed dark:border-slate-800 space-y-4 animate-in fade-in slide-in-from-bottom-2 duration-500 overflow-y-auto max-h-80 shrink-0">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-2">
+                <div :class="cn(
+                  'w-2 h-2 rounded-full',
+                  isEvaluating ? 'bg-blue-400 animate-pulse' : (evaluationResult?.score && evaluationResult.score >= 80 ? 'bg-green-500' : evaluationResult?.score && evaluationResult.score >= 60 ? 'bg-amber-500' : 'bg-red-500')
+                )"></div>
+                <h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest">质量审计</h3>
               </div>
+              <div v-if="evaluationResult" :class="cn(
+                'text-lg font-black font-mono',
+                evaluationResult.score >= 80 ? 'text-green-600' : evaluationResult.score >= 60 ? 'text-amber-600' : 'text-red-600'
+              )">
+                {{ evaluationResult.score }} <span class="text-[10px] font-normal opacity-50">/ 100</span>
+              </div>
+              <div v-else-if="isEvaluating" class="flex items-center gap-1.5 text-xs text-blue-500 font-medium">
+                <Loader2 class="w-3 h-3 animate-spin" />
+                正在审计...
+              </div>
+            </div>
 
-              <div v-if="evaluationResult" class="space-y-3">
-                <div class="bg-slate-50 dark:bg-slate-800/40 p-3 rounded-lg border border-slate-100 dark:border-slate-800/60">
-                  <p class="text-xs text-slate-600 dark:text-slate-300 leading-relaxed">
-                    {{ evaluationResult.analysis }}
-                  </p>
+            <div v-if="evaluationResult" class="space-y-3">
+              <div class="bg-slate-50 dark:bg-slate-800/40 p-3 rounded-lg border border-slate-100 dark:border-slate-800/60">
+                <p class="text-xs text-slate-600 dark:text-slate-300 leading-relaxed">
+                  {{ evaluationResult.analysis }}
+                </p>
+              </div>
+              
+              <div v-if="evaluationResult.improvements" class="space-y-2 pt-2">
+                <div class="flex items-center gap-2">
+                  <div class="w-2 h-2 rounded-full bg-blue-500"></div>
+                  <h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest">建议优化</h3>
                 </div>
-                
-                <div v-if="evaluationResult.improvements" class="space-y-2 pt-2">
-                  <div class="flex items-center gap-2">
-                    <div class="w-2 h-2 rounded-full bg-blue-500"></div>
-                    <h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest">建议优化</h3>
-                  </div>
-                  <div class="bg-blue-50/50 dark:bg-blue-900/10 p-3 rounded-lg border border-blue-100/50 dark:border-blue-900/20">
-                    <p class="text-xs text-slate-600 dark:text-slate-300 leading-relaxed">
-                      {{ evaluationResult.improvements }}
-                    </p>
-                  </div>
+                <div class="bg-blue-50/50 dark:bg-blue-900/10 p-3 rounded-lg border border-blue-100/50 dark:border-blue-900/20">
+                  <p class="text-xs text-slate-600 dark:text-slate-300 leading-relaxed">
+                    {{ evaluationResult.improvements }}
+                  </p>
                 </div>
               </div>
             </div>