From f7d6554e9b78de23edef772ffe198b74f877af04 Mon Sep 17 00:00:00 2001
From: bridge <wangxin4qiao@163.com>
Date: Thu, 8 Jan 2026 22:49:23 +0800
Subject: [PATCH] update objective front end

---
 web/src/components/LoadingOverlay.vue         |  1 +
 .../game/panels/info/AvatarDetail.vue         | 50 +++++++++++++++----
 2 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/web/src/components/LoadingOverlay.vue b/web/src/components/LoadingOverlay.vue
index 6ca7b9e..867182d 100644
--- a/web/src/components/LoadingOverlay.vue
+++ b/web/src/components/LoadingOverlay.vue
@@ -51,6 +51,7 @@ const tips = [
   '境界之间，战力差距极大，越阶挑战难于登天',
   '天命之子特质的角色，好运连连，奇遇不断',
   '现代世界的穿越者，只想回到现实世界，但这是不可能的',
+  '丹药有生效的时间限制',
 ]
 
 const currentTip = ref(tips[Math.floor(Math.random() * tips.length)])
diff --git a/web/src/components/game/panels/info/AvatarDetail.vue b/web/src/components/game/panels/info/AvatarDetail.vue
index ca523b8..d6df445 100644
--- a/web/src/components/game/panels/info/AvatarDetail.vue
+++ b/web/src/components/game/panels/info/AvatarDetail.vue
@@ -76,6 +76,18 @@ async function handleClearObjective() {
     </div>
 
     <div class="content-scroll">
+      <!-- Objectives -->
+      <div v-if="!data.is_dead" class="objectives-banner">
+        <div class="objective-item">
+          <span class="label">长期目标</span>
+          <span class="value">{{ data.long_term_objective || '无' }}</span>
+        </div>
+        <div class="objective-item">
+          <span class="label">短期目标</span>
+          <span class="value">{{ data.short_term_objective || '无' }}</span>
+        </div>
+      </div>
+
       <!-- Action State Banner -->
       <div v-if="!data.is_dead && data.action_state" class="action-banner">
         {{ data.action_state }}
@@ -184,16 +196,6 @@ async function handleClearObjective() {
         </div>
       </div>
 
-      <!-- Objectives -->
-      <div class="section">
-        <div class="section-title">长期目标</div>
-        <div class="text-content">{{ data.long_term_objective || '无' }}</div>
-      </div>
-      <div class="section">
-        <div class="section-title">短期目标</div>
-        <div class="text-content">{{ data.short_term_objective || '无' }}</div>
-      </div>
-
       <!-- Effects -->
       <div class="section" v-if="data['当前效果'] && data['当前效果'] !== '无'">
         <div class="section-title">当前效果</div>
@@ -263,6 +265,34 @@ async function handleClearObjective() {
   border: 1px solid rgba(23, 125, 220, 0.3);
 }
 
+.objectives-banner {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 6px;
+  margin-bottom: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.objective-item {
+  display: flex;
+  gap: 8px;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.objective-item .label {
+  color: #888;
+  white-space: nowrap;
+  font-weight: bold;
+}
+
+.objective-item .value {
+  color: #ccc;
+}
+
 .content-scroll {
   flex: 1;
   overflow-y: auto;