82 lines
2.9 KiB
TypeScript
82 lines
2.9 KiB
TypeScript
|
import { defineComponent, onMounted } 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 Sortable from 'sortablejs'
|
||
|
|
|
||
|
|
addIcons(MdAdd)
|
||
|
|
|
||
|
|
export default defineComponent(() => {
|
||
|
|
const layout = useLayoutStore()
|
||
|
|
const router = useRouterStore()
|
||
|
|
let container: HTMLDivElement | null = null
|
||
|
|
onMounted(() => {
|
||
|
|
if (!container) return
|
||
|
|
new Sortable(container, {
|
||
|
|
animation: 400,
|
||
|
|
scroll: true,
|
||
|
|
scrollSensitivity: 200,
|
||
|
|
scrollSpeed: 10,
|
||
|
|
invertSwap: true,
|
||
|
|
invertedSwapThreshold: 1,
|
||
|
|
filter: '.operation-button',
|
||
|
|
ghostClass: 'opacity-20',
|
||
|
|
dragClass: 'dragging-block',
|
||
|
|
onStart: (e) => {
|
||
|
|
// layout.moving.id = e.item.id
|
||
|
|
// layout.moving.type = e.item.dataset?.type || ''
|
||
|
|
},
|
||
|
|
onMove: (e) => {
|
||
|
|
if (e.related.className.includes('operation-button') && e.willInsertAfter) return false
|
||
|
|
},
|
||
|
|
onEnd: (e) => {
|
||
|
|
// const oldPath = e.from.dataset.path
|
||
|
|
// const newPath = e.to.dataset.path
|
||
|
|
// if (e.oldIndex === undefined || e.newIndex === undefined || !oldPath || !newPath) return
|
||
|
|
// const oldIndex = e.oldIndex
|
||
|
|
// const newIndex = e.newIndex
|
||
|
|
// const oldList = useSortList(oldPath as any)
|
||
|
|
// const newList = useSortList(newPath as any)
|
||
|
|
// const item = oldList[oldIndex]
|
||
|
|
// if (!item || !isReactive(oldList) || !isReactive(newList)) return
|
||
|
|
// oldList.splice(oldIndex, 1)
|
||
|
|
// newList.splice(newIndex, 0, item)
|
||
|
|
// layout.moving.id = ''
|
||
|
|
// layout.moving.type = ''
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
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
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<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);grid-template-rows:var(--block-size)"
|
||
|
|
ref={(el) => (container = el as any)}
|
||
|
|
>
|
||
|
|
<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/80 backdrop-blur flex justify-center items-center cursor-pointer hover:scale-105 transition-all"
|
||
|
|
onClick={() => {
|
||
|
|
router.path = 'global-adder'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<OhVueIcon name="md-add" fill="white" scale={2} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
})
|