Explorar el Código

feat: 更新 CustomNav 组件,支持动态左侧按钮类型,调整样式以增强用户体验

mcbaiyun hace 3 meses
padre
commit
ec5ecb5f1e

+ 44 - 10
src/components/CustomNav.vue

@@ -2,8 +2,16 @@
   <view class="custom-nav">
     <view class="status_bar"></view>
     <view class="nav-content">
-      <view class="nav-left" v-if="showBack" @click="goBack">
-        <uni-icons type="back" size="20" color="#333"></uni-icons>
+      <view class="nav-left" @click="leftTypeComputed !== 'none' && handleLeft()">
+        <template v-if="leftTypeComputed === 'back'">
+          <uni-icons type="back" size="20" color="#333"></uni-icons>
+        </template>
+        <template v-else-if="leftTypeComputed === 'home'">
+          <text class="home-text">首页</text>
+        </template>
+        <template v-else>
+          <!-- 占位,保持左右对称 -->
+        </template>
       </view>
       <view class="nav-title">{{ title }}</view>
       <view class="nav-right"></view>
@@ -12,19 +20,39 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { computed } from 'vue'
 
 interface Props {
   title: string
-  showBack?: boolean
+  // leftType: 'back' | 'home' | 'none',默认 'back'
+  leftType?: 'back' | 'home' | 'none'
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  showBack: true
+  leftType: 'back'
 })
 
-const goBack = () => {
-  uni.navigateBack()
+const leftTypeComputed = computed(() => props.leftType || 'back')
+
+const handleLeft = () => {
+  const t = leftTypeComputed.value
+  if (t === 'home') {
+    // 若首页为 tabBar 页,优先使用 switchTab
+    try {
+      uni.switchTab({ url: '/pages/index/index' })
+    } catch (e) {
+      // fallback 到 reLaunch / navigateTo
+      try {
+        uni.reLaunch({ url: '/pages/index/index' })
+      } catch (e2) {
+        uni.navigateTo({ url: '/pages/index/index' })
+      }
+    }
+    return
+  }
+  if (t === 'back') {
+    uni.navigateBack()
+  }
 }
 </script>
 
@@ -48,7 +76,7 @@ const goBack = () => {
 .nav-content {
   display: flex;
   align-items: center;
-  height: 44px;
+  height: 52px; /* increased to give more vertical space */
   padding: 0 15px;
 }
 
@@ -59,12 +87,18 @@ const goBack = () => {
   align-items: center;
 }
 
+.home-text {
+  font-size: 16px;
+  color: #333;
+}
+
 .nav-title {
   flex: 1;
   text-align: center;
-  font-size: 16px;
-  font-weight: 500;
+  font-size: 18px; /* slightly larger */
+  font-weight: 600;
   color: #333;
+  padding-block: 6px; /* nudge title down a bit for more top margin */
 }
 
 .nav-right {

+ 1 - 1
src/pages/health/health.vue

@@ -1,5 +1,5 @@
 <template>
-  <CustomNav title="健康数据" />
+  <CustomNav title="健康数据" leftType="none" />
   <view class="content">
     <PageTitle :title="title" />
   </view>

+ 1 - 1
src/pages/index/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <CustomNav title="慢病APP" />
+  <CustomNav title="慢病APP" leftType="none" />
   <view class="content">
     <image class="logo" src="/static/logo.png" />
     <PageTitle :title="title" />

+ 1 - 1
src/pages/login/login.vue

@@ -1,5 +1,5 @@
 <template>
-  <CustomNav title="登录" />
+  <CustomNav title="登录" leftType="home" />
   <view class="login-container">
     <view class="avatar-area">
       <!-- only available in Weixin Mini Program: chooseAvatar open-type -->

+ 4 - 4
src/pages/profile/profile.vue

@@ -1,5 +1,5 @@
 <template>
-  <CustomNav title="个人中心" />
+  <CustomNav title="个人中心" leftType="none" />
   <view class="profile-container">
     <view class="header">
       <view class="avatar-section">
@@ -20,15 +20,15 @@
     <view class="menu-list">
       <view class="menu-item" @click="onMenuClick('health')">
         <text class="menu-text">健康档案</text>
-        <text class="menu-arrow">></text>
+        <text class="menu-arrow"></text>
       </view>
       <view class="menu-item" @click="onMenuClick('settings')">
         <text class="menu-text">设置</text>
-        <text class="menu-arrow">></text>
+        <text class="menu-arrow"></text>
       </view>
       <view class="menu-item" @click="onMenuClick('about')">
         <text class="menu-text">关于我们</text>
-        <text class="menu-arrow">></text>
+        <text class="menu-arrow"></text>
       </view>
     </view>