n20-common-lib 3.2.4 → 3.2.5

package/src/components/ViewToggle/index.vue

@@ -48,7 +48,9 @@ export default {
   data() {
     return {
       // 自适应模式下指示器的测量数据
-      measuredIndicator: { width: 0, height: 0, translateX: 0 }
+      measuredIndicator: { width: 0, height: 0, translateX: 0 },
+      indicatorResizeObserver: null,
+      indicatorRaf: null
     }
   },
   computed: {
@@ -85,8 +87,8 @@ export default {
       // 自适应模式：基于 DOM 测量定位
       const { width, height, translateX } = this.measuredIndicator
       return {
-        width: `${width - 2 * gap}px`,
-        height: `${height - 2 * gap}px`,
+        width: `${Math.max(width - 2 * gap, 0)}px`,
+        height: `${Math.max(height - 2 * gap, 0)}px`,
         top: `${gap}px`,
         left: `${gap}px`,
         transform: `translateX(${translateX}px)`
@@ -95,17 +97,33 @@ export default {
   },
   watch: {
     value() {
-      if (!this.isFixedWidth) this.$nextTick(this.updateIndicator)
+      if (!this.isFixedWidth) this.$nextTick(this.syncIndicatorObserver)
     },
     options: {
       deep: true,
       handler() {
-        if (!this.isFixedWidth) this.$nextTick(this.updateIndicator)
+        if (!this.isFixedWidth) this.$nextTick(this.syncIndicatorObserver)
       }
+    },
+    itemWidth() {
+      this.$nextTick(this.syncIndicatorObserver)
+    },
+    itemHeight() {
+      if (!this.isFixedWidth) this.$nextTick(this.scheduleIndicatorUpdate)
     }
   },
   mounted() {
-    if (!this.isFixedWidth) this.updateIndicator()
+    this.syncIndicatorObserver()
+  },
+  activated() {
+    if (!this.isFixedWidth) this.scheduleIndicatorUpdate()
+  },
+  beforeDestroy() {
+    this.destroyIndicatorObserver()
+    if (this.indicatorRaf) {
+      this.cancelIndicatorFrame(this.indicatorRaf)
+      this.indicatorRaf = null
+    }
   },
   methods: {
     // 统一尺寸格式化
@@ -113,6 +131,56 @@ export default {
       if (typeof val === 'number') return `${val}px`
       return isNaN(val) ? val : `${val}px`
     },
+    syncIndicatorObserver() {
+      this.destroyIndicatorObserver()
+      if (this.isFixedWidth) return
+      this.scheduleIndicatorUpdate()
+
+      if (typeof window === 'undefined' || typeof window.ResizeObserver === 'undefined') {
+        if (typeof window !== 'undefined') {
+          window.addEventListener('resize', this.scheduleIndicatorUpdate)
+        }
+        return
+      }
+
+      this.indicatorResizeObserver = new window.ResizeObserver(() => {
+        this.scheduleIndicatorUpdate()
+      })
+      const container = this.$refs.container
+      const items = this.$refs.items || []
+      const activeIndex = this.options.findIndex((item) => item.value === this.value)
+      if (container) this.indicatorResizeObserver.observe(container)
+      if (items[activeIndex]) this.indicatorResizeObserver.observe(items[activeIndex])
+    },
+    destroyIndicatorObserver() {
+      if (this.indicatorResizeObserver) {
+        this.indicatorResizeObserver.disconnect()
+        this.indicatorResizeObserver = null
+      }
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('resize', this.scheduleIndicatorUpdate)
+      }
+    },
+    requestIndicatorFrame(callback) {
+      if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
+        return window.requestAnimationFrame(callback)
+      }
+      return setTimeout(callback, 16)
+    },
+    cancelIndicatorFrame(frameId) {
+      if (typeof window !== 'undefined' && typeof window.cancelAnimationFrame === 'function') {
+        window.cancelAnimationFrame(frameId)
+        return
+      }
+      clearTimeout(frameId)
+    },
+    scheduleIndicatorUpdate() {
+      if (this.indicatorRaf) this.cancelIndicatorFrame(this.indicatorRaf)
+      this.indicatorRaf = this.requestIndicatorFrame(() => {
+        this.indicatorRaf = null
+        this.updateIndicator()
+      })
+    },
     // 自适应模式下测量激活项的位置
     updateIndicator() {
       const items = this.$refs.items

package/src/index.js

@@ -137,6 +137,7 @@ import tableProV3 from './components/v3/TablePro/index.vue'
 import FileUploadTableV3 from './components/v3/UploadList/index.vue'
 import ViewToggle from './components/ViewToggle/index.vue'
 import WorkCard from './components/WorkCard/index.vue'
+import InfoCard from './components/InfoCard/index.vue'
 import WornPagination from './components/WornPagination/index.vue'
 import VTableLoading from './directives/loading/index.js'
 
@@ -266,6 +267,7 @@ const components = [
   BusiDatePicker,
   TableTransfer,
   WorkCard,
+  InfoCard,
   UploadMsg,
   Tree,
   DateChoose,
@@ -436,6 +438,7 @@ export {
   Upload,
   UploadMsg,
   WorkCard,
+  InfoCard,
   WornPagination,
   /* v3组件*/
   tableProV3,