🧩 uni-app 组件

uni-app 组件位于 src/components/，分为基础组件和业务组件两类。基础组件使用 <base-*> Easycom 前缀，无需 import 即可在任意页面直接使用；业务组件需按需导入。

📦 基础组件

BasePage

src/components/base/BasePage.vue

标准页面容器，提供导航栏、安全区域和统一背景色。每个页面都应以此作为根元素。

vue

<template>
  <base-page title="用户详情">
    <!-- 页面内容 -->
  </base-page>
</template>

Prop	类型	默认值	说明
`title`	`String`	`''`	页面标题
`navbar`	`Boolean`	`true`	是否显示导航栏
`showBack`	`Boolean`	`true`	是否显示返回按钮
`safeTop`	`Boolean`	`true`	顶部安全区域（隐藏导航栏时的小程序状态栏适配）
`safeBottom`	`Boolean`	`true`	底部安全区域
`background`	`String`	`'#f5f7fb'`	页面背景色

插槽：default

BaseNavbar

src/components/base/BaseNavbar.vue

固定导航栏，自动适配状态栏高度和微信小程序胶囊按钮间距。BasePage 内部已集成此组件，也可单独使用。

vue

<base-navbar title="设置">
  <template #right>
    <text @click="save">保存</text>
  </template>
</base-navbar>

Prop	类型	默认值	说明
`title`	`String`	`''`	标题文字
`showBack`	`Boolean`	`true`	显示返回箭头

插槽：right（右侧区域）

BaseImage

src/components/base/BaseImage.vue

图片组件，自动补全文件 URL 前缀，加载失败时切换为兜底图片。

vue

<base-image :src="item.cover" mode="aspectFill" />

Prop	类型	默认值	说明
`src`	`String`	`''`	图片地址
`fallback`	`String`	默认占位图	加载失败兜底图
`mode`	`String`	`'aspectFill'`	uni-app 图片模式

BaseList

src/components/base/BaseList.vue

列表/空状态切换容器。items 非空时渲染默认插槽，否则显示空状态。

vue

<base-list :items="list" empty-text="暂无订单">
  <view v-for="item in list" :key="item.id">
    <!-- 列表项 -->
  </view>
</base-list>

Prop	类型	默认值	说明
`items`	`Array`	—	数据数组（必填）
`emptyText`	`String`	`'暂无数据'`	空状态文字

插槽：default（items 非空时渲染）

BaseEmpty

src/components/base/BaseEmpty.vue

空状态占位组件，基于 uView 的 u-empty。

vue

<base-empty text="暂无收藏" />

Prop	类型	默认值	说明
`text`	`String`	`'暂无数据'`	提示文字

BaseLoading

src/components/base/BaseLoading.vue

居中加载动画，基于 uView 的 u-loading-icon。

vue

<base-loading text="加载中..." />

Prop	类型	默认值	说明
`text`	`String`	`'加载中...'`	提示文字

BaseRichText

src/components/base/BaseRichText.vue

富文本渲染组件，封装 uni-app 原生 <rich-text> 并提供默认排版样式。

vue

<base-rich-text :html="article.content" />

Prop	类型	默认值	说明
`html`	`String`	`''`	HTML 内容

BaseSafeArea

src/components/base/BaseSafeArea.vue

底部安全区域占位，高度等于设备底部安全区。用于有固定底部元素的页面，避免内容被遮挡。

vue

<view class="fixed-bottom">
  <button>提交</button>
</view>
<base-safe-area />

无 Props，从 AppStore 读取安全区域高度。

🏠 业务组件

HomeHeader

src/components/HomeHeader.vue

首页固定品牌头部，显示带渐变效果的应用标题，自动适配状态栏。

vue

<home-header title="SunAdmin" />

Prop	类型	默认值	说明
`title`	`String`	`'SunAdmin'`	品牌标题
`background`	`String`	`'#ffffff'`	背景色

MainTabBar

src/components/MainTabBar.vue

自定义底部 Tab 栏。挂载时隐藏原生 tabBar，使用主题色高亮当前 Tab，通过 toRouter() 路由跳转。

vue

<main-tab-bar page="index" />

Prop	类型	默认值	说明
`page`	`'index'\|'my'`	—	当前激活的 Tab（必填）

AddressPicker

src/components/common/AddressPicker.vue

省市区三级联动选择器，基于 u-picker 实现，数据来自内置的 province-city-county.json。

vue

<address-picker
  :province="form.province"
  :city="form.city"
  :area="form.area"
  @confirm="onAddressConfirm"
/>

Prop	类型	默认值	说明
`province`	`String`	`''`	省
`city`	`String`	`''`	市
`area`	`String`	`''`	区
`placeholder`	`String`	`'请选择省市区'`	未选择时的占位文字

事件：confirm（返回 { province, city, area }）

DecorationRender

src/components/decoration/DecorationRender.vue

装修页面动态渲染器。接收后端装修系统生成的 DecorationData 对象，渲染对应的组件树。是装修页面（首页、我的页等）的核心渲染引擎。

vue

<decoration-render :data="pageData" />

模块装修组件由安装器生成入口：

text

src/modules/decoration-widgets.ts
src/modules/DecorationWidgetsRender.vue

这两个文件根据已安装且启用的模块自动生成，DecorationRender.vue 会通过它们判断并渲染模块提供的装修组件。模块卸载或停用后，安装器会重新生成空入口，主工程不应保留对该模块组件的硬编码引用。

Prop	类型	默认值	说明
`data`	`DecorationData\|null`	`null`	装修配置数据，包含 `page` 样式和 `widgets` 数组

支持的组件类型：

类型	说明
`swiper`	轮播图
`nav`	导航（网格 / 卡片 / 横滑三种模式）
`cube`	魔方图片（6 种布局变体）
`image`	单图
`article`	文章列表（自动请求接口）
`search`	搜索栏
`blank`	空白占位
`separator`	分割线
`title-bar`	标题栏
`notice`	公告栏
`rich-text`	富文本
`entry`	入口卡片（3 种展示模式）
`map`	地图卡片
`button`	按钮
`countdown`	倒计时
`user-info`	用户信息卡
`user-banner`	用户横幅
`contact`	联系客服
`link-list`	链接列表
`copyright`	版权信息

每个组件支持通用样式配置：内边距、外边距、背景、边框、阴影和圆角。装修数据由后端"页面装修"功能维护，前端无需手动编写。

🧩 uni-app 组件 ​

📦 基础组件 ​

BasePage ​

BaseNavbar ​

BaseImage ​

BaseList ​

BaseEmpty ​

BaseLoading ​

BaseRichText ​

BaseSafeArea ​

🏠 业务组件 ​

HomeHeader ​

MainTabBar ​

AddressPicker ​

DecorationRender ​