wip-navbar component

src/components/Navbar/index.vue

@@ -1,15 +1,65 @@
-<script lang="ts" setup name="Navbar"></script>
+<script lang="ts" setup name="Navbar">
+  import { useSystem } from '@/hooks/useSystem';
+  import { px2rpx } from '@/utils/uniapi';
+  import { computed, ref } from 'vue';
+
+  const props = defineProps({
+    bgColor: { type: String },
+    gap: { type: [String, Number], default: 24 },
+  });
+
+  const { statusBarHeight } = useSystem();
+  const statusHeight = computed(() => `${px2rpx(statusBarHeight!)}rpx`);
+  const defaultNavbarHeight = ref(44);
+  const navbarHeight = computed(
+    () => `${px2rpx(defaultNavbarHeight.value)}rpx`,
+  );
+  const headHeight = computed(
+    () => `${px2rpx((statusBarHeight || 0) + defaultNavbarHeight.value)}rpx`,
+  );
+  const sideGap = computed(() => `${props.gap}rpx`);
+</script>
 <template>
-  <view class="navbar-wrapper _u_bg-lime-400">
-    <!-- 顶部状态栏 S-->
-    <view class="status-bar"></view>
-    <!-- 顶部状态栏 E-->
+  <view class="head-wrapper _u_bg-lime-400">
+    <view class="_u_head-fixed">
+      <!-- 顶部状态栏 -->
+      <view class="status-bar"></view>
+      <!-- navbar -->
+      <view
+        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
+        >
+        <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
+        >
+        <view
+          class="_u_flex _u_flex-row-reverse _u_justify-flex-end _u_items-center _u_h-full"
+          >right</view
+        >
+      </view>
+    </view>
+    <!-- 占位符 -->
+    <view class="placeholder"></view>
   </view>
 </template>
 <style lang="scss" scoped>
-  .navbar-wrapper {
+  .head-wrapper {
     .status-bar {
-      height: var(--status-bar-height);
+      height: v-bind(statusHeight);
+    }
+    .navbar-wrapper {
+      height: v-bind(navbarHeight);
+      padding-left: v-bind(sideGap);
+      padding-right: v-bind(sideGap);
+    }
+    &,
+    .placeholder {
+      height: v-bind(headHeight);
+      min-height: v-bind(headHeight);
     }
   }
 </style>

src/hooks/useSystem.ts

@@ -0,0 +1,164 @@
+/**
+ * 系统信息
+ * @description 除去uni官方不推荐使用的返回参数
+ * @link https://uniapp.dcloud.net.cn/api/system/info.html
+ */
+export const useSystem = () => {
+  const {
+    // device
+    deviceId,
+    deviceBrand,
+    deviceModel,
+    deviceType,
+    devicePixelRatio,
+    deviceOrientation,
+    // os
+    osName,
+    osVersion,
+    osLanguage,
+    osTheme,
+    // @ts-ignore
+    osAndroidAPILevel,
+    // rom
+    romName,
+    romVersion,
+    // browser
+    browserName,
+    browserVersion,
+    // host
+    hostFontSizeSetting,
+    hostSDKVersion,
+    hostName,
+    hostVersion,
+    hostLanguage,
+    hostTheme,
+    hostPackageName,
+    // uni-app框架
+    uniPlatform,
+    uniCompileVersion,
+    uniRuntimeVersion,
+    // app
+    appId,
+    appName,
+    appVersion,
+    appVersionCode,
+    appLanguage,
+    // @ts-ignore
+    appWgtVersion,
+    // 其他
+    ua,
+    screenWidth,
+    screenHeight,
+    windowWidth,
+    windowHeight,
+    windowTop,
+    windowBottom,
+    statusBarHeight,
+    safeArea,
+    safeAreaInsets,
+    // 某些小程序特殊的返回参数
+    // @ts-ignore
+    benchmarkLevel,
+    // @ts-ignore
+    batteryLevel,
+    currentBattery,
+    navigationBarHeight,
+    titleBarHeight,
+    albumAuthorized,
+    cameraAuthorized,
+    locationAuthorized,
+    microphoneAuthorized,
+    notificationAuthorized,
+    notificationAlertAuthorized,
+    notificationBadgeAuthorized,
+    notificationSoundAuthorized,
+    bluetoothEnabled,
+    locationEnabled,
+    wifiEnabled,
+    cacheLocation,
+    storage,
+  } = uni.getSystemInfoSync();
+  const {
+    top: safeAreaTop,
+    bottom: safeAreaBottom,
+    left: safeAreaLeft,
+    right: safeAreaRight,
+    height: safeAreaHeight,
+    width: safeAreaWidth,
+  } = safeArea!;
+  const {
+    top: safeAreaInsetsTop,
+    bottom: safeAreaInsetsBottom,
+    left: safeAreaInsetsLeft,
+    right: safeAreaInsetsRight,
+  } = safeAreaInsets!;
+  return {
+    deviceId,
+    deviceBrand,
+    deviceModel,
+    deviceType,
+    devicePixelRatio,
+    deviceOrientation,
+    osName,
+    osVersion,
+    osLanguage,
+    osTheme,
+    osAndroidAPILevel,
+    romName,
+    romVersion,
+    browserName,
+    browserVersion,
+    hostFontSizeSetting,
+    hostSDKVersion,
+    hostName,
+    hostVersion,
+    hostLanguage,
+    hostTheme,
+    hostPackageName,
+    uniPlatform,
+    uniCompileVersion,
+    uniRuntimeVersion,
+    appId,
+    appName,
+    appVersion,
+    appVersionCode,
+    appLanguage,
+    appWgtVersion,
+    ua,
+    screenWidth,
+    screenHeight,
+    windowWidth,
+    windowHeight,
+    windowTop,
+    windowBottom,
+    statusBarHeight,
+    safeAreaTop,
+    safeAreaBottom,
+    safeAreaLeft,
+    safeAreaRight,
+    safeAreaHeight,
+    safeAreaWidth,
+    safeAreaInsetsTop,
+    safeAreaInsetsBottom,
+    safeAreaInsetsLeft,
+    safeAreaInsetsRight,
+    benchmarkLevel,
+    batteryLevel,
+    currentBattery,
+    navigationBarHeight,
+    titleBarHeight,
+    albumAuthorized,
+    cameraAuthorized,
+    locationAuthorized,
+    microphoneAuthorized,
+    notificationAuthorized,
+    notificationAlertAuthorized,
+    notificationBadgeAuthorized,
+    notificationSoundAuthorized,
+    bluetoothEnabled,
+    locationEnabled,
+    wifiEnabled,
+    cacheLocation,
+    storage,
+  };
+};

src/state/app.ts

@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia';
+
+interface AppState {
+  sys?: string | number;
+}
+
+export const useAppStore = defineStore({
+  id: 'app-store',
+  state: (): AppState => ({}),
+  getters: {},
+  actions: {},
+});

src/utils/uniapi/index.ts

@@ -33,3 +33,19 @@ export const GetClipboardData = () =>
       },
     });
   });
+
+/**
+ * rpx 换算为 px
+ * @param upx
+ */
+export const rpx2px = (upx: number) => {
+  return uni.upx2px(upx);
+};
+
+/**
+ * px 换算为 rpx
+ * @param upx
+ */
+export const px2rpx = (px: number) => {
+  return px / (uni.upx2px(100) / 100);
+};

unocss.config.js

@@ -47,6 +47,8 @@ export default defineConfig({
   shortcuts: [
     {
       'border-base': 'border border-gray-500_10',
+      '_u_z-tar-both': '_u_z-988',
+      '_u_head-fixed': '_u_fixed _u_top-0 _u_left-0 _u_w-full _u_z-tar-both',
       _u_center: '_u_flex _u_justify-center _u_items-center',
     },
   ],