From 36aa262834e13a0742403224a72471d2fa9191e4 Mon Sep 17 00:00:00 2001
From: ozh <sylphy.ou@tfegroup.com.hk>
Date: Wed, 9 Sep 2026 16:14:50 +0800
Subject: [PATCH] =?UTF-8?q?feat(device-tab):=20=E6=99=BA=E8=83=BD=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E9=A1=B5=E5=A4=B4=E9=83=A8=E5=88=87=E6=8D=A2=E4=B8=BA?=
 =?UTF-8?q?=E7=BB=BF=E8=89=B2=E6=B8=90=E5=8F=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Navbar 新增 variant: 'default' | 'hero' 可选 prop，默认 default 保持现有白底黑字。hero 模式背景为深绿到亮绿垂直渐变，标题白色。智能设备 tab 引用 hero 复刻设计参考图视觉；其余页面 Navbar 调用点不动。
---
 src/components/navbar/index.module.scss | 11 +++++++++++
 src/components/navbar/index.tsx         |  6 ++++--
 src/pages/device/index.tsx              |  2 +-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/navbar/index.module.scss b/src/components/navbar/index.module.scss
index 6546978..3a63af1 100644
--- a/src/components/navbar/index.module.scss
+++ b/src/components/navbar/index.module.scss
@@ -57,3 +57,14 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+// hero 变体：智能设备 tab 等需要绿色品牌头部的页面使用
+// 垂直渐变贴近设计参考图：顶部深绿、底部亮绿；局部样式不引入新 token
+.navbarHero {
+  background: linear-gradient(180deg, #0da89b 0%, #2ccb98 100%);
+}
+
+// hero 模式下标题反白，避免与渐变背景对比度不足
+.titleHero {
+  color: #ffffff;
+}
diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx
index d900709..04f261c 100644
--- a/src/components/navbar/index.tsx
+++ b/src/components/navbar/index.tsx
@@ -9,6 +9,7 @@ interface Props {
   autoBack?: boolean       // 默认 true（修复 uni-app up-navbar 坑）
   border?: boolean         // 默认 false
   safeAreaTop?: boolean    // 默认 true
+  variant?: 'default' | 'hero'   // hero 为绿色渐变头部，default 为白底黑字
   onBack?: () => void
 }
 
@@ -18,6 +19,7 @@ export function Navbar({
   autoBack = true,
   border = false,
   safeAreaTop = true,
+  variant = 'default',
   onBack
 }: Props) {
   // getSystemInfoSync 已废弃，改用 getWindowInfo
@@ -30,7 +32,7 @@ export function Navbar({
 
   return (
     <View
-      className={styles.navbar}
+      className={`${styles.navbar} ${variant === 'hero' ? styles.navbarHero : ''}`}
       style={{
         paddingTop: safeAreaTop ? `${statusBarHeight}px` : 0,
         position: fixed ? 'fixed' : 'relative',
@@ -44,7 +46,7 @@ export function Navbar({
           </View>
         )}
         <View className={styles.titleWrap}>
-          <Text className={styles.title}>{title}</Text>
+          <Text className={`${styles.title} ${variant === 'hero' ? styles.titleHero : ''}`}>{title}</Text>
         </View>
       </View>
     </View>
diff --git a/src/pages/device/index.tsx b/src/pages/device/index.tsx
index 807b051..30eb830 100644
--- a/src/pages/device/index.tsx
+++ b/src/pages/device/index.tsx
@@ -52,7 +52,7 @@ export default function DeviceList() {
 
   return (
     <View className={styles.page}>
-      <Navbar title="智能设备" autoBack={false} />
+      <Navbar title="智能设备" autoBack={false} variant="hero" />
 
       <View className={styles.siteRow} onClick={goSceneSelect}>
         <Text className={styles.siteText}>{scene?.name || '请选择场所'}</Text>