style(GradientHeader): 调整布局和样式以提升可读性和交互性

调整了按钮和标题的布局，使其在显示返回按钮时居中。添加了 z-index 以确保元素层叠顺序正确，提升用户体验。

 <template>
 <template>
   <header class="bg-gradient-to-r from-green-50 to-blue-50 p-4 relative">
   <header class="bg-gradient-to-r from-green-50 to-blue-50 p-4 relative">
-    <div class="flex items-center justify-between">
+    <div class="flex items-center justify-between relative">
       <button
       <button
         v-if="showBackButton"
         v-if="showBackButton"
         @click="onBack"
         @click="onBack"
-        class="p-2 rounded-full bg-white/30 backdrop-blur-sm"
+        class="p-2 rounded-full bg-white/30 backdrop-blur-sm z-10"
         aria-label="返回"
         aria-label="返回"
       >
       >
         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
         </svg>
         </svg>
       </button>
       </button>
-      <h1 :class="['text-xl font-medium text-center', showBackButton ? 'flex-1' : '']">
+      <h1 :class="{
+        'absolute left-1/2 -translate-x-1/2': showBackButton,
+        'text-xl font-medium': true
+      }">
         {{ title }}
         {{ title }}
       </h1>
       </h1>
-      <div v-if="rightContent" v-html="rightContent.content"></div>
+      <div v-if="rightContent" class="z-10" v-html="rightContent.content"></div>
     </div>
     </div>
   </header>
   </header>
 </template>
 </template>