playground:在演练场增加大小屏切换，会导致(.dragger)水平移动受影响(Adding large and small screen switching on the training ground will affect the horizontal movement of the (.dragger).)

[James-9696]

使用的vue-repl，遇到一种场景：在演练场增加大小屏切换，代码如下：（When using vue repl, I encountered a scenario where I was adding screen size switching in the practice area. The code is as follows:）
`
<img
v-if="isMobileFirst"
:src="minScreen"
:class="{ active: isSmallScreen && isUserSelected }"
class="icon-ref"
@click="minClick"
title="小屏（水平：预览30% | 垂直：left/right各30%）"
/>
<img
v-if="isMobileFirst"
:src="maxScreen"
:class="{ active: !isSmallScreen && isUserSelected }"
class="icon-ref"
@click="maxClick"
title="大屏（恢复默认）"
/>

const maxClick = () => {
isSmallScreen.value = false
setPanelSize(false)
}

const minClick = () => {
isSmallScreen.value = true
setPanelSize(true)
}

---

// 设置面板尺寸（区分布局和大小屏模式）(// Set panel size (differentiate layout and screen size modes)
const setPanelSize = (isSmall) => {
if (!isMobileFirst) return

nextTick(() => {
const replEl = replRef.value?.$el
if (!replEl) return

const isVertical = state.layout === 'vertical'
const splitPane = replEl.querySelector('.split-pane') || replEl
if (!splitPane || splitPane.children.length < 2) return

const panels = Array.from(splitPane.children).filter(
  (child) => child.nodeType === 1 && !child.classList.contains('dragger')
)

if (panels.length >= 2) {
  const panelA = panels[0]
  const panelB = panels[1]

  if (isSmall) {
    if (isVertical) {
      // 垂直布局：使用固定尺寸
      panelA.style.flex = 'none' // 关键：阻止弹性，但允许外部调整
      panelB.style.flex = 'none'
      panelA.style.width = '30%'
      panelB.style.width = '30%'
    } else {
      // 水平布局
      const aWidth = state.layoutReverse ? '30%' : '70%'
      const bWidth = state.layoutReverse ? '70%' : '30%'
      panelA.style.flex = 'none' // 关键：阻止弹性，但允许外部调整
      panelB.style.flex = 'none'
      panelA.style.width = aWidth
      panelB.style.width = bWidth
    }
  } else {
    // 大屏：恢复默认平分（允许弹性）
    panelA.style.flex = '' // 清除 flex 设置
    panelB.style.flex = ''
    panelA.style.width = '100%'
    panelB.style.width = '100%'
  }
}

localStorage.setItem(SIZE_KEY, isSmall ? 'small' : 'large')

})
}`

用户的问题（User issue）:
1、当切换选中其中的大屏或者小屏，中间的分界线（.split-pane>.left>.dragger），水平移动.dragger，第一步：将它（.dragger）拖动到a点。第二步：用户再去选中小屏图标，此时.dragger的位置为b点了。第三步：选中小屏图标后，当用户再去移动它（.dragger），默认会回显到上一次.dragger的a点位置，才能移动，而不是以b点位置为初始位置移动。（1. When switching between selecting a large or small screen, move the. dragger horizontally along the middle boundary line (. split pane>. left>. dragger). The first step is to drag it (. dragger) to point a. Step 2: The user selects the small screen icon again, and the position of. dragger is now point b. Step 3: After selecting the small screen icon, when the user moves it again (. dragger), it will default to the previous. dragger's position at point a before it can be moved, instead of starting at point b.）

2、是否能访问split-pane的内部元素？(Can I access the internal elements of split pane？)，目前用户测试打印出来的为null值（Currently, the value printed by the user during testing is null.）