122 lines
3.1 KiB
TypeScript
122 lines
3.1 KiB
TypeScript
import { defineStore } from 'pinia'
|
|
import type { Block, Layout } from './layout.types'
|
|
import { computed, reactive, ref, toRaw, watch } from 'vue'
|
|
import db from '@/db'
|
|
import useResource from './background/useResource'
|
|
import { globalToast } from '@/main'
|
|
|
|
const defaultLayout: Layout = {
|
|
content: [
|
|
{ background: '', pages: [] },
|
|
{ background: '', pages: [] },
|
|
{ background: '', pages: [] }
|
|
],
|
|
current: 0,
|
|
currentPage: 0,
|
|
dir: {},
|
|
dock: [null, null, null, null, null, null, null, null, null, null],
|
|
dockLabels: 'QWERASDFGB',
|
|
simple: false
|
|
}
|
|
|
|
export default defineStore('layout', () => {
|
|
const state = reactive(defaultLayout)
|
|
const ready = ref(false)
|
|
|
|
db.getItem<Layout>('layout').then((res) => {
|
|
if (res) {
|
|
Object.assign(state, res)
|
|
}
|
|
ready.value = true
|
|
})
|
|
watch(
|
|
[ready, state],
|
|
([re, s]) => {
|
|
if (!re) return
|
|
db.setItem('layout', toRaw(s))
|
|
},
|
|
{ deep: true }
|
|
)
|
|
watch(
|
|
() => state.current,
|
|
() => {
|
|
state.currentPage = 0
|
|
}
|
|
)
|
|
const currentMode = computed(() => state.content[state.current])
|
|
const currentPage = computed(() => {
|
|
return (
|
|
currentMode.value.pages[state.simple ? 0 : state.currentPage] || {
|
|
list: [],
|
|
label: '',
|
|
name: ''
|
|
}
|
|
)
|
|
})
|
|
|
|
const background = useResource(
|
|
computed(() => state.content[state.current]?.background || ''),
|
|
'background'
|
|
)
|
|
// 是让时间和搜索改变位置，使画面更紧凑 —— @/layout/grid
|
|
const isCompact = ref(false)
|
|
|
|
// 添加图标
|
|
const addBlock = (block: Block, _page: number = -1) => {
|
|
const page = _page >= 0 ? _page : state.currentPage
|
|
if (!state.content[state.current].pages[page]) {
|
|
globalToast.warning('请先添加页面')
|
|
return
|
|
}
|
|
const pageList = state.content[state.current].pages[page].list
|
|
pageList.push(block)
|
|
globalToast.success('添加成功')
|
|
}
|
|
const openDir = ref('')
|
|
// 文件夹只有一个时，将当前界面的文件夹替换为图标
|
|
const checkDir = (id: string) => {
|
|
const dir = state.dir[id]
|
|
if (!dir) return
|
|
if (dir && dir.list.length === 1) {
|
|
const item = dir.list[0]
|
|
if (!item) return
|
|
const idx = currentPage.value.list.findIndex((el) => el.link === 'id:' + id)
|
|
if (idx < 0) return
|
|
currentPage.value.list.splice(idx, 1, toRaw(item))
|
|
if (openDir.value === id) {
|
|
openDir.value = ''
|
|
}
|
|
}
|
|
}
|
|
|
|
const getLabel = (block: Block) => {
|
|
if (block.link.startsWith('id:')) {
|
|
const dir = state.dir[block.link.slice(3)]
|
|
if (dir) return dir.label
|
|
}
|
|
// 处理不同的组件的名称
|
|
if (block.name === 'gameVideo') {
|
|
|
|
return state.current === 0 ? '游戏视频' : state.current === 1 ? '学习视频' : '娱乐视频'
|
|
}
|
|
return block.label || ''
|
|
}
|
|
|
|
const changeBackground = (url: string) => {
|
|
state.content[state.current].background = url
|
|
}
|
|
return {
|
|
state,
|
|
ready,
|
|
currentMode,
|
|
currentPage,
|
|
isCompact,
|
|
background,
|
|
addBlock,
|
|
openDir,
|
|
checkDir,
|
|
getLabel,
|
|
changeBackground
|
|
}
|
|
})
|