From 04b6cb06357dc40d20424d7a334752f5e773ac07 Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Sun, 2 Jul 2023 13:23:14 +0800
Subject: [PATCH] =?UTF-8?q?pref:=20=E5=88=A0=E9=99=A4=E6=9A=82=E6=97=B6?=
 =?UTF-8?q?=E6=97=A0=E7=94=A8=E7=9A=84Navbar=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Iconify/index.vue |   3 +-
 src/components/Navbar/index.vue  | 129 -------------------------------
 2 files changed, 1 insertion(+), 131 deletions(-)
 delete mode 100644 src/components/Navbar/index.vue

diff --git a/src/components/Iconify/index.vue b/src/components/Iconify/index.vue
index 9cfe5bd..666bed3 100644
--- a/src/components/Iconify/index.vue
+++ b/src/components/Iconify/index.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup name="Iconify">
-import { computed, ref, unref } from 'vue';
 import { assign } from 'lodash-es';
 import { isBoolean } from '@/utils/is';
 
@@ -15,7 +14,7 @@ const props = defineProps({
     },
 });
 
-const iconSize = ref<string | boolean>(props.size ? `${props.size}rpx` : false);
+const iconSize = computed<string | boolean>(() => (props.size ? `${props.size}rpx` : false));
 let style = computed(() => {
     let ISize = unref(iconSize);
     return assign({ width: isBoolean(ISize) ? '' : ISize, height: isBoolean(ISize) ? '' : ISize }, { color: props.color });
diff --git a/src/components/Navbar/index.vue b/src/components/Navbar/index.vue
deleted file mode 100644
index 4f6e1ee..0000000
--- a/src/components/Navbar/index.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script lang="ts" setup name="Navbar">
-/**
- * 头部导航栏
- * @description 所有尺寸都用px2rpx做适配
- */
-import { useSystem } from '@/hooks/app/useSystem';
-import { px2rpx } from '@/utils/uniapi';
-import { computed, ref } from 'vue';
-import { useRoute, useRouter } from 'uni-mini-router';
-import { useGlobalStyle } from '@/hooks/app/useGlobalStyle';
-import Iconify from '@/components/Iconify/index.vue';
-import { HOME_PAGE } from '@/enums/routerEnum';
-
-const { navigationBarBackgroundColor, navigationBarTitleText, navigationBarTextStyle } = useGlobalStyle();
-
-const { currentRoute, currentPages } = useRoute();
-
-const props = defineProps({
-    bgColor: { type: String },
-    title: { type: String },
-    titleColor: { type: String },
-    titleSize: { type: [String, Number] },
-    iconSize: { type: [String, Number] },
-    gap: { type: Number, default: 8 },
-    isBackShow: { type: Boolean, default: true },
-    isHomeShow: { type: Boolean },
-    shadow: { type: Boolean, default: true },
-});
-
-const { statusBarHeight } = useSystem();
-const statusHeight = computed(() => `${px2rpx(statusBarHeight!)}rpx`);
-const defaultNavbarHeight = ref(44);
-const defaultTitleSize = ref(16);
-const defaultIconSize = ref(24);
-const navbarHeight = computed(() => `${px2rpx(defaultNavbarHeight.value)}rpx`);
-const headHeight = computed(() => `${px2rpx((statusBarHeight || 0) + defaultNavbarHeight.value)}rpx`);
-const sideGap = computed(() => `${px2rpx(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);
-const navbarTitleSize = computed(() => {
-    return `${px2rpx(defaultTitleSize.value) || props.titleSize}rpx`;
-});
-const navbarLeftIconSize = computed(() => {
-    return `${px2rpx(defaultIconSize.value) || props.titleSize}`;
-});
-const backShow = computed(() => {
-    return currentPages.length > 1 && props.isBackShow;
-});
-const backHomeShow = computed(() => {
-    return !currentRoute?.meta?.tabBar && props.isHomeShow;
-});
-
-const router = useRouter();
-const onBack = () => {
-    router.back();
-};
-const onBackHome = () => {
-    router.pushTab(HOME_PAGE);
-};
-</script>
-<template>
-    <view class="head-wrapper">
-        <view :class="['page-head', '_u_head-fixed', '_u_shadow']">
-            <!-- 顶部状态栏 -->
-            <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-nowrap _u_items-center _u_h-full _u_w3/10 _u_min-w3/10">
-                    <slot name="left">
-                        <view class="_u_h-full _u_flex _u_items-center">
-                            <template v-if="backShow">
-                                <Iconify
-                                    @click="onBack"
-                                    :size="navbarLeftIconSize"
-                                    :color="navbarTitleColor === true ? undefined : navbarTitleColor"
-                                    icon="i-humbleicons-chevron-left"
-                                />
-                            </template>
-                            <template v-if="backHomeShow">
-                                <Iconify
-                                    @click="onBackHome"
-                                    :size="navbarLeftIconSize"
-                                    :color="navbarTitleColor === true ? undefined : navbarTitleColor"
-                                    icon="i-iconoir-home-simple-door"
-                                />
-                            </template>
-                        </view>
-                    </slot>
-                </view>
-                <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-nowrap _u_justify-end _u_items-center _u_h-full _u_w3/10 _u_min-w3/10">
-                    <slot name="right"></slot>
-                </view>
-            </view>
-        </view>
-        <!-- 占位符 -->
-        <view class="placeholder"></view>
-    </view>
-</template>
-<style lang="scss" scoped>
-.head-wrapper {
-    .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 {
-                font-weight: bold;
-                font-size: v-bind(navbarTitleSize);
-                color: v-bind(navbarTitleColor);
-            }
-        }
-    }
-    &,
-    .placeholder {
-        height: v-bind(headHeight);
-        min-height: v-bind(headHeight);
-    }
-}
-</style>