init

wangrong

2026-08-30 761e5c5fa871959f60e15c971c8d83f2b53d0af5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import { ref, onBeforeUnmount, onMounted } from 'vue'
import { useCache } from '@/hooks/web/useCache'
import { useEmitt } from '@/hooks/web/useEmitt'
 
type Sidebar = 'DATASET' | 'DASHBOARD' | 'DATASOURCE' | 'DATA-FILLING'
 
export const useMoveLine = (type: Sidebar) => {
  const { wsCache } = useCache('localStorage')
  const width = ref(wsCache.get(type) || 280)
  wsCache.set('current-collapse_bar', width.value)
 
  const getCoordinates = () => {
    if (document.querySelector('.sidebar-move-line')) {
      document.querySelector('.sidebar-move-line').className = 'sidebar-move-line dragging'
    }
    document.addEventListener('mousemove', setCoordinates)
    document.addEventListener('mouseup', cancelEvent)
    document.querySelector('body').style['user-select'] = 'none'
  }
 
  const setCollapseBarWidth = () => {
    wsCache.set('current-collapse_bar', width.value)
    useEmitt().emitter.emit('current-collapse_bar')
  }
 
  const setCoordinates = (e: MouseEvent) => {
    const x = e.clientX
    if (x > 401 || x < 279) {
      width.value = Math.max(Math.min(401, x), 279)
      ele.style.left = width.value - 5 + 'px'
      setCollapseBarWidth()
      return
    }
    ele.style.left = width.value - 5 + 'px'
    width.value = x
    setCollapseBarWidth()
  }
 
  const cancelEvent = () => {
    if (document.querySelector('.sidebar-move-line')) {
      document.querySelector('.sidebar-move-line').className = 'sidebar-move-line'
    }
    document.querySelector('body').style['user-select'] = 'auto'
    wsCache.set(type, width.value)
    document.removeEventListener('mousemove', setCoordinates)
  }
 
  const node = ref()
 
  const ele = document.createElement('div')
  ele.className = 'sidebar-move-line'
  ele.style.top = '0'
  ele.style.left = width.value - 5 + 'px'
  ele.addEventListener('mousedown', getCoordinates)
 
  onMounted(() => {
    ;(node.value?.$el || node.value)?.appendChild(ele)
  })
 
  onBeforeUnmount(() => {
    cancelEvent()
    ele.removeEventListener('mousedown', getCoordinates)
    ;(node.value?.$el || node.value)?.removeChild?.(ele)
    width.value = null
  })
 
  return {
    width,
    node
  }
}