wip-navbar component

src/components/Navbar/index.vue

@@ -2,9 +2,21 @@
   import { useSystem } from '@/hooks/useSystem';
   import { px2rpx } from '@/utils/uniapi';
   import { computed, ref } from 'vue';
+  import { useRoute } from '@/hooks/router';
+  import { useGlobalStyle } from '@/hooks/useGlobalStyle';
+
+  const {
+    navigationBarBackgroundColor,
+    navigationBarTitleText,
+    navigationBarTextStyle,
+  } = useGlobalStyle();
+
+  const { currentRoute } = useRoute();
 
   const props = defineProps({
     bgColor: { type: String },
+    title: { type: String },
+    titleColor: { type: String },
     gap: { type: [String, Number], default: 24 },
   });
 
@@ -18,10 +30,25 @@
     () => `${px2rpx((statusBarHeight || 0) + defaultNavbarHeight.value)}rpx`,
   );
   const sideGap = computed(() => `${props.gap}rpx`);
+  const navbarBgColor = computed(
+    () => props.bgColor || navigationBarBackgroundColor,
+  );
+  const navbarTitle = computed(
+    () =>
+      props.title ||
+      currentRoute?.style?.navigationBarTitleText ||
+      navigationBarTitleText,
+  );
+  const navbarTitleColor = computed(
+    () =>
+      props.titleColor ||
+      currentRoute?.style?.navigationBarTextStyle ||
+      navigationBarTextStyle,
+  );
 </script>
 <template>
-  <view class="head-wrapper _u_bg-lime-400">
-    <view class="_u_head-fixed">
+  <view class="head-wrapper">
+    <view class="page-head _u_head-fixed">
       <!-- 顶部状态栏 -->
       <view class="status-bar"></view>
       <!-- navbar -->
@@ -29,17 +56,22 @@
         class="navbar-wrapper _u_flex _u_flex-nowrap _u_justify-between _u_items-center"
       >
         <view
-          class="_u_flex _u_flex-row-reverse _u_justify-flex-start _u_items-center _u_h-full"
-          >left</view
+          class="_u_flex _u_flex-nowrap _u_justify-flex-start _u_items-center _u_h-full _u_w3/10 _u_min-w3/10"
         >
+          <slot name="left">left</slot>
+        </view>
         <view
-          class="_u_flex _u_flex-row-reverse _u_justify-center _u_items-center _u_h-full _u_w2/5 _u_min-w2/5"
-          ><text>标题</text></view
+          class="navbar__center _u_flex _u_flex-nowrap _u_justify-center _u_items-center _u_h-full _u_w2/5 _u_min-w2/5"
         >
+          <slot>
+            <text>{{ navbarTitle }}</text>
+          </slot>
+        </view>
         <view
-          class="_u_flex _u_flex-row-reverse _u_justify-flex-end _u_items-center _u_h-full"
-          >right</view
+          class="_u_flex _u_flex-nowrap _u_justify-flex-end _u_items-center _u_h-full _u_w3/10 _u_min-w3/10"
         >
+          <slot name="right"></slot>
+        </view>
       </view>
     </view>
     <!-- 占位符 -->
@@ -48,13 +80,19 @@
 </template>
 <style lang="scss" scoped>
   .head-wrapper {
-    .status-bar {
-      height: v-bind(statusHeight);
-    }
-    .navbar-wrapper {
-      height: v-bind(navbarHeight);
-      padding-left: v-bind(sideGap);
-      padding-right: v-bind(sideGap);
+    .page-head {
+      background: v-bind(navbarBgColor);
+      .status-bar {
+        height: v-bind(statusHeight);
+      }
+      .navbar-wrapper {
+        height: v-bind(navbarHeight);
+        padding-left: v-bind(sideGap);
+        padding-right: v-bind(sideGap);
+        .navbar__center {
+          color: v-bind(navbarTitleColor);
+        }
+      }
     }
     &,
     .placeholder {

src/hooks/useGlobalStyle.ts

@@ -0,0 +1,20 @@
+import pagesJson from '@/pages.json';
+
+const { globalStyle } = pagesJson;
+/**
+ * 全局样式
+ */
+export const useGlobalStyle = () => {
+  const {
+    navigationBarTextStyle,
+    navigationBarTitleText,
+    navigationBarBackgroundColor,
+    backgroundColor,
+  } = globalStyle;
+  return {
+    navigationBarTextStyle,
+    navigationBarTitleText,
+    navigationBarBackgroundColor,
+    backgroundColor,
+  };
+};

src/pages.json

@@ -88,7 +88,10 @@
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "uni-app",
     "navigationBarBackgroundColor": "#F8F8F8",
-    "backgroundColor": "#F8F8F8"
+    "backgroundColor": "#F8F8F8",
+    "navigationStyle": "default",
+    "renderingMode": "seperated",
+    "pageOrientation": "portrait"
   },
   "tabBar": {
     "color": "#474747",