feat(about): 添加自定义导航栏组件并配置自动导入

在关于页面添加自定义导航栏组件 fg-navbar,并配置 pages.config.ts 实现自动导入
新增 fg-navbar 组件,基于 wd-navbar 封装,提供统一的导航栏样式和返回逻辑
```

这个提交消息:
1. 使用 feat 类型,因为是新增功能
2. 添加了 scope (about) 表示主要修改的是关于页面
3. 描述部分简洁说明了"添加自定义导航栏组件"这个主要变更和"配置自动导入"这个配套修改
4. 在正文中补充说明了新增组件的实现细节和目的
This commit is contained in:
feige996 2025-05-26 21:09:47 +08:00
parent ef7c1fd389
commit 49fa8c4509
3 changed files with 50 additions and 0 deletions

View File

@ -11,6 +11,7 @@ export default defineUniPages({
easycom: { easycom: {
autoscan: true, autoscan: true,
custom: { custom: {
'^fg-(.*)': '@/components/fg-$1/fg-$1.vue',
'^wd-(.*)': 'wot-design-uni/components/wd-$1/wd-$1.vue', '^wd-(.*)': 'wot-design-uni/components/wd-$1/wd-$1.vue',
'^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)': '^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)':
'z-paging/components/z-paging$1/z-paging$1.vue', 'z-paging/components/z-paging$1/z-paging$1.vue',

View File

@ -0,0 +1,48 @@
<script lang="ts" setup>
withDefaults(defineProps<{
leftText?: string;
rightText?: string;
leftArrow?: boolean;
bordered?: boolean;
fixed?: boolean;
placeholder?: boolean;
zIndex?: number;
safeAreaInsetTop?: boolean;
leftDisabled?: boolean;
rightDisabled?: boolean;
}>(), {
leftText: '返回',
rightText: '',
leftArrow: true,
bordered: true,
fixed: false,
placeholder: true,
zIndex: 1,
safeAreaInsetTop: true,
leftDisabled: false,
rightDisabled: false,
});
function handleClickLeft() {
uni.navigateBack({
fail() {
uni.reLaunch({
url: '/pages/index/index',
});
},
});
}
</script>
<template>
<wd-navbar
:left-text="leftText" :right-text="rightText" :left-arrow="leftArrow"
:bordered="bordered" :fixed="fixed" :placeholder="placeholder" :z-index="zIndex"
:safe-area-inset-top="safeAreaInsetTop" :left-disabled="leftDisabled" :right-disabled="rightDisabled"
@click-left="handleClickLeft"
>
<template #title>
<slot />
</template>
</wd-navbar>
</template>

View File

@ -11,6 +11,7 @@
class="bg-white overflow-hidden pt-2 px-4" class="bg-white overflow-hidden pt-2 px-4"
:style="{ marginTop: safeAreaInsets?.top + 'px' }" :style="{ marginTop: safeAreaInsets?.top + 'px' }"
> >
<fg-navbar>关于</fg-navbar>
<view class="text-center text-3xl mt-8"> <view class="text-center text-3xl mt-8">
鸽友们好我是 鸽友们好我是
<text class="text-red-500">菲鸽</text> <text class="text-red-500">菲鸽</text>