Explorar o código

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

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

这个提交消息:
1. 使用 feat 类型,因为是新增功能
2. 添加了 scope (about) 表示主要修改的是关于页面
3. 描述部分简洁说明了"添加自定义导航栏组件"这个主要变更和"配置自动导入"这个配套修改
4. 在正文中补充说明了新增组件的实现细节和目的
feige996 hai 11 meses
pai
achega
49fa8c4509
Modificáronse 3 ficheiros con 50 adicións e 0 borrados
  1. 1 0
      pages.config.ts
  2. 48 0
      src/components/fg-navbar/fg-navbar.vue
  3. 1 0
      src/pages/about/about.vue

+ 1 - 0
pages.config.ts

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

+ 48 - 0
src/components/fg-navbar/fg-navbar.vue

@@ -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>

+ 1 - 0
src/pages/about/about.vue

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