init

src/components/NavBar/index.tsx

@@ -0,0 +1,84 @@
+import { useCallback } from 'react'
+import Taro from '@tarojs/taro'
+import { NavBar as VantNavBar } from '@antmjs/vantui'
+import type { NavBarProps } from '@antmjs/vantui/types/nav-bar'
+
+export interface CustomNavBarProps extends NavBarProps {
+  /**
+   * 自定义返回逻辑
+   * 不传则默认调用 Taro.navigateBack()
+   * 返回 false 可阻止默认行为（例如需要在返回前做判断）
+   */
+  onBack?: () => void
+}
+
+/**
+ * 通用导航栏组件
+ *
+ * 用于所有非 tab-bar 页面的顶部导航，封装了 VantUI NavBar：
+ * - 默认显示返回箭头 + "返回" 文字
+ * - 默认点击返回调用 navigateBack()
+ * - 通过 onBack 可自定义返回逻辑（如跳转到指定页面）
+ * - 通过 title 自定义标题，通过 renderTitle 可传入复杂标题内容
+ * - 通过 renderRight 可在右侧添加按钮/图标
+ *
+ * 使用前请确保页面 config 中设置了 navigationStyle: 'custom'
+ */
+export default function CustomNavBar(props: CustomNavBarProps) {
+  const {
+    title,
+    onBack,
+    leftArrow = true,
+    leftText = '返回',
+    fixed = true,
+    placeholder = true,
+    border = true,
+    safeAreaInsetTop = true,
+    renderTitle,
+    renderRight,
+    renderLeft,
+    rightText,
+    onClickRight,
+    children,
+    ...rest
+  } = props
+
+  const handleClickLeft = useCallback(
+    (e: any) => {
+      if (onBack) {
+        onBack()
+      } else {
+        // 如果页面栈 > 1 则返回，否则跳转到首页
+        const pages = Taro.getCurrentPages()
+        if (pages.length > 1) {
+          Taro.navigateBack()
+        } else {
+          Taro.switchTab({ url: '/pages/index/index' })
+        }
+      }
+    },
+    [onBack],
+  )
+
+  return (
+    <VantNavBar
+      title={title}
+      style='box-sizing: content-box;'
+      leftArrow={leftArrow}
+      leftText={leftText}
+      fixed={fixed}
+      placeholder={placeholder}
+      border={border}
+      safeAreaInsetTop={safeAreaInsetTop}
+      renderTitle={renderTitle}
+      renderRight={renderRight}
+      renderLeft={renderLeft}
+      rightText={rightText}
+      onClickLeft={handleClickLeft}
+      onClickRight={onClickRight}
+      {...rest}
+    >
+      {children}
+    </VantNavBar>
+  )
+}

src/components/SafeBottomBox/index.tsx

@@ -0,0 +1,14 @@
+import Taro from "@tarojs/taro";
+import {useEffect, useState} from "react";
+import {View} from "@tarojs/components";
+
+export default () => {
+  const [safeBottom, setSafeBottom] = useState(0)
+
+  useEffect(() => {
+    const info = Taro.getSystemInfoSync()
+    setSafeBottom((info.screenHeight - info.safeArea!.bottom) || 0)
+  }, []);
+
+  return <View style={{ height: `${safeBottom}px` }}></View>
+}