xyyd-fatfox/src/layout/grid/BlockWrapper.tsx

import { defineComponent, ref, toRaw } from 'vue'
import type { Block } from '../layout.types'
import { dragging, resetDragging } from './useSortable'
import { v4 as uuid } from 'uuid'
import useLayoutStore from '../useLayoutStore'
import LinkBlock from './LinkBlock'
import DirBlock from './DirBlock'
import WidgetBlock from './WidgetBlock'
import useSettingsStore from '@/settings/useSettingsStore'

export default defineComponent({
  props: {
    block: {
      type: Object as () => Block,
      required: true
    },
    idx: {
      type: Number,
      required: true
    }
  },
  setup(props) {
    const settings = useSettingsStore()
    const layout = useLayoutStore()
    let it = 0
    const hover = ref(false)
    return () => (
      <div
        class="w-full h-full p-[var(--block-padding)] relative rounded-lg"
        key={props.block.id}
        id={props.block.id}
        style={{
          gridColumn: `span ${props.block.w}`,
          gridRow: `span ${props.block.h}`,
          transition: 'border .3s, transform .2s',
          border: hover.value ? '2px solid rgba(255,255,255,.5)' : '2px solid rgba(255,255,255,0)'
        }}
        data-transportable={props.block.link && !props.block.link.startsWith('id:') ? '1' : ''}
        onDragover={(e) => {
          e.preventDefault()
          clearTimeout(it)
          hover.value = true
          it = setTimeout(() => {
            hover.value = false
          }, 300)
        }}
        onDrop={() => {
          // 处理移入
          if (!dragging.id) return
          if (dragging.type === 'dock') {
            const oldIdx = layout.state.dock.findIndex((el) => el?.id === dragging.id)
            if (oldIdx < 0) return
            const block = layout.state.dock[oldIdx]
            if (!block) return
            layout.currentPage.list.splice(props.idx, 0, block)
            layout.state.dock[oldIdx] = null
            return
          }
          if (dragging.type === 'page' && dragging.id !== props.block.id) {
            // 合并为文件夹
            const link = props.block.link
            // 小组件无法合并
            if (!link) return
            const oldIdx = layout.currentPage.list.findIndex((el) => el.id === dragging.id)
            if (oldIdx < 0) return
            const oldBlock = layout.currentPage.list[oldIdx]
            // 文件夹不能移入文件夹
            if (!oldBlock || oldBlock.link.startsWith('id:')) return
            if (link.startsWith('id:')) {
              // 本身就是文件夹
              const id = link.slice(3)
              const dir = layout.state.dir[id]
              if (!dir) return
              dir.list.push(toRaw(oldBlock))
              layout.currentPage.list.splice(oldIdx, 1)
              resetDragging()
            } else {
              // 本身不是文件夹
              const id = props.block.id
              layout.state.dir[id] = {
                label: props.block.label,
                list: [toRaw(props.block), toRaw(oldBlock)]
              }
              layout.currentPage.list.splice(props.idx, 1)
              layout.currentPage.list.splice(props.idx, 0, {
                id: uuid(),
                link: `id:${id}`,
                name: '',
                label: '新建文件夹',
                icon: '',
                text: '',
                background: '',
                color: '',
                w: 1,
                h: 1
              })
              layout.currentPage.list.splice(oldIdx, 1)
              resetDragging()
            }
          }
          if (dragging.type && dragging.type !== 'dock' && dragging.type !== 'page') {
            const list = layout.state.dir[dragging.type]?.list
            if (!list) return
            const idx = list.findIndex((el) => el.id === dragging.id)
            if (idx < 0) return
            const block = list[idx]
            layout.currentPage.list.splice(props.idx, 0, toRaw(block))
            list.splice(idx, 1)
            layout.checkDir(dragging.type)
            resetDragging()
          }
        }}
      >
        <div
          class="w-full h-full overflow-hidden relative cursor-pointer shadow-lg hover-move"
          style={{
            borderRadius: `calc(var(--block-radius) * var(--block-size))`
          }}
        >
          {props.block.link ? (
            props.block.link.startsWith('id:') ? (
              // 文件夹
              <DirBlock block={props.block} big={props.block.w !== 1 || props.block.h !== 1} />
            ) : (
              // 链接
              <LinkBlock block={props.block} />
            )
          ) : (
            // 小组件
            <WidgetBlock block={props.block} />
          )}
        </div>
        {settings.state.showBlockLabel && (
          <div
            class="absolute left-0 -bottom-3 text-sm text-white text-center w-full overflow-hidden text-ellipsis whitespace-nowrap break-all font-bold"
            style="text-shadow: 0 0 4px rgba(0,0,0,.6)"
          >
            {layout.getLabel(props.block)}
          </div>
        )}
      </div>
    )
  }
})