xyyd-fatfox/src/layout/useLayoutStore.ts

import { defineStore } from 'pinia'
import type { Layout } from './layout.types'
import { computed, reactive, ref, toRaw, watch } from 'vue'
import db from '@/db'

const defaultLayout: Layout = {
  content: [[], [], []],
  current: 0,
  currentPage: 0,
  dir: {},
  dock: [null, null, null, null, null, null, null, null, null, null],
  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 currentPageList = computed(() =>
    state.simple ? [] : state.content[state.current]?.[state.currentPage]?.list || []
  )
  // 是让时间和搜索改变位置，使画面更紧凑 —— @/layout/grid
  const isCompact = ref(false)
  return {
    state,
    ready,
    currentPageList,
    isCompact
  }
})