85 lines
3.1 KiB
TypeScript
85 lines
3.1 KiB
TypeScript
import { computed, defineComponent, ref, toRaw } from 'vue'
|
|
import useLayoutStore from '../useLayoutStore'
|
|
import { OhVueIcon, addIcons } from 'oh-vue-icons'
|
|
import { MdAdd } from 'oh-vue-icons/icons'
|
|
import useRouterStore from '@/useRouterStore'
|
|
import { globalToast } from '@/main'
|
|
import useSortable, { dragging, resetDragging } from './useSortable'
|
|
import BlockWrapper from './BlockWrapper'
|
|
|
|
addIcons(MdAdd)
|
|
|
|
export default defineComponent(() => {
|
|
const layout = useLayoutStore()
|
|
const router = useRouterStore()
|
|
const container = useSortable(
|
|
computed(() => layout.currentPage.list),
|
|
ref('page')
|
|
)
|
|
|
|
return () => (
|
|
<div
|
|
class="absolute left-0 top-0 w-full h-screen overflow-y-auto no-scrollbar pt-[240px] px-[calc((100%_-_var(--main-width))_/_2)]"
|
|
onScroll={(e) => {
|
|
const h = (e.target as any).scrollTop
|
|
if (h > 60) {
|
|
// 需要移动搜索框和时间
|
|
layout.isCompact = true
|
|
} else {
|
|
layout.isCompact = false
|
|
}
|
|
}}
|
|
onDragover={(e) => e.preventDefault()}
|
|
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.push(toRaw(block))
|
|
layout.state.dock[oldIdx] = null
|
|
resetDragging()
|
|
} else if (dragging.type && dragging.type !== 'dock') {
|
|
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.push(toRaw(block))
|
|
list.splice(idx, 1)
|
|
layout.checkDir(dragging.type)
|
|
resetDragging()
|
|
}
|
|
}}
|
|
>
|
|
<div
|
|
class="w-full grid justify-center grid-flow-row-dense pb-[200px]"
|
|
style="grid-template-columns:repeat(auto-fill, var(--block-size));grid-auto-rows:var(--block-size)"
|
|
ref={container}
|
|
>
|
|
{layout.currentPage.list.map((block, idx) => (
|
|
<BlockWrapper key={block.id} idx={idx} block={block} />
|
|
))}
|
|
<div class="w-full h-full flex justify-center items-center p-[var(--block-padding)] relative operation-button">
|
|
<div
|
|
class="w-full h-full overflow-hidden rounded-[calc(var(--block-radius)_*_var(--block-size))] bg-white/60 backdrop-blur flex justify-center items-center cursor-pointer hover:scale-105 transition-all"
|
|
onClick={() => {
|
|
if (layout.state.content[layout.state.current].pages[layout.state.currentPage]) {
|
|
router.go('global-adder')
|
|
} else {
|
|
globalToast.warning('请先添加页面')
|
|
}
|
|
}}
|
|
>
|
|
<span style="filter:drop-shadow(0 0 10px hsl(32, 90%, 65%))">
|
|
<OhVueIcon name="md-add" fill="white" scale={2.4} />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|