xyyd-fatfox/src/layout/useLayoutStore.ts

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
      console.log(toRaw(s))
      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
    console.log(page)
    console.log(state.content[state.current].pages[page])
    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
    }
    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
  }
})