70 lines
1.8 KiB
TypeScript
70 lines
1.8 KiB
TypeScript
import { defineStore } from 'pinia'
|
||
import { ref } from 'vue'
|
||
|
||
/** 侧边栏最小宽度 */
|
||
export const MIN_SIDEBAR_WIDTH = 200
|
||
/** 侧边栏最大宽度 */
|
||
export const MAX_SIDEBAR_WIDTH = 650
|
||
/** 侧边栏默认宽度 */
|
||
export const DEFAULT_SIDEBAR_WIDTH = 400
|
||
|
||
export const useBaseLayoutStore = defineStore(
|
||
'baseLayout',
|
||
() => {
|
||
/** 顶部导航栏标题 */
|
||
const topbarTitle = ref<string>('')
|
||
/** 当前选中的游戏 ID */
|
||
const activeGameId = ref<string>('snake')
|
||
/** 当前选中的游戏图标 */
|
||
const activeGameIcon = ref<string>('🐍')
|
||
/** 当前选中的游戏名称 */
|
||
const activeGameName = ref<string>('贪吃蛇')
|
||
/** 侧边栏当前宽度 */
|
||
const sidebarWidth = ref<number>(DEFAULT_SIDEBAR_WIDTH)
|
||
|
||
/**
|
||
* 设置顶部导航栏标题
|
||
* @param title - 标题文本
|
||
*/
|
||
const setTopbarTitle = (title: string): void => {
|
||
topbarTitle.value = title
|
||
}
|
||
|
||
/**
|
||
* 更新当前选中的游戏信息
|
||
* @param id - 游戏 ID
|
||
* @param icon - 游戏图标
|
||
* @param name - 游戏名称
|
||
*/
|
||
const setActiveGame = (id: string, icon: string, name: string): void => {
|
||
activeGameId.value = id
|
||
activeGameIcon.value = icon
|
||
activeGameName.value = name
|
||
}
|
||
|
||
/**
|
||
* 设置侧边栏宽度，自动约束在最小和最大值之间
|
||
* @param width - 新宽度（px）
|
||
*/
|
||
const setSidebarWidth = (width: number): void => {
|
||
sidebarWidth.value = Math.min(Math.max(width, MIN_SIDEBAR_WIDTH), MAX_SIDEBAR_WIDTH)
|
||
}
|
||
|
||
return {
|
||
topbarTitle,
|
||
activeGameId,
|
||
activeGameIcon,
|
||
activeGameName,
|
||
sidebarWidth,
|
||
setTopbarTitle,
|
||
setActiveGame,
|
||
setSidebarWidth
|
||
}
|
||
},
|
||
{
|
||
persist: {
|
||
pick: ['activeGameId', 'activeGameIcon', 'activeGameName']
|
||
}
|
||
}
|
||
)
|