20260828173144

code/fms/fms-vue/src/layouts/DefaultLayout.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, defineComponent, h, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
+import { computed, defineComponent, h, provide, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useAppStore } from '@/stores/app'
 import { Splitter, SplitterPanel } from '@/components/ui'
@@ -106,36 +106,6 @@ function toggleSidebar() {
   appStore.setSidebar(true)
 }
 provide('toggleSidebar', toggleSidebar)
-
-/* ---------- 内容可视高度（页面撑满用） ----------
- * 实测 .fms-content 可视高度（clientHeight - 纵向 padding），写入 CSS 变量
- * --fms-content-height（随 DOM 继承给页面所有后代）。
- * 需要「固定高度 + 内部滚动」的页面（如工具栏固定、表格内部滚动）直接写：
- *   height: var(--fms-content-height)
- * 替代 calc(100vh - 116px) 这类魔数——顶栏/页签/padding 等布局内部变化时自动跟随，
- * 页面无需改动。 */
-const contentRef = ref(null)
-let contentResizeObserver = null
-
-function syncContentHeight() {
-  const el = contentRef.value
-  if (!el) return
-  const style = getComputedStyle(el)
-  const height =
-    el.clientHeight - parseFloat(style.paddingTop || '0') - parseFloat(style.paddingBottom || '0')
-  el.style.setProperty('--fms-content-height', `${height}px`)
-}
-
-onMounted(() => {
-  // ResizeObserver 首次 observe 会立即回调一次，初始值无需额外同步
-  contentResizeObserver = new ResizeObserver(syncContentHeight)
-  if (contentRef.value) contentResizeObserver.observe(contentRef.value)
-})
-
-onBeforeUnmount(() => {
-  contentResizeObserver?.disconnect()
-  contentResizeObserver = null
-})
 </script>
 
 <template>
@@ -166,7 +136,7 @@ onBeforeUnmount(() => {
           <AppTopbar />
 
           <div class="fms-main">
-            <div ref="contentRef" class="fms-content">
+            <div class="fms-content">
               <router-view v-slot="{ Component }">
                 <transition name="page" mode="out-in">
                   <div :key="route.fullPath" class="fms-page-wrap">
@@ -306,8 +276,9 @@ onBeforeUnmount(() => {
  * overflow: auto hidden —— 只允许纵向滚动，禁止横向滚动条：
  * 侧栏折叠/展开过渡（flex-basis 180ms）瞬间内容宽度会短暂超出容器，
  * 若允许 x 滚动会出现滚动条闪现；页面内容的横向滚动应由内部容器（表格/splitter）处理。
- * 页面需要「固定高度 + 内部滚动」时用 height: var(--fms-content-height)
- * （由布局实测写入，随顶栏/页签/padding 变化自动跟随），不要手写 calc(100vh - xx) 魔数。
+ * 页面需要「固定高度 + 内部滚动」时走纯 flex 链：.fms-content / .fms-page-wrap 均已
+ * flex:1 + min-height:0，页面根再写 flex:1 + min-height:0 即可获得确定高度（overflow
+ * 交给页面内部容器），不要手写 calc(100vh - xx) 魔数。
  * 页面内部的分层白卡：background: var(--fms-card) + border-radius + box-shadow，
  * 卡间用 margin/gap 留出灰缝，不要用 border 画分隔线 */
 .fms-content {