From ddddcf83e7deb9d0a674d2bbead300089530d87e Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期三, 21 五月 2025 13:24:07 +0800
Subject: [PATCH] feat: UI
---
apps/h5/src/components/NavigationBar/CommonNavigationBar.vue | 71 +++++++++++++++--------------------
1 files changed, 30 insertions(+), 41 deletions(-)
diff --git a/apps/h5/src/components/NavigationBar/CommonNavigationBar.vue b/apps/h5/src/components/NavigationBar/CommonNavigationBar.vue
index c2e9a93..07c508b 100644
--- a/apps/h5/src/components/NavigationBar/CommonNavigationBar.vue
+++ b/apps/h5/src/components/NavigationBar/CommonNavigationBar.vue
@@ -4,14 +4,10 @@
:class="['common-navigation-bar-wrapper', { dark: props.mode == 'dark' }]"
:style="barStyle"
>
- <div
- class="menu-btn-wrapper"
- v-if="(!isLastPage || !isTabbarPage) && showLeftArrow"
- @click="handleBack()"
- >
+ <div class="menu-btn-wrapper" v-if="!isLastPage && showLeftArrow" @click="goBack()">
<img class="menu-btn" :src="props.mode == 'dark' ? IconArrowWhite : IconArrow" />
</div>
- <span class="common-navigation-bar-title">{{ title }}</span>
+ <div class="common-navigation-bar-title">{{ title }}</div>
</div>
</NavBar>
</template>
@@ -19,86 +15,79 @@
<script setup lang="ts">
import NavBar from './NavBar.vue';
import { commonNavigationBarProps } from './commonNavigationBar';
-import { useSystemStore } from '@/stores/modules/system';
import { CSSProperties } from 'vue';
import IconArrow from '@/assets/common/icon-navi-arrow.png';
import IconArrowWhite from '@/assets/common/icon-navi-arrow-white.png';
-import Taro from '@tarojs/taro';
-import { goBack } from '@/utils';
-import { TabBarPageRouter } from '@/constants';
+import { useCanGoBack } from '@/hooks';
defineOptions({
name: 'CommonNavigationBar',
});
-const systemStore = useSystemStore();
-
const props = defineProps(commonNavigationBarProps);
-const router = Taro.useRouter();
+const router = useRouter();
+
+const { isCanGoBack } = useCanGoBack();
const isLastPage = computed(() => {
- const pages = Taro.getCurrentPages();
- return pages.length <= 1;
+ return !isCanGoBack.value;
});
+// const isTabbarPage = computed(() =>
+// Object.values(TabBarPageRouterForCheck).some((x) => x.toLowerCase() === router.path.toLowerCase())
+// );
-const isTabbarPage = computed(() =>
- Object.values(TabBarPageRouter).some((x) => x.toLowerCase() === router.path.toLowerCase())
-);
+function goBack() {
+ router.back();
+}
const barStyle = computed(() => {
- const distance = systemStore.menuButtonWidth + systemStore.menuButtonRightDistance + 4;
+ const distance = 24;
return {
paddingLeft: `${distance}px`,
paddingRight: `${distance}px`,
- height: systemStore.navigationBarHeight + 'px',
+ height: 44 + 'px',
} as CSSProperties;
});
-
-function handleBack() {
- if (props.backFn) {
- props.backFn();
- } else {
- goBack();
- }
-}
</script>
<style lang="scss">
-@import '@/styles/common.scss';
+@use '@/style/common.scss' as *;
.common-navigation-bar-wrapper {
- width: 100%;
- line-height: 1;
- font-size: 32px;
- color: boleGetCssVar('color', 'title-color');
- min-width: 0;
position: relative;
- align-items: center;
display: flex;
justify-content: center;
+ align-items: center;
+ width: 100%;
+ min-width: 0;
+ font-size: 16px;
+ color: boleGetCssVar('color', 'title-color');
+ line-height: 1;
.common-navigation-bar-title {
- @include ellipsis;
+ @include utils-ellipsis;
font-weight: 600;
+ color: getCssVar('text-color', 'primary');
+ line-height: 1.5;
}
&.dark {
- color: #fff;
+ color: #ffffff;
}
.menu-btn-wrapper {
- padding: 20px;
- padding-left: 0;
position: absolute;
left: boleGetCssVar('size', 'body-padding-h');
+ padding: 10px;
+ padding-left: 0;
// top: -20px;
}
.menu-btn {
- width: 20px;
- height: 30px;
+ width: 10px;
+ height: 15px;
}
}
</style>
--
Gitblit v1.9.1