vue2-client 1.20.27 → 1.20.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.20.27",
+  "version": "1.20.29",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

package/src/base-client/components/common/XMarkdownSectionExtractor/DemoXMarkdownSectionExtractor.vue

@@ -2,132 +2,36 @@
   <div class="demo-x-markdown-section-extractor">
     <h2>Demo: XMarkdownSectionExtractor + bingli.md</h2>
 
-    <!-- xlist-default 格式：XList 默认模式 -->
     <XMarkdownSectionExtractor
+      ref="extractor"
       :source="bingliMd"
-      :sectionsConfig="sectionsConfig"
-      :showUploadButton="true"
-      @upload="onUploadMarkdown"
-      outputFormat="xlist-default"
-      v-slot="{ formattedData, loading, error }"
-    >
-      <div class="result-panel">
-        <div v-if="loading" class="state-text">正在抽取中...</div>
-        <div v-else-if="error" class="state-text error">
-          抽取失败：{{ error && (error.message || error) }}
-        </div>
-        <div v-else>
-          <h3>XList 默认模式 (xlist-default)</h3>
-          <p class="format-desc">使用 initialData 传入 XList 组件</p>
-          <XList :initialData="formattedData" />
-        </div>
-      </div>
-    </XMarkdownSectionExtractor>
-
-    <!-- xlist-title-content 格式：标题-内容模式 -->
-    <XMarkdownSectionExtractor
-      :source="bingliMd"
-      :sectionsConfig="sectionsConfig"
       :showUploadButton="false"
-      outputFormat="xlist-title-content"
-      v-slot="{ formattedData, loading, error }"
-    >
-      <div class="result-panel">
-        <div v-if="loading" class="state-text">正在抽取中...</div>
-        <div v-else-if="error" class="state-text error">
-          抽取失败：{{ error && (error.message || error) }}
-        </div>
-        <div v-else>
-          <h3>XList 标题-内容模式 (xlist-title-content)</h3>
-          <p class="format-desc">使用 XTitle + XList 组合渲染</p>
-          <div v-for="(section, sIdx) in formattedData" :key="sIdx" class="section-block">
-            <!-- 区块标题 -->
-            <XTitle :title="section.sectionTitle" />
-            <!-- 每个建议项 -->
-            <div v-for="(item, iIdx) in section.items" :key="iIdx" class="item-block">
-              <XTitle :title="item.title" littlefont />
-              <XList v-if="item.content && item.content.length" :initialData="item.content.map((c, ci) => ({ number: ci + 1, name: c }))" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </XMarkdownSectionExtractor>
+      @extracted="onExtracted"
+    />
   </div>
 </template>
 
 <script>
 import XMarkdownSectionExtractor from './XMarkdownSectionExtractor.vue'
-import XList from '@vue2-client/base-client/components/his/XList/XList.vue'
-import XTitle from '@vue2-client/base-client/components/his/XTitle/XTitle.vue'
 import bingliMd from './bingli.md'
 
 export default {
   name: 'DemoXMarkdownSectionExtractor',
-  components: { XMarkdownSectionExtractor, XList, XTitle },
+  components: { XMarkdownSectionExtractor },
   data () {
     return {
-      bingliMd,
-      sectionsConfig: [
-        {
-          key: 'nextStepSuggestion',
-          label: '下一步建议',
-          headingLevel: 3
-        }
-      ]
+      bingliMd
     }
   },
+  mounted () {
+    const keywords = ['下一步建议', '诊断依据']
+    this.$refs.extractor.extractAs(keywords, 'title-content', true)
+  },
   methods: {
-    onUploadMarkdown (file) {
-      this.bingliMd = file
+    onExtracted (sections) {
+      // eslint-disable-next-line no-console
+      console.log('extracted sections:', sections)
     }
   }
 }
 </script>
-
-<style lang="less" scoped>
-.demo-x-markdown-section-extractor {
-  padding: 16px;
-  font-size: 14px;
-  line-height: 1.6;
-}
-
-.result-panel {
-  margin-top: 12px;
-  padding: 12px;
-  border-radius: 4px;
-  border: 1px solid #f0f0f0;
-  background-color: #fafafa;
-}
-
-.state-text {
-  color: rgba(0, 0, 0, 0.45);
-}
-
-.state-text.error {
-  color: #ff4d4f;
-}
-
-.format-desc {
-  color: rgba(0, 0, 0, 0.65);
-  font-size: 13px;
-  margin-bottom: 8px;
-}
-
-.section-block {
-  margin-bottom: 16px;
-  padding-bottom: 16px;
-  border-bottom: 1px dashed #e8e8e8;
-
-  &:last-child {
-    border-bottom: none;
-    margin-bottom: 0;
-  }
-}
-
-.item-block {
-  margin: 8px 0 8px 16px;
-  padding-left: 12px;
-  border-left: 2px solid #1890ff;
-}
-</style>
-

package/src/base-client/components/common/XMarkdownSectionExtractor/XMarkdownSectionExtractor.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="x-markdown-section-extractor">
-    <!-- 左上角上传按钮（可通过 showUploadButton 关闭） -->
+    <!-- 左上角上传按钮 -->
     <div v-if="showUploadButton" class="extractor-header">
       <input
         ref="fileInput"
@@ -9,13 +9,23 @@
         class="file-input"
         @change="handleFileUpload"
       >
-      <button type="button" class="upload-btn" @click.prevent="triggerFileSelect">
-        上传 Markdown
-      </button>
     </div>
 
-    <!-- 这个组件的主要作用是：读取 markdown + 抽取 JSON，然后通过事件抛出给外层 -->
-    <!-- 默认不渲染任何可见内容，只在需要调试时可以打开简单输出 -->
+    <!-- 渲染 extractAs 返回的 sections -->
+    <div v-if="renderedSections.length" class="rendered-sections">
+      <div v-for="(sec, idx) in renderedSections" :key="idx" class="section-block">
+        <div class="section-title">{{ sec.sectionTitle }}</div>
+        <div v-for="(item, iIdx) in sec.items" :key="iIdx" class="item-block">
+          <div class="item-title">{{ item.title }}</div>
+          <div v-if="item.content.length" class="item-list">
+            <div v-for="(c, cIdx) in item.content" :key="cIdx" class="list-item">
+              <span class="item-number">{{ cIdx + 1 }}.</span> {{ c }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <slot
       :sections="sections"
       :itemsArray="itemsArray"
@@ -23,9 +33,7 @@
       :formattedData="computedFormattedData"
       :loading="loading"
       :error="error"
-    >
-      <!-- 默认插槽内容：什么都不展示 -->
-    </slot>
+    />
   </div>
 </template>
 
@@ -41,43 +49,18 @@ import {
 export default {
   name: 'XMarkdownSectionExtractor',
   props: {
-    /**
-     * markdown 源，支持：
-     * - 直接传 markdown 字符串
-     * - import md from './a.md'
-     * - File / Blob
-     * - URL/相对路径（.md 结尾）
-     */
     source: {
       type: [String, Object],
       required: true
     },
-    /**
-     * 区块配置
-     * 示例：
-     * [
-     *   { key: 'nextStepSuggestion', label: '下一步建议', headingLevel: 3 }
-     * ]
-     */
     sectionsConfig: {
       type: Array,
       default: () => []
     },
-    /**
-     * 是否在 mounted 时立即读取 + 抽取
-     */
     autoExtract: {
       type: Boolean,
       default: true
     },
-    /**
-     * 输出格式配置
-     * 可选值：
-     * - 'default': 返回原始 sections 数组
-     * - 'xlist-default': 返回 XList 默认模式格式 [{ number, name }, ...]
-     * - 'xlist-card': 返回 XList 卡片模式格式二维数组
-     * - 'xlist-title-content': 返回 XList 标题-内容模式 [{ sectionTitle, items: [{ title, content: [] }] }]
-     */
     outputFormat: {
       type: String,
       default: 'default',
@@ -85,18 +68,10 @@ export default {
         return ['default', 'xlist-default', 'xlist-card', 'xlist-title-content'].includes(value)
       }
     },
-    /**
-     * 输出格式选项，用于字段映射
-     * xlist-default 模式: { numberField: 'number', nameField: 'name' }
-     * xlist-card 模式: { labelField: 'label', valueField: 'name' }
-     */
     outputOptions: {
       type: Object,
       default: () => ({})
     },
-    /**
-     * 是否显示左上角「上传 Markdown」按钮
-     */
     showUploadButton: {
       type: Boolean,
       default: true
@@ -110,11 +85,11 @@ export default {
       itemsArray: [],
       itemsByKey: {},
       formattedData: null,
-      currentSource: null
+      currentSource: null,
+      renderedSections: []
     }
   },
   computed: {
-    // 根据 outputFormat 动态计算格式化后的数据
     computedFormattedData () {
       if (!this.sections || this.sections.length === 0) {
         return this.outputFormat === 'default' ? [] : (this.outputFormat === 'xlist-card' ? [] : [])
@@ -155,44 +130,22 @@ export default {
       deep: true
     }
   },
-  mounted () {
-    // source 的 watch 会在 mounted 之前以 immediate 模式执行，此处无需重复调用
-  },
   methods: {
-    /**
-     * 触发文件选择
-     */
-    triggerFileSelect () {
-      const input = this.$refs.fileInput
-      if (input) {
-        input.click()
-      }
-    },
-    /**
-     * 处理文件上传
-     */
     handleFileUpload (event) {
       const file = event.target.files && event.target.files[0]
       if (!file) return
 
-      // 检查文件类型
       if (!file.name.endsWith('.md') && !file.name.endsWith('.markdown') && file.type !== 'text/markdown') {
         this.$emit('error', new Error('请上传 .md 或 .markdown 文件'))
         return
       }
 
-      // 通知父组件更新 source（父组件可监听后统一更新，多个实例会一起更新）
       this.$emit('upload', file)
-      // 本实例也更新并解析
       this.currentSource = file
       this.extract()
 
-      // 清空 input，以便重复选择同一文件
       event.target.value = ''
     },
-    /**
-     * 手动触发一次读取 + 抽取
-     */
     async extract () {
       if (!this.currentSource) {
         return
@@ -207,7 +160,6 @@ export default {
         this.itemsArray = itemsArray
         const itemsByKey = flattenSectionsToItemsByKey(sections)
         this.itemsByKey = itemsByKey
-        // 格式化数据
         const formattedData = convertToFormat(sections, this.outputFormat, this.outputOptions)
         this.formattedData = formattedData
         this.$emit('update:sections', sections)
@@ -220,7 +172,6 @@ export default {
         this.$emit('formatted-data', formattedData)
         return sections
       } catch (e) {
-        // eslint-disable-next-line no-console
         console.error('[XMarkdownSectionExtractor] 抽取失败:', e)
         this.error = e
         this.sections = []
@@ -232,6 +183,36 @@ export default {
       } finally {
         this.loading = false
       }
+    },
+    async extractAs (keywords = [], parseType = 'title-content', asComponent = false) {
+      if (!Array.isArray(keywords) || keywords.length === 0) {
+        return []
+      }
+      const config = keywords.map((label, idx) => ({
+        key: `section_${idx}`,
+        label,
+        headingLevel: 3
+      }))
+      const sections = extractSectionsFromMarkdown(
+        await readMarkdownAsText(this.currentSource),
+        config
+      )
+      if (parseType === 'flat') {
+        return flattenSectionsToItemsArray(sections)
+      }
+      const result = sections.map(sec => ({
+        sectionTitle: sec.label || '',
+        items: Array.isArray(sec.hierarchicalItems)
+          ? sec.hierarchicalItems.map(h => ({
+            title: h.title || '',
+            content: Array.isArray(h.items) ? h.items : []
+          }))
+          : []
+      }))
+      if (asComponent) {
+        this.renderedSections = result
+      }
+      return result
     }
   }
 }
@@ -250,23 +231,57 @@ export default {
   display: none;
 }
 
-.upload-btn {
-  padding: 4px 12px;
-  font-size: 12px;
-  color: #fff;
-  background-color: #1890ff;
-  border: none;
-  border-radius: 3px;
-  cursor: pointer;
-  transition: background-color 0.3s;
+.rendered-sections {
+  padding: 16px;
+  background: #fff;
+  border-radius: 4px;
+  border: 1px solid #f0f0f0;
+}
 
-  &:hover {
-    background-color: #40a9ff;
-  }
+.section-block {
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px dashed #e8e8e8;
 
-  &:active {
-    background-color: #096dd9;
+  &:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
   }
 }
-</style>
 
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 12px;
+}
+
+.item-block {
+  margin: 8px 0 8px 16px;
+  padding-left: 12px;
+  border-left: 2px solid #1890ff;
+}
+
+.item-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #555;
+  margin-bottom: 6px;
+}
+
+.item-list {
+  padding-left: 4px;
+}
+
+.list-item {
+  padding: 4px 0;
+  color: #666;
+  font-size: 13px;
+}
+
+.item-number {
+  color: #1890ff;
+  font-weight: 500;
+  margin-right: 6px;
+}
+</style>

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

@@ -1,13 +1,14 @@
 <template>
-  <div
-    class="drawer"
-    :class="[{ 'drawer-collapsed': !isOpen }, wrapperClassObject()]"
-    :style="drawerStyle">
     <div
-      v-show="!isFrameConfig"
+      ref="drawerRoot"
+      class="drawer"
+      :class="[{ 'drawer-collapsed': !isOpen }, wrapperClassObject()]"
+      :style="drawerStyle">
+    <div
+      v-show="!isFrameConfig || showToggleInFrame"
       class="drawer-toggle"
       :class="{ 'toggle-collapsed': !isOpen }"
-      :style="toggleStyle"
+      :style="toggleButtonStyle"
       @click="toggleDrawer">
       <div class="arrow">
         {{ isOpen ? '›' : '‹' }}
@@ -48,6 +49,11 @@ export default {
       type: String,
       default: 'af-his'
     },
+    // Frame 配置下是否依然显示收缩按钮（默认为 false，保持兼容老用法）
+    showToggleInFrame: {
+      type: Boolean,
+      default: false
+    },
     // 是否允许该组件主动调整同级布局（默认不影响其它页面）
     affectLayout: {
       type: Boolean,
@@ -86,13 +92,25 @@ export default {
       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 }]
+      mainWithData: [{ max: 80, min: 50 }],
+      rowResizeObserver: null,
+      drawerResizeObserver: null,
+      _syncDrawerMinHeightRafId: null,
+      // 记录所在 a-row 有史以来出现过的最大高度，只增不减，展开/收起基准统一
+      _maxRowHeight: null,
+      // 记录抽屉自身高度，用于按钮居中
+      _drawerHeight: null
     }
   },
   mounted () {
@@ -102,8 +120,120 @@ export default {
     if (this.isOpen) {
       this.updateCardBodyPadding()
     }
+    // 同步计算一次最大行高（此时 this.$el 已挂载，computed 属性立即响应，按钮 top 立即就位）
+    this.computeMaxRowHeight()
+    this.$nextTick(() => {
+      this.bindRowResizeObserver()
+      this.bindDrawerResizeObserver()
+    })
+  },
+  beforeDestroy () {
+    if (this._syncDrawerMinHeightRafId) {
+      cancelAnimationFrame(this._syncDrawerMinHeightRafId)
+      this._syncDrawerMinHeightRafId = null
+    }
+    this.unbindRowResizeObserver()
+    this.unbindDrawerResizeObserver()
   },
   methods: {
+    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 = {}
@@ -145,10 +275,24 @@ export default {
       this.restoreElementStyles(element, protectedStyles)
     },
     toggleDrawer () {
+      // 展开前读一次行高（此时仍为展开状态），更新最大高度记录，确保收起后基准正确
+      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
+            }
+          }
+        }
+      }
       this.isOpen = !this.isOpen
       this.$emit('on-drawer-change', this.isOpen)
       this.updateLayout(this.isOpen)
       if (this.isOpen) {
+        // 展开后行高可能微增，读一次最新值（只增不减）
+        this.syncDrawerMinHeightToParentRow()
         this.$nextTick(() => {
           this.updateCardBodyPadding()
         })
@@ -167,7 +311,8 @@ export default {
     },
     // 更新card-body的padding
     updateCardBodyPadding () {
-      if (this.widthMode) { return }
+      // widthMode 为空时才需要处理
+      if (!this.widthMode) { return }
       this.$nextTick(() => {
         const cardBody = this.$el.querySelector('.ant-card-body')
         if (cardBody) {
@@ -202,8 +347,13 @@ export default {
           return []
         }
 
-        // 修改这里 如果没有指定className 则获取全部
-        const allCols = Array.from(row.children).filter(child => !className || child.className.includes(className))
+        // 如果没有指定 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)
@@ -212,6 +362,21 @@ export default {
         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) {
@@ -254,7 +419,8 @@ export default {
     updateLayout (isOpen) {
       this.$nextTick(() => {
         try {
-          const otherCols = this.getSiblingCols('ant-col-12')
+          // 获取当前行内所有与侧边栏同级的 a-col 列
+          const otherCols = this.getSiblingCols()
           if (otherCols.length > 0) {
             let currentCol = this.$el.parentNode
             while (currentCol && !currentCol.className.includes('ant-col')) {
@@ -281,9 +447,9 @@ export default {
                       maxWidth: `${drawerWidth}px`,
                       transition: 'all 0.3s'
                     })
-                    if (otherCols.length === 1) {
-                      const mainCol = otherCols[0]
-                      const remainingWidth = this.computeRemainingWidth(this.getSiblingCols(undefined), mainCol, currentCol)
+                    const mainCol = this.findNearestContentCol(otherCols, currentCol)
+                    if (mainCol) {
+                      const remainingWidth = this.computeRemainingWidth(this.getSiblingCols(), mainCol, currentCol)
 
                       // 使用安全的方式设置布局样式
                       this.safeSetLayoutStyles(mainCol, {
@@ -300,9 +466,9 @@ export default {
                       maxWidth: `${drawerWidth}%`,
                       transition: 'all 0.3s'
                     })
-                    if (otherCols.length === 1) {
-                      const mainCol = otherCols[0]
-                      const remainingWidth = this.computeRemainingWidth(this.getSiblingCols(undefined), mainCol, currentCol)
+                    const mainCol = this.findNearestContentCol(otherCols, currentCol)
+                    if (mainCol) {
+                      const remainingWidth = this.computeRemainingWidth(this.getSiblingCols(), mainCol, currentCol)
 
                       // 使用安全的方式设置布局样式
                       this.safeSetLayoutStyles(mainCol, {
@@ -316,8 +482,8 @@ export default {
                   // 恢复默认：只移除我们设置的属性
                   currentCol.style.removeProperty('flex')
                   currentCol.style.removeProperty('max-width')
-                  if (otherCols.length === 1) {
-                    const mainCol = otherCols[0]
+                  const mainCol = this.findNearestContentCol(otherCols, currentCol)
+                  if (mainCol) {
                     mainCol.style.removeProperty('flex')
                     mainCol.style.removeProperty('max-width')
                   }
@@ -332,9 +498,9 @@ export default {
                   maxWidth: width,
                   transition: 'all 0.3s'
                 })
-                if (otherCols.length === 1) {
-                  const mainCol = otherCols[0]
-                  const remainingWidth = this.computeRemainingWidth(this.getSiblingCols(undefined), mainCol, currentCol)
+                const mainCol = this.findNearestContentCol(otherCols, currentCol)
+                if (mainCol) {
+                  const remainingWidth = this.computeRemainingWidth(this.getSiblingCols(), mainCol, currentCol)
 
                   // 使用安全的方式设置布局样式
                   this.safeSetLayoutStyles(mainCol, {
@@ -350,6 +516,7 @@ export default {
         } catch (error) {
           console.error('布局更新失败:', error)
         }
+        this.syncDrawerMinHeightToParentRow()
       })
     }
   },
@@ -363,6 +530,7 @@ export default {
           this.$nextTick(() => {
             this.updateLayout(true)
             this.updateCardBodyPadding()
+            this.syncDrawerMinHeightToParentRow()
           })
         }
       }
@@ -374,16 +542,17 @@ export default {
     },
     drawerStyle () {
       const isPx = this.widthMode === 'px'
-      if (!this.isOpen) {
-        // collapsed width
-        return isPx
+      const base = !this.isOpen
+        ? isPx
           ? { width: `${this.collapsedWidth}px` }
           : { width: `${this.collapsedWidthPercent}%` }
+        : isPx
+          ? { width: `${this.expandedWidth}px`, display: 'flex', flexDirection: 'row', alignItems: 'stretch' }
+          : { width: `${this.expandedWidthPercent}%`, display: 'flex', flexDirection: 'row', alignItems: 'stretch' }
+      if (this.rowHeight) {
+        base['--sidebar-row-height'] = this.rowHeight + 'px'
       }
-      // expanded width for the whole drawer wrapper
-      return isPx
-        ? { width: `${this.expandedWidth}px`, display: 'flex', flexDirection: 'row', alignItems: 'stretch' }
-        : { width: `${this.expandedWidthPercent}%`, display: 'flex', flexDirection: 'row', alignItems: 'stretch' }
+      return base
     },
     contentStyle () {
       const isPx = this.widthMode === 'px'
@@ -395,15 +564,13 @@ export default {
       const contentPercent = Math.max(0, (this.expandedWidthPercent || 0) - (this.collapsedWidthPercent || 0))
       return { width: `${contentPercent}%`, flex: '1 1 auto', overflow: 'hidden' }
     },
-    toggleStyle () {
-      // 在展开时让切换按钮参与flex布局，避免与内容重叠；收起时保持绝对定位
+    toggleButtonStyle () {
       const isPx = this.widthMode === 'px'
-      if (this.isOpen) {
-        return isPx
-          ? { position: 'relative', left: '0', zIndex: 1, flex: `0 0 ${this.collapsedWidth}px`, width: `${this.collapsedWidth}px` }
-          : { position: 'relative', left: '0', zIndex: 1, flex: `0 0 ${this.collapsedWidthPercent}%`, width: `${this.collapsedWidthPercent}%` }
-      }
-      return { left: '0' }
+      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 }
     }
   }
 }
@@ -413,21 +580,29 @@ export default {
 .drawer {
   position: relative;
   height: 100%;
+  min-height: 100%;
   width: 100%;
   background-color: #fff;
   border-left: solid rgba(240, 242, 245) 2px;
-  transition: all 0.3s;
+  /* 明确列出需要过渡的属性，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;
-  top: 50%;
-  transform: translateY(-50%);
+  left: 0;
   width: 26px;
   height: 48px;
   cursor: pointer;
@@ -436,7 +611,6 @@ export default {
   align-items: center;
   justify-content: center;
   z-index: 1000;
-  transition: all 0.3s;
 }
 /* 打开状态：箭头在抽屉内 */
 .drawer:not(.drawer-collapsed) .drawer-toggle {