4465c4d613
- 修复 TabBar 切换激活状态不同步问题 - 修复大量 Wot UI 2.x 图标名称不匹配 - 修复暗黑模式下主题变量错误注入导致亮色模式显示异常 - 优化个人中心 UI（头像标记、图标背景色、菜单结构） - 重构首页图表时间选择器为自定义分段选择器 - 修复登录弹窗文字丢失及验证顺序 - 修复设置页面布局、退出登录按钮及 cell 点击态
137 lines
3.2 KiB
TypeScript
137 lines
3.2 KiB
TypeScript
import { ref, computed } from "vue";
|
||
|
||
/**
|
||
* TabBar 状态管理
|
||
*
|
||
* 提供底部导航栏的状态管理功能，包括激活状态切换、徽标数字设置等。
|
||
*
|
||
* @example
|
||
* ```ts
|
||
* const { tabbarList, setTabbarItemActive, setTabbarItem } = useTabbar()
|
||
*
|
||
* // 切换到工作台
|
||
* setTabbarItemActive('work')
|
||
*
|
||
* // 设置徽标数字
|
||
* setTabbarItem('work', 5)
|
||
* ```
|
||
*/
|
||
|
||
export interface TabbarItem {
|
||
/** 唯一标识 */
|
||
name: string;
|
||
/** 徽标数字，null 表示不显示 */
|
||
value: number | null;
|
||
/** 是否激活 */
|
||
active: boolean;
|
||
/** 显示标题 */
|
||
title: string;
|
||
/** 图标名称 */
|
||
icon: string;
|
||
}
|
||
|
||
/** 默认 TabBar 配置 */
|
||
const DEFAULT_TABBAR_ITEMS: Omit<TabbarItem, "active">[] = [
|
||
{ name: "home", value: null, title: "首页", icon: "home" },
|
||
{ name: "work", value: null, title: "工作台", icon: "apps" },
|
||
{ name: "mine", value: null, title: "我的", icon: "user" },
|
||
];
|
||
|
||
/**
|
||
* 创建 TabBar 状态实例
|
||
*
|
||
* 使用工厂函数创建独立的状态实例，避免模块级别的状态污染。
|
||
* 每个调用者都可以获得独立的状态管理。
|
||
*/
|
||
function createTabbarState() {
|
||
const items = ref<TabbarItem[]>(
|
||
DEFAULT_TABBAR_ITEMS.map((item, index) => ({
|
||
...item,
|
||
active: index === 0,
|
||
}))
|
||
);
|
||
|
||
/** TabBar 列表 */
|
||
const tabbarList = computed(() => items.value);
|
||
|
||
/** 当前激活的 TabBar 项 */
|
||
const activeTabbar = computed(() => {
|
||
return items.value.find((item) => item.active) || items.value[0];
|
||
});
|
||
|
||
/**
|
||
* 获取指定 TabBar 项的徽标数字
|
||
* @param name TabBar 项名称
|
||
*/
|
||
const getTabbarItemValue = (name: string): number | null => {
|
||
const item = items.value.find((item) => item.name === name);
|
||
return item?.value ?? null;
|
||
};
|
||
|
||
/**
|
||
* 设置 TabBar 项的徽标数字
|
||
* @param name TabBar 项名称
|
||
* @param value 徽标数字
|
||
*/
|
||
const setTabbarItem = (name: string, value: number): void => {
|
||
const item = items.value.find((item) => item.name === name);
|
||
if (item) {
|
||
item.value = value;
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 设置激活的 TabBar 项
|
||
* @param name TabBar 项名称
|
||
*/
|
||
const setTabbarItemActive = (name: string): void => {
|
||
items.value.forEach((item) => {
|
||
item.active = item.name === name;
|
||
});
|
||
};
|
||
|
||
/**
|
||
* 重置 TabBar 状态
|
||
*/
|
||
const resetTabbar = (): void => {
|
||
items.value = DEFAULT_TABBAR_ITEMS.map((item, index) => ({
|
||
...item,
|
||
active: index === 0,
|
||
}));
|
||
};
|
||
|
||
return {
|
||
tabbarList,
|
||
activeTabbar,
|
||
getTabbarItemValue,
|
||
setTabbarItem,
|
||
setTabbarItemActive,
|
||
resetTabbar,
|
||
};
|
||
}
|
||
|
||
/** 全局单例实例 */
|
||
let tabbarInstance: ReturnType<typeof createTabbarState> | null = null;
|
||
|
||
/**
|
||
* TabBar 状态管理 Hook
|
||
*
|
||
* 默认使用全局单例模式，确保整个应用共享同一状态。
|
||
* 如需独立状态，可传入 `{ singleton: false }` 创建新实例。
|
||
*
|
||
* @param options 配置选项
|
||
* @param options.singleton 是否使用单例模式，默认 true
|
||
*/
|
||
export function useTabbar(options?: { singleton?: boolean }) {
|
||
const { singleton = true } = options ?? {};
|
||
|
||
if (singleton) {
|
||
if (!tabbarInstance) {
|
||
tabbarInstance = createTabbarState();
|
||
}
|
||
return tabbarInstance;
|
||
}
|
||
|
||
return createTabbarState();
|
||
}
|