vue2-client 1.22.2 → 1.22.3

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

@@ -0,0 +1,788 @@
+<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>