vue2-client 1.22.3 → 1.22.4

package/.history/src/base-client/components/his/XSidebar/XSidebar_20260610171133.vue

@@ -1,788 +0,0 @@
-<template>
-  <div
-    ref="drawerRoot"
-    class="drawer"
-    :class="[{ 'drawer-collapsed': !isOpen, 'position-right': position === 'right' }, wrapperClassObject()]"
-    :style="drawerStyle">
-    <div
-      v-show="!isFrameConfig || showToggleInFrame"
-      class="drawer-toggle"
-      :class="{ 'toggle-collapsed': !isOpen }"
-      :style="[toggleButtonStyle, toggleButtonPositionStyle]"
-      @click="toggleDrawer">
-      <div class="arrow">
-        {{ arrowChar }}
-      </div>
-    </div>
-    <div class="drawer-content" v-show="isOpen" :style="contentStyle">
-      <x-report
-        ref="x_report"
-        :configName="queryParamsName"
-        :server-name="serverName"
-        :show-img-in-cell="true"
-        :display-only="true"
-        :edit-mode="false"
-        :show-save-button="false"
-        :no-padding="true"
-        :dont-format="true">
-      </x-report>
-    </div>
-  </div>
-</template>
-
-<script>
-
-import XReport from '@vue2-client/base-client/components/common/XReportGrid'
-import { shortcutManager } from '@vue2-client/base-client/utils/shortcutManager'
-
-export default {
-  components: {
-    XReport
-  },
-  name: 'XSidebar',
-  inject: {
-    getGridScopePath: { default: null }
-  },
-  props: {
-    // 配置参数
-    queryParamsName: {
-      type: String,
-      default: ''
-    },
-    serverName: {
-      type: String,
-      default: 'af-his'
-    },
-    // Frame 配置下是否依然显示收缩按钮（默认为 false，保持兼容老用法）
-    showToggleInFrame: {
-      type: Boolean,
-      default: false
-    },
-    // 是否允许该组件主动调整同级布局（默认不影响其它页面）
-    affectLayout: {
-      type: Boolean,
-      default: false
-    },
-    // 展开时所占宽度百分比（percent模式使用，影响父级 ant-col 的 flex 与 max-width）
-    expandedWidthPercent: {
-      type: Number,
-      default: 33.3
-    },
-    // 收缩时所占宽度百分比（percent模式使用）
-    collapsedWidthPercent: {
-      type: Number,
-      default: 2
-    },
-    // 展开时所占宽度像素值（px模式使用）
-    expandedWidth: {
-      type: Number,
-      default: 602
-    },
-    // 收缩时所占宽度像素值（px模式使用）
-    collapsedWidth: {
-      type: Number,
-      default: 26
-    },
-    // 侧边栏位置: 'left' 左侧侧边栏，'right' 右侧侧边栏
-    position: {
-      type: String,
-      default: 'left',
-      validator: value => ['left', 'right'].includes(value)
-    },
-    // 总宽度像素值（px模式使用）
-    totalWidth: {
-      type: Number,
-      default: 1638
-    },
-    // 宽度计算模式：'percent' 百分比模式，'px' 像素模式
-    // 使用示例：
-    // percent模式: <x-sidebar :width-mode="'percent'" :expanded-width-percent="40" :collapsed-width-percent="3" />
-    // px模式: <x-sidebar :width-mode="'px'" :expanded-width="500" :collapsed-width="30" />
-    widthMode: {
-      type: String,
-      default: 'percent',
-      validator: value => ['percent', 'px'].includes(value)
-    },
-    // 折叠时保持的行高（px），由外部传入
-    rowHeight: {
-      type: Number,
-      default: null
-    }
-  },
-  data () {
-    return {
-      isOpen: this.queryParamsName?.endsWith('Frame') || false,
-      // 定义主内容区域的最大和最小宽度百分比
-      mainWithData: [{ max: 80, min: 50 }],
-      rowResizeObserver: null,
-      drawerResizeObserver: null,
-      syncDrawerMinHeightRafId: null,
-      // 记录所在 a-row 有史以来出现过的最大高度，只增不减，展开/收起基准统一
-      maxRowHeight: null,
-      // 记录抽屉自身高度，用于按钮居中
-      drawerHeight: null
-    }
-  },
-  computed: {
-    isFrameConfig () {
-      return this.queryParamsName?.endsWith('Frame') || false
-    },
-    sidebarSnapshotKey () {
-      const routePath = this.$route?.path || 'default'
-      let parentPath = ''
-      if (typeof this.getGridScopePath === 'function') {
-        parentPath = this.getGridScopePath()
-      }
-      const myFullPath = parentPath
-        ? `${parentPath}/${this.queryParamsName}`
-        : this.queryParamsName
-      return `sidebar:${routePath}::${myFullPath}`
-    },
-    drawerStyle () {
-      const isPx = this.widthMode === 'px'
-      const expanded = isPx ? (parseFloat(this.expandedWidth) || 602) : (parseFloat(this.expandedWidthPercent) || 33.3)
-      const collapsed = isPx ? (parseFloat(this.collapsedWidth) || 26) : (parseFloat(this.collapsedWidthPercent) || 3)
-      const base = !this.isOpen
-        ? isPx
-          ? { width: `${collapsed}px` }
-          : { width: `${collapsed}%` }
-        : isPx
-          ? { width: `${expanded}px`, display: 'flex', flexDirection: 'row', alignItems: 'stretch' }
-          : { width: `${expanded}%`, display: 'flex', flexDirection: 'row', alignItems: 'stretch' }
-      if (this.rowHeight) {
-        base['--sidebar-row-height'] = this.rowHeight + 'px'
-      }
-      return base
-    },
-    contentStyle () {
-      const isPx = this.widthMode === 'px'
-      if (!this.isOpen) return { display: 'none' }
-      if (isPx) {
-        const expanded = parseFloat(this.expandedWidth) || 0
-        const collapsed = parseFloat(this.collapsedWidth) || 0
-        const contentWidth = Math.max(0, expanded - collapsed)
-        return { width: `${contentWidth}px`, flex: '1 1 auto', overflow: 'hidden' }
-      }
-      const expandedPct = parseFloat(this.expandedWidthPercent) || 0
-      const collapsedPct = parseFloat(this.collapsedWidthPercent) || 0
-      const contentPercent = Math.max(0, expandedPct - collapsedPct)
-      return { width: `${contentPercent}%`, flex: '1 1 auto', overflow: 'hidden' }
-    },
-    toggleButtonStyle () {
-      const isPx = this.widthMode === 'px'
-      const width = isPx ? `${this.collapsedWidth}px` : `${this.collapsedWidthPercent}%`
-      // 优先用外部传入的 rowHeight，否则用内部计算的行高
-      const rowH = this.rowHeight || this.maxRowHeight
-      const top = rowH ? `${rowH / 2 - 24}px` : '50%'
-      return { width, top }
-    },
-    // 根据侧边栏位置和展开状态返回箭头字符
-    arrowChar () {
-      if (this.position === 'right') {
-        // 右侧侧边栏：展开时箭头指向右(收回)，折叠时箭头指向左(展开)
-        return this.isOpen ? '‹' : '›'
-      }
-      // 左侧侧边栏：展开时箭头指向左(收回)，折叠时箭头指向右(展开)
-      return this.isOpen ? '›' : '‹'
-    },
-    // 切换按钮的定位样式
-    toggleButtonPositionStyle () {
-      if (this.position === 'right') {
-        return { right: 0 }
-      }
-      return { left: 0 }
-    }
-  },
-  mounted () {
-    console.log('[XSidebar] mounted, isOpen:', this.isOpen, 'queryParamsName:', this.queryParamsName)
-    // 在挂载后调整父元素宽度（方法内部已区分是否影响布局）
-    this.updateLayout(this.isOpen)
-    // 如果抽屉初始状态为打开，设置padding
-    if (this.isOpen) {
-      this.updateCardBodyPadding()
-      this.activateSidebarScope()
-    } else {
-      // 折叠状态：延迟停用，等内层组件注册完成
-      this.scheduleDeactivateSidebarScope()
-    }
-    // 同步计算一次最大行高（此时 this.$el 已挂载，computed 属性立即响应，按钮 top 立即就位）
-    this.computeMaxRowHeight()
-    this.$nextTick(() => {
-      this.bindRowResizeObserver()
-      this.bindDrawerResizeObserver()
-    })
-  },
-  beforeDestroy () {
-    if (this._deactivateRetryTimer) {
-      clearTimeout(this._deactivateRetryTimer)
-      this._deactivateRetryTimer = null
-    }
-    if (this.syncDrawerMinHeightRafId) {
-      cancelAnimationFrame(this.syncDrawerMinHeightRafId)
-      this.syncDrawerMinHeightRafId = null
-    }
-    this.unbindRowResizeObserver()
-    this.unbindDrawerResizeObserver()
-    this.deactivateSidebarScope()
-  },
-  methods: {
-    // ========== 作用域管理 ==========
-    activateSidebarScope () {
-      if (!shortcutManager.isEnabled) return
-      const snapshot = shortcutManager.routeStateSnapshots.get(this.sidebarSnapshotKey)
-      if (snapshot?.tabStates?.size > 0) {
-        // 只恢复之前是激活状态的侧边栏内部作用域
-        snapshot.tabStates.forEach((wasActive, scopeId) => {
-          if (wasActive) {
-            shortcutManager.scopeActive.set(scopeId, true)
-          }
-        })
-        shortcutManager.routeStateSnapshots.delete(this.sidebarSnapshotKey)
-      }
-    },
-    scheduleDeactivateSidebarScope (retryCount = 0) {
-      const maxRetries = 20   // 增加到 20 次（2 秒）
-      const retryDelay = 100
-
-      this.$nextTick(() => {
-        if (this.isOpen) return
-
-        // 先尝试停用
-        this.deactivateSidebarScope()
-
-        if (retryCount < maxRetries) {
-          // ✅ 关键修改：不管 hasActiveChildScope 是什么，都继续重试
-          // 目的：等待内部组件完成注册
-          this._deactivateRetryTimer = setTimeout(() => {
-            this._deactivateRetryTimer = null
-            this.scheduleDeactivateSidebarScope(retryCount + 1)
-          }, retryDelay)
-        }
-      })
-    },
-    deactivateSidebarScope () {
-      if (!shortcutManager.isEnabled) return
-
-      let parentPath = ''
-      if (typeof this.getGridScopePath === 'function') {
-        parentPath = this.getGridScopePath()
-      }
-      const routePath = this.$route?.path || 'default'
-      const myFullPath = parentPath
-        ? `${parentPath}/${this.queryParamsName}`
-        : this.queryParamsName
-      const sidebarPrefix = `${routePath}::${myFullPath}/`
-
-      // 只收集侧边栏内部的作用域
-      const sidebarScopes = new Map()
-      shortcutManager.scopeActive.forEach((active, scopeId) => {
-        if (scopeId.startsWith(sidebarPrefix)) {
-          sidebarScopes.set(scopeId, active)
-        }
-      })
-
-      // 没有内部作用域，跳过
-      if (sidebarScopes.size === 0) return
-
-      // 检查是否有激活的
-      let hasActive = false
-      sidebarScopes.forEach((active) => {
-        if (active) hasActive = true
-      })
-      if (!hasActive) return
-
-      // 保存快照
-      shortcutManager.routeStateSnapshots.set(this.sidebarSnapshotKey, {
-        tabStates: new Map(sidebarScopes),
-        lastAccess: Date.now()
-      })
-
-      // 只停用侧边栏内部的
-      sidebarScopes.forEach((_, scopeId) => {
-        shortcutManager.setScopeActive(scopeId, false)
-      })
-    },
-    toggleDrawer () {
-      console.log('[XSidebar] toggleDrawer called, isOpen before:', this.isOpen, 'position:', this.position)
-      // 展开前读一次行高（此时仍为展开状态），更新最大高度记录，确保收起后基准正确
-      if (!this.isOpen) {
-        const row = this.getSidebarParentRow()
-        if (row) {
-          const h = Math.round(row.offsetHeight || row.getBoundingClientRect().height)
-          if (h > 0) {
-            if (this.maxRowHeight === null || h > this.maxRowHeight) {
-              this.maxRowHeight = h
-            }
-          }
-        }
-      }
-      const wasOpen = this.isOpen
-      this.isOpen = !this.isOpen
-      console.log('[XSidebar] isOpen after toggle:', this.isOpen)
-      console.log('[XSidebar] drawerStyle:', JSON.stringify(this.drawerStyle))
-      console.log('[XSidebar] contentStyle:', JSON.stringify(this.contentStyle))
-      this.$emit('on-drawer-change', this.isOpen)
-      this.updateLayout(this.isOpen)
-
-      if (this.isOpen && !wasOpen) {
-        this.activateSidebarScope()
-      } else if (!this.isOpen && wasOpen) {
-        this.deactivateSidebarScope()
-      }
-
-      if (this.isOpen) {
-        // 展开后行高可能微增，读一次最新值（只增不减）
-        this.syncDrawerMinHeightToParentRow()
-        this.$nextTick(() => {
-          this.updateCardBodyPadding()
-        })
-      }
-    },
-    getSidebarParentRow () {
-      if (!this.$el) return null
-      let currentCol = this.$el.parentNode
-      while (
-        currentCol &&
-        (!currentCol.className ||
-          !currentCol.className.includes ||
-          !currentCol.className.includes('ant-col'))
-        ) {
-        currentCol = currentCol.parentNode
-      }
-      if (!currentCol || !currentCol.parentNode) return null
-      const row = currentCol.parentNode
-      if (!row.className || !row.className.includes('ant-row')) return null
-      return row
-    },
-    // 展开/收起共用同一套参照：用 CSS 变量记录行高，箭头始终相对于该值居中，
-    // 不走 CSS transition，彻底避免 min-height 动画化导致的"缓慢下移"问题
-    scheduleSyncDrawerMinHeight () {
-      if (this.syncDrawerMinHeightRafId) return
-      this.syncDrawerMinHeightRafId = requestAnimationFrame(() => {
-        this.syncDrawerMinHeightRafId = null
-        this.syncDrawerMinHeightToParentRow()
-      })
-    },
-    // 同步读取行高并更新 maxRowHeight，供 mounted 在渲染前调用
-    computeMaxRowHeight () {
-      const root = this.$refs.drawerRoot
-      if (!root) return
-      const row = this.getSidebarParentRow()
-      if (!row) return
-      const raw = row.offsetHeight || row.getBoundingClientRect().height
-      const h = Math.round(raw)
-      if (h > 0 && (this.maxRowHeight === null || h > this.maxRowHeight)) {
-        this.maxRowHeight = h
-      }
-    },
-    syncDrawerMinHeightToParentRow () {
-      this.$nextTick(() => {
-        const root = this.$refs.drawerRoot
-        if (!root) return
-        const row = this.getSidebarParentRow()
-        if (!row) return
-        const raw = row.offsetHeight || row.getBoundingClientRect().height
-        const h = Math.round(raw)
-        if (h <= 0) return
-        // 只增不减：记录有史以来出现过的最大行高，作为收起后的定位基准
-        if (this.maxRowHeight === null || h > this.maxRowHeight) {
-          this.maxRowHeight = h
-        }
-        if (!this.rowResizeObserver && typeof ResizeObserver !== 'undefined') {
-          this.rowResizeObserver = new ResizeObserver(() => {
-            this.scheduleSyncDrawerMinHeight()
-          })
-          this.rowResizeObserver.observe(row)
-        }
-      })
-    },
-    bindRowResizeObserver () {
-      if (typeof ResizeObserver === 'undefined') return
-      this.unbindRowResizeObserver()
-      const row = this.getSidebarParentRow()
-      if (!row) return
-      this.rowResizeObserver = new ResizeObserver(() => {
-        this.scheduleSyncDrawerMinHeight()
-      })
-      this.rowResizeObserver.observe(row)
-    },
-    unbindRowResizeObserver () {
-      if (this.rowResizeObserver) {
-        this.rowResizeObserver.disconnect()
-        this.rowResizeObserver = null
-      }
-    },
-    bindDrawerResizeObserver () {
-      if (typeof ResizeObserver === 'undefined') return
-      this.unbindDrawerResizeObserver()
-      const root = this.$refs.drawerRoot
-      if (!root) return
-      this.drawerResizeObserver = new ResizeObserver(() => {
-        this.updateDrawerHeight()
-      })
-      this.drawerResizeObserver.observe(root)
-    },
-    unbindDrawerResizeObserver () {
-      if (this.drawerResizeObserver) {
-        this.drawerResizeObserver.disconnect()
-        this.drawerResizeObserver = null
-      }
-    },
-    updateDrawerHeight () {
-      const root = this.$refs.drawerRoot
-      if (!root) return
-      const h = root.offsetHeight || root.getBoundingClientRect().height
-      if (h > 0) {
-        this.drawerHeight = Math.round(h)
-      }
-    },
-    // 通用的样式保护方法
-    protectElementStyles (element, stylesToProtect = ['padding', 'padding-left', 'padding-right', 'padding-top', 'padding-bottom', 'margin', 'background-color', 'color', 'font-size', 'border']) {
-      const protectedStyles = {}
-
-      // 保存需要保护的样式
-      stylesToProtect.forEach(style => {
-        const value = element.style.getPropertyValue(style)
-        if (value) {
-          protectedStyles[style] = value
-        }
-      })
-
-      return protectedStyles
-    },
-
-    // 恢复保护的样式
-    restoreElementStyles (element, protectedStyles) {
-      Object.entries(protectedStyles).forEach(([property, value]) => {
-        if (value) {
-          element.style.setProperty(property, value, 'important')
-        }
-      })
-    },
-
-    // 安全地设置布局样式，保护其他样式
-    safeSetLayoutStyles (element, layoutStyles) {
-      // 保护所有可能的样式配置
-      const protectedStyles = this.protectElementStyles(element)
-
-      // 设置布局样式
-      Object.entries(layoutStyles).forEach(([property, value]) => {
-        // 将驼峰命名转换为CSS标准命名
-        const cssProperty = property.replace(/([A-Z])/g, '-$1').toLowerCase()
-        element.style.setProperty(cssProperty, value)
-      })
-
-      // 恢复保护的样式
-      this.restoreElementStyles(element, protectedStyles)
-    },
-    wrapperClassObject () {
-      const attrs = this.$attrs || {}
-      const classes = {}
-      const booleanStyleKeys = ['']
-      booleanStyleKeys.forEach(key => {
-        const val = attrs[key]
-        const truthy = val === true || val === '' || val === 'true'
-        if (truthy) classes[`x-sidebar-${key}`] = true
-      })
-      return classes
-    },
-    // 更新card-body的padding
-    updateCardBodyPadding () {
-      // widthMode 为空时才需要处理
-      if (!this.widthMode) { return }
-      this.$nextTick(() => {
-        const cardBody = this.$el.querySelector('.ant-card-body')
-        if (cardBody) {
-          cardBody.style.padding = '0px'
-        } else {
-          // 如果找不到元素，可能需要等待XReport完全渲染
-          setTimeout(() => {
-            const cardBody = this.$el.querySelector('.ant-card-body')
-            if (cardBody) {
-              cardBody.style.padding = '0px'
-            }
-          }, 500)
-        }
-      })
-    },
-    // 获取同级的其他所有a-col元素
-    getSiblingCols (className) {
-      try {
-        // 找到当前组件所在的a-col
-        let currentCol = this.$el.parentNode
-        while (currentCol && !currentCol.className.includes('ant-col')) {
-          currentCol = currentCol.parentNode
-        }
-        if (!currentCol) {
-          console.warn('当前组件不在a-col内')
-          return []
-        }
-        // 找到a-col的父元素(a-row)
-        const row = currentCol.parentNode
-        if (!row || !row.className.includes('ant-row')) {
-          console.warn('未找到父级a-row元素')
-          return []
-        }
-
-        // 如果没有指定 className，则返回该行下所有的 a-col 同级元素
-        const allCols = Array.from(row.children).filter(child => {
-          const isCol = child.className && child.className.includes && child.className.includes('ant-col')
-          if (!isCol) return false
-          if (!className) return true
-          return child.className.includes(className)
-        })
-
-        // 过滤掉当前a-col，返回其他所有a-col
-        return allCols.filter(col => col !== currentCol)
-      } catch (error) {
-        console.error('获取同级a-col时出错:', error)
-        return []
-      }
-    },
-    // 在同一行中查找距离当前侧边栏最近的内容列（从右往左找第一个 a-col）
-    findNearestContentCol (otherCols, currentCol) {
-      if (!otherCols || otherCols.length === 0 || !currentCol || !currentCol.parentNode) {
-        return null
-      }
-      let prev = currentCol.previousSibling
-      while (prev) {
-        if (otherCols.includes(prev)) {
-          return prev
-        }
-        prev = prev.previousSibling
-      }
-      // 如果没找到明显靠近的，就兜底返回第一个同级列
-      return otherCols[0] || null
-    },
-    // 计算mainCol,currentCol可以设置的总宽度
-    computeRemainingWidth (allElements, mainCol, currentCol) {
-      if (!allElements || allElements.length === 0) {
-        return '0px'
-      }
-
-      // 排除 mainCol 和 currentCol
-      const filteredElements = allElements.filter(element =>
-        element !== mainCol && element !== currentCol
-      )
-
-      let totalWidth = 0
-
-      // 计算过滤后元素的总宽度（包括外边距）
-      filteredElements.forEach(element => {
-        if (element && element.style) {
-          const computedStyle = window.getComputedStyle(element)
-          const width = parseFloat(computedStyle.width) || 0
-          const marginLeft = parseFloat(computedStyle.marginLeft) || 0
-          const marginRight = parseFloat(computedStyle.marginRight) || 0
-          totalWidth += width + marginLeft + marginRight
-        }
-      })
-
-      // 添加 mainCol 和 currentCol 的左右外边距
-      const addMarginsFromElements = (element) => {
-        if (element && element.style) {
-          const computedStyle = window.getComputedStyle(element)
-          const marginLeft = parseFloat(computedStyle.marginLeft) || 0
-          const marginRight = parseFloat(computedStyle.marginRight) || 0
-          totalWidth += marginLeft + marginRight
-        }
-      }
-
-      addMarginsFromElements(mainCol)
-      addMarginsFromElements(currentCol)
-
-      return totalWidth > 0 ? `${totalWidth}px` : '0px'
-    },
-    updateLayout (isOpen) {
-      console.log('[XSidebar] updateLayout called, isOpen:', isOpen)
-      this.$nextTick(() => {
-        try {
-          // 获取当前行内所有与侧边栏同级的 a-col 列
-          const otherCols = this.getSiblingCols()
-          console.log('[XSidebar] otherCols length:', otherCols.length)
-          if (otherCols.length > 0) {
-            let currentCol = this.$el.parentNode
-            while (currentCol && !currentCol.className.includes('ant-col')) {
-              currentCol = currentCol.parentNode
-            }
-            if (currentCol) {
-              console.log('[XSidebar] currentCol found, widthMode:', this.widthMode, 'affectLayout:', this.affectLayout)
-              console.log('[XSidebar] currentCol.style before:', currentCol.style.flex, currentCol.style.maxWidth)
-              const triggerResize = () => {
-                this.$nextTick(() => {
-                  const tabComponent = this.$el.querySelector('.ant-tabs')
-                  if (tabComponent) {
-                    tabComponent.style.width = '100%'
-                    window.dispatchEvent(new Event('resize'))
-                  }
-                })
-              }
-
-              if (isOpen) {
-                if (this.affectLayout) {
-                  if (this.widthMode === 'px') {
-                    const drawerWidth = parseFloat(this.expandedWidth) || 602
-                    // 使用安全的方式设置布局样式
-                    this.safeSetLayoutStyles(currentCol, {
-                      flex: `0 0 ${drawerWidth}px`,
-                      maxWidth: `${drawerWidth}px`,
-                      transition: 'all 0.3s'
-                    })
-                    const mainCol = this.findNearestContentCol(otherCols, currentCol)
-                    if (mainCol) {
-                      const remainingWidth = this.computeRemainingWidth(this.getSiblingCols(), mainCol, currentCol)
-
-                      // 使用安全的方式设置布局样式
-                      this.safeSetLayoutStyles(mainCol, {
-                        flex: '1 1 auto',
-                        maxWidth: `calc(100% - ${remainingWidth} - ${drawerWidth}px)`,
-                        transition: 'all 0.3s'
-                      })
-                    }
-                  } else {
-                    const drawerWidth = parseFloat(this.expandedWidthPercent) || 33.3
-                    // 使用安全的方式设置布局样式
-                    this.safeSetLayoutStyles(currentCol, {
-                      flex: `0 0 ${drawerWidth}%`,
-                      maxWidth: `${drawerWidth}%`,
-                      transition: 'all 0.3s'
-                    })
-                    const mainCol = this.findNearestContentCol(otherCols, currentCol)
-                    if (mainCol) {
-                      const remainingWidth = this.computeRemainingWidth(this.getSiblingCols(), mainCol, currentCol)
-
-                      // 使用安全的方式设置布局样式
-                      this.safeSetLayoutStyles(mainCol, {
-                        flex: `0 0 calc(100% - ${remainingWidth} - ${drawerWidth}%)`,
-                        maxWidth: `calc(100% - ${remainingWidth} - ${drawerWidth}%)`,
-                        transition: 'all 0.3s'
-                      })
-                    }
-                  }
-                } else {
-                  // 不影响布局时：仍然需要设置展开后的宽度
-                  if (this.widthMode === 'px') {
-                    const drawerWidth = parseFloat(this.expandedWidth) || 602
-                    currentCol.style.flex = `0 0 ${drawerWidth}px`
-                    currentCol.style.maxWidth = `${drawerWidth}px`
-                  } else {
-                    const drawerWidth = parseFloat(this.expandedWidthPercent) || 33.3
-                    currentCol.style.flex = `0 0 ${drawerWidth}%`
-                    currentCol.style.maxWidth = `${drawerWidth}%`
-                  }
-                }
-                triggerResize()
-              } else {
-                // 收缩状态
-                const collapsed = parseFloat(this.collapsedWidth) || 26
-                const collapsedPct = parseFloat(this.collapsedWidthPercent) || 3
-                const width = this.widthMode === 'px' ? `${collapsed}px` : `${collapsedPct}%`
-                // 使用安全的方式设置布局样式
-                this.safeSetLayoutStyles(currentCol, {
-                  flex: '0 0 ' + width,
-                  maxWidth: width,
-                  transition: 'all 0.3s'
-                })
-                const mainCol = this.findNearestContentCol(otherCols, currentCol)
-                if (mainCol) {
-                  const remainingWidth = this.computeRemainingWidth(this.getSiblingCols(), mainCol, currentCol)
-
-                  // 使用安全的方式设置布局样式
-                  this.safeSetLayoutStyles(mainCol, {
-                    flex: '1 1 auto',
-                    maxWidth: `calc(100% - ${remainingWidth} - ${width})`,
-                    transition: 'all 0.3s'
-                  })
-                }
-                triggerResize()
-              }
-            }
-          }
-        } catch (error) {
-          console.error('布局更新失败:', error)
-        }
-        this.syncDrawerMinHeightToParentRow()
-      })
-    }
-  },
-  watch: {
-    queryParamsName: {
-      immediate: true,
-      handler (newVal) {
-        if (newVal?.endsWith('Frame')) {
-          this.isOpen = true
-          // 确保布局更新
-          this.$nextTick(() => {
-            this.updateLayout(true)
-            this.updateCardBodyPadding()
-            this.syncDrawerMinHeightToParentRow()
-            this.activateSidebarScope()
-          })
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.drawer {
-  position: relative;
-  height: 100%;
-  min-height: 100%;
-  width: 100%;
-  background-color: #fff;
-  border-left: solid rgba(240, 242, 245) 2px;
-  /* 明确列出需要过渡的属性，min-height 和 height 永远不走过渡，避免箭头"慢慢下移" */
-  transition: width 0.3s ease, background-color 0.3s ease, border-color 0.3s ease,
-  box-shadow 0.3s ease, border-radius 0.3s ease;
-  border-radius: 10px;
-}
-/* 折叠时保持高度 */
-.drawer-collapsed {
-  width: 26px;
-  box-shadow: none;
-  height: var(--sidebar-row-height, 100px) !important;
-  min-height: var(--sidebar-row-height, 100px);
-}
-/* 展开时高度由内容撑开，但最小高度用同一变量保持箭头位置一致 */
-.drawer:not(.drawer-collapsed) {
-  min-height: var(--sidebar-row-height, 100px);
-}
-.drawer-toggle {
-  position: absolute;
-  left: 0;
-  width: 26px;
-  height: 48px;
-  cursor: pointer;
-  background-color: rgba(255, 255, 255, 0) !important;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  border-radius: 0;
-  box-shadow: none;
-}
-/* 右侧侧边栏：按钮在右侧 */
-.position-right > .drawer-toggle {
-  left: auto;
-  right: 0;
-}
-.arrow {
-  font-size: 20px;
-  line-height: 1;
-  color: #94979E;
-}
-.drawer-content {
-  height: 100%;
-  padding-right: 12px;
-  margin-left: 26px;
-}
-/* 右侧侧边栏的内容区域 */
-.position-right > .drawer-content {
-  padding-right: 26px;
-  padding-left: 12px;
-  margin-left: 0;
-  margin-right: 26px;
-}
-</style>