57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
import { computed, defineComponent } from 'vue'
|
|
import useLayoutStore from '../useLayoutStore'
|
|
import useSortable, { dragging } from '../grid/useSortable'
|
|
import LinkBlock from '../grid/LinkBlock'
|
|
|
|
export default defineComponent(() => {
|
|
const layout = useLayoutStore()
|
|
const container = useSortable(
|
|
computed(() => layout.state.dock),
|
|
'dock'
|
|
)
|
|
|
|
return () => (
|
|
<div
|
|
class="fixed bottom-4 left-1/2 -translate-x-1/2 p-4 rounded-lg bg-white/60 backdrop-blur flex gap-4 shadow-lg"
|
|
ref={container}
|
|
>
|
|
{layout.state.dockLabels.split('').map((l, i) => {
|
|
const block = layout.state.dock[i]
|
|
return (
|
|
<div
|
|
key={'block-' + i + (block?.id || '')}
|
|
class="w-[54px] h-[54px] rounded-lg overflow-hidden relative cursor-pointer"
|
|
id={block?.id || ''}
|
|
onDragover={(e) => e.preventDefault()}
|
|
onDrop={() => {
|
|
// 处理移入（当前有内容不可移入）
|
|
if (!dragging.id || block || !dragging.transportable) return
|
|
if (dragging.type === 'page') {
|
|
const oldIdx = layout.currentPage.list.findIndex((el) => el.id === dragging.id)
|
|
if (oldIdx < 0) return
|
|
const block = layout.currentPage.list[oldIdx]
|
|
if (!block) return
|
|
layout.state.dock[i] = block
|
|
layout.currentPage.list.splice(oldIdx, 1)
|
|
return
|
|
}
|
|
if (dragging.type && dragging.type !== 'dock') {
|
|
// TODO: 文件夹
|
|
return
|
|
}
|
|
}}
|
|
>
|
|
{block && <LinkBlock block={block} />}
|
|
<div
|
|
class="absolute z-10 left-0 bottom-0 w-full bg-black/20 text-[12px] text-white text-center"
|
|
style={{ boxShadow: block ? 'none' : '0 -4px 14px 0 rgba(0,0,0,.3)' }}
|
|
>
|
|
{l}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
})
|