feat(top-bar): add gradient header mode

src/components/common/TopBar.vue

@@ -1,5 +1,8 @@
 <template>
-  <view class="sticky top-0 z-40 bg-white border-b border-gray-100">
+  <view
+  class="sticky top-0 z-40"
+  :class="props.gradient ? 'bg-gradient-to-r from-blue-500 to-blue-600' : 'bg-white border-b border-gray-100'"
+>
     <view class="status-bar" :style="{ height: `${statusBarHeight}px` }"></view>
     <view class="top-bar px-4 flex items-center justify-between">
       <view class="flex items-center flex-1 min-w-0">
@@ -8,10 +11,20 @@
           class="mr-2 p-2 -ml-2 clickable rounded-lg"
           @click="goBack"
         >
-          <text class="text-gray-600 text-lg">←</text>
+          <text
+            class="text-lg"
+            :class="props.gradient ? 'text-white' : 'text-gray-600'"
+          >
+            ←
+          </text>
         </view>
         <slot name="left" />
-        <text class="text-base font-semibold text-gray-800 truncate">{{ title }}</text>
+        <text
+          class="text-base font-semibold truncate"
+          :class="props.gradient ? 'text-white' : 'text-gray-800'"
+        >
+          {{ title }}
+        </text>
       </view>
       <CapsuleSafeArea>
         <view class="flex items-center">
@@ -30,9 +43,11 @@ const props = withDefaults(
   defineProps<{
     title: string
     showBack?: boolean
+    gradient?: boolean
   }>(),
   {
-    showBack: false
+    showBack: false,
+    gradient: false
   }
 )