feat: 分端显示

This commit is contained in:
FlowerWater
2025-12-17 17:01:46 +08:00
parent 5e3d3708c6
commit 3c21b074c4
16 changed files with 1723 additions and 119 deletions

View File

@@ -2,13 +2,11 @@ import type { TabBar } from '@uni-helper/vite-plugin-uni-pages'
import type { CustomTabBarItem, NativeTabBarItem } from './types'
/**
* tabbar 选择的策略,更详细的介绍见 tabbar.md 文件
* 0: 'NO_TABBAR' `无 tabbar`
* 1: 'NATIVE_TABBAR' `完全原生 tabbar`
* 2: 'CUSTOM_TABBAR_WITH_CACHE' `有缓存自定义 tabbar`
* 3: 'CUSTOM_TABBAR_WITHOUT_CACHE' `无缓存自定义 tabbar`
*
* 温馨提示:本文件的任何代码更改了之后,都需要重新运行,否则 pages.json 不会更新导致配置不生效
* tabbar 选择的策略
* 0: 'NO_TABBAR' 无 tabbar
* 1: 'NATIVE_TABBAR' 完全原生 tabbar
* 2: 'CUSTOM_TABBAR_WITH_CACHE' 有缓存自定义 tabbar
* 3: 'CUSTOM_TABBAR_WITHOUT_CACHE' 无缓存自定义 tabbar
*/
export const TABBAR_STRATEGY_MAP = {
NO_TABBAR: 0,
@@ -17,113 +15,143 @@ export const TABBAR_STRATEGY_MAP = {
CUSTOM_TABBAR_WITHOUT_CACHE: 3,
}
// TODO: 1/3. 通过这里切换使用tabbar的策略
// 如果是使用 NO_TABBAR(0)nativeTabbarList 和 customTabbarList 都不生效(里面的配置不用管)
// 如果是使用 NATIVE_TABBAR(1),只需要配置 nativeTabbarListcustomTabbarList 不生效
// 如果是使用 CUSTOM_TABBAR(2,3),只需要配置 不生效
export const selectedTabbarStrategy = TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE
// TODO: 2/3. 使用 NATIVE_TABBAR 时,更新下面的 tabbar 配置
// 原生 tabbar 配置(备用)
export const nativeTabbarList: NativeTabBarItem[] = [
{
iconPath: 'static/tabbar/home.png',
selectedIconPath: 'static/tabbar/homeHL.png',
pagePath: 'pages/index/index',
text: '数字广东',
text: '首页',
},
{
iconPath: 'static/tabbar/personal.png',
selectedIconPath: 'static/tabbar/personalHL.png',
pagePath: 'pages/me/me',
text: '个人',
text: '我的',
},
]
// TODO: 3/3. 使用 CUSTOM_TABBAR(2,3) 时,更新下面的 tabbar 配置
// 如果需要配置鼓包,需要在 'tabbar/store.ts' 里面设置,最后在 `tabbar/index.vue` 里面更改鼓包的图片
export const customTabbarList: CustomTabBarItem[] = [
// ==================== 用户端 Tabbar 配置 ====================
export const userTabbarList: CustomTabBarItem[] = [
{
text: '数字广东',
text: '首页',
pagePath: 'pages/index/index',
// 注意 unocss 图标需要如下处理:(二选一)
// 1在fg-tabbar.vue页面上引入一下并注释掉见tabbar/index.vue代码第2行
// 2配置到 unocss.config.ts 的 safelist 中
iconType: 'image',
icon: '/static/logo2.png',
iconActive: '/static/logo1.png',
// badge: 'dot',
},
{
pagePath: 'pages/sort/index',
text: '分类',
// 1在fg-tabbar.vue页面上引入一下并注释掉见tabbar/index.vue代码第2行
// 2配置到 unocss.config.ts 的 safelist 中
iconType: 'unocss',
icon: 'i-carbon-view-mode-2',
// badge: 10,
},
{
pagePath: 'pages/goods/cart',
text: '购物车',
// 1在fg-tabbar.vue页面上引入一下并注释掉见tabbar/index.vue代码第2行
// 2配置到 unocss.config.ts 的 safelist 中
iconType: 'unocss',
icon: 'i-carbon-shopping-cart',
// badge: 10,
},
{
pagePath: 'pages/me/me',
text: '我的',
// 1在fg-tabbar.vue页面上引入一下并注释掉见tabbar/index.vue代码第2行
// 2配置到 unocss.config.ts 的 safelist 中
iconType: 'unocss',
icon: 'i-carbon-user',
// badge: 10,
},
// 其他类型演示
// 1、uiLib
// {
// pagePath: 'pages/index/index',
// text: '首页',
// iconType: 'uiLib',
// icon: 'home',
// },
// 2、iconfont
// {
// pagePath: 'pages/index/index',
// text: '首页',
// // 注意 iconfont 图标需要额外加上 'iconfont',如下
// iconType: 'iconfont',
// icon: 'iconfont icon-my',
// },
// 3、image
// {
// pagePath: 'pages/index/index',
// text: '首页',
// // 使用 image需要配置 icon + iconActive 2张图片
// iconType: 'image',
// icon: '/static/tabbar/home.png',
// iconActive: '/static/tabbar/homeHL.png',
// },
]
// ==================== 商家端 Tabbar 配置 ====================
export const merchantTabbarList: CustomTabBarItem[] = [
{
text: '工作台',
pagePath: 'pagesMerchant/dashboard/index',
iconType: 'unocss',
icon: 'i-carbon-dashboard',
},
{
pagePath: 'pagesMerchant/order/list',
text: '订单',
iconType: 'unocss',
icon: 'i-carbon-document',
},
{
pagePath: 'pagesMerchant/goods/list',
text: '商品',
iconType: 'unocss',
icon: 'i-carbon-product',
},
{
pagePath: 'pagesMerchant/finance/index',
text: '财务',
iconType: 'unocss',
icon: 'i-carbon-wallet',
},
{
pagePath: 'pagesMerchant/me/index',
text: '我的',
iconType: 'unocss',
icon: 'i-carbon-user',
},
]
// ==================== 银行端 Tabbar 配置 ====================
export const bankTabbarList: CustomTabBarItem[] = [
{
text: '工作台',
pagePath: 'pagesBank/dashboard/index',
iconType: 'unocss',
icon: 'i-carbon-analytics',
},
{
pagePath: 'pagesBank/audit/list',
text: '审核',
iconType: 'unocss',
icon: 'i-carbon-task-approved',
},
{
pagePath: 'pagesBank/customer/list',
text: '客户',
iconType: 'unocss',
icon: 'i-carbon-group',
},
{
pagePath: 'pagesBank/me/index',
text: '我的',
iconType: 'unocss',
icon: 'i-carbon-user',
},
]
// 根据客户端类型获取对应的 tabbar 配置
export type ClientTypeKey = 'user' | 'merchant' | 'bank'
export function getTabbarListByClientType(clientType: ClientTypeKey): CustomTabBarItem[] {
const tabbarMap: Record<ClientTypeKey, CustomTabBarItem[]> = {
user: userTabbarList,
merchant: merchantTabbarList,
bank: bankTabbarList,
}
return tabbarMap[clientType] || userTabbarList
}
// 默认使用用户端配置
export const customTabbarList: CustomTabBarItem[] = userTabbarList
/**
* 是否启用 tabbar 缓存
* NATIVE_TABBAR(1) 和 CUSTOM_TABBAR_WITH_CACHE(2) 时需要tabbar缓存
*/
export const tabbarCacheEnable
= [TABBAR_STRATEGY_MAP.NATIVE_TABBAR, TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE].includes(selectedTabbarStrategy)
/**
* 是否启用自定义 tabbar
* CUSTOM_TABBAR(2,3) 时启用自定义tabbar
*/
export const customTabbarEnable
= [TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE, TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITHOUT_CACHE].includes(selectedTabbarStrategy)
/**
* 是否需要隐藏原生 tabbar
* CUSTOM_TABBAR_WITH_CACHE(2) 时需要隐藏原生tabbar
*/
export const needHideNativeTabbar = selectedTabbarStrategy === TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE
@@ -131,7 +159,6 @@ const _tabbarList = customTabbarEnable ? customTabbarList.map(item => ({ text: i
export const tabbarList = customTabbarEnable ? customTabbarList : nativeTabbarList
const _tabbar: TabBar = {
// 只有微信小程序支持 custom。App 和 H5 不生效
custom: selectedTabbarStrategy === TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE,
color: '#999999',
selectedColor: '#018d71',
@@ -145,3 +172,4 @@ const _tabbar: TabBar = {
}
export const tabBar = tabbarCacheEnable ? _tabbar : undefined