小程序导航SmoUI 自研

宠粉现场底部导航

用于宠粉现场 C 端小程序的固定底部导航。一级入口稳定为首页、发起、我的；中间发起使用上浮 PNG 主动作；我的页可切换成“我是商家”并进入商家后台。

查看预览 Registry 资产

定位

基础组件直接使用 shadcn/ui；SmoUI 维护中文业务规则、模板和验收流程。

源码路径

registry-src/smo-miniprogram-bottom-nav

快速开始

页面里直接调用 SmoUI 业务组件。组件内部可以复用 shadcn/ui 底座，但对外暴露的是 Smo 场景语义。

安装到项目

npx shadcn@latest add https://smoui.xiaomolian.com/r/smo-miniprogram-bottom-nav.json
# 再从 /visual-assets 复制 smofanBottomNav.* PNG 到 src/assets/icons 与 src/assets/ui

页面直接调用

import { BottomNav } from "@/components/BottomNav"

export default function ExamplePage() {
  return (
    <BottomNav
  active="profile"
  profileMerchantEntryEnabled
  routes={{
    home: "/pages/home/index",
    publish: "/pages/interactions/index",
    profile: "/pages/profile/index",
    profileMerchant: "/pages/merchant/index"
  }}
/>
  )
}

Preview / Code

预览使用 Smo 业务语境命名，避免只停留在抽象控件展示。

4 个变体

registry-src/smo-miniprogram-bottom-nav

宠粉现场

首页

发起

我的

宠粉现场

首页

发起

我是商家

变体

首页选中

生成页面时按业务语义选择，不按视觉喜好随机切换。

发起主动作

生成页面时按业务语义选择，不按视觉喜好随机切换。

我的选中

生成页面时按业务语义选择，不按视觉喜好随机切换。

我是商家入口态

生成页面时按业务语义选择，不按视觉喜好随机切换。

业务组合

复用底座原语

底层继续使用 shadcn/ui 和 Base UI，不把基础按钮、弹窗、卡片重新发明一遍。

映射 Smo 场景

根据 SmoArch、SmoLink、smolink-online、SmoFan、SmoMark 的边界决定组件出现的位置和状态。

沉淀业务模板

成熟组合进入页面模板和 registry，让下一次从一句话生成 UI 时可以复用。

SMO 使用规则

这是 SmoFan C 端一级导航，不作为所有小程序的默认 tabbar。

一级入口只保留首页 / 发起 / 我的；互动不再作为底栏文案，发起入口承接发布/创建动作。

中间发起按钮必须使用 SmoUI 已沉淀的 PNG 资产，不再用 CSS 伪元素画红圆和加号。

我的页商家入口态使用人物在前、淡店铺在后的整图，不能额外叠加气泡、店铺 badge 或说明文案。

组件 registry 分发 TSX/CSS；PNG 资产从 /visual-assets 的 smofanBottomNav.* 资产包复制到目标项目 src/assets。

API 参考

属性	类型	默认值	说明
active	`"home" \| "publish" \| "profile"`	-	当前选中的一级入口。
routes	`BottomNavRoutes`	SmoFan 默认小程序路径	覆盖首页、发起、我的和商家后台入口路径。
entryParams	`BottomNavEntryParams`	-	透传 industry、activityId、shareCode 和 traceToken 到跨页面入口。
profileMerchantEntryEnabled	`boolean`	true	我的页选中态是否切换成“我是商家”，并点击进入商家后台。
onNavigate	`(url: string, id: BottomNavKey) => void`	Taro.redirectTo	自定义导航回调；未传时使用 Taro.redirectTo。
className	`string`	-	挂到外层 bottom-nav，用于少量业务侧定位修正。