n20-common-lib 3.2.3 → 3.2.5

package/src/components/ProFilterView/index.vue

@@ -4,7 +4,7 @@
       <slot name="leftContent"></slot>
       <div class="flex-box flex-v">
         <el-popover
-          v-if="bussId"
+          v-if="bussId && isFilter"
           v-model="viewPopoverVisible"
           popper-class="pro-filter-view-popover"
           placement="bottom-start"
@@ -52,7 +52,7 @@
             </div>
           </div>
         </el-popover>
-        <el-button v-if="bussId && selectItem" class="activiti m-r" @click="edit(selectItem, true)">
+        <el-button v-if="bussId && selectItem && isFilter" class="activiti m-r" @click="edit(selectItem, true)">
           <div class="flex-box flex-v">
             <!-- <img src="./find.svg" alt="" /> -->
             <i class="v3-icon-find"></i>
@@ -67,14 +67,19 @@
           </div>
         </el-button>
         <div class="flex-box flex-v">
-          <el-button icon="v3-icon-filter" class="m-r-s botton" @click="filterExpanded = !filterExpanded">{{
-            '筛选' | $lc
-          }}</el-button>
+          <el-button
+            v-if="isFilter"
+            icon="v3-icon-filter"
+            class="m-r-s botton"
+            @click="filterExpanded = !filterExpanded"
+            >{{ '筛选' | $lc }}</el-button
+          >
           <slot name="rightContent"></slot>
         </div>
       </div>
     </div>
     <cl-advanced-filter
+      v-if="isFilter"
       ref="filter"
       class="filter"
       :class="{ 'is-hidden': !filterExpanded }"
@@ -260,6 +265,11 @@ export default {
     autoExpandWithValues: {
       type: Boolean,
       default: false
+    },
+    // 是否显示筛选按钮及筛选区域，为 false 时不显示筛选按钮、视图相关 UI，且不请求筛选相关接口
+    isFilter: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -327,16 +337,11 @@ export default {
     filterObj() {
       const filterKeys = new Set()
       this.filterList.forEach((item) => {
-        ;[
-          item.value,
-          item.startDate,
-          item.endDate,
-          item.startValue,
-          item.endValue,
-          ...(item.slotFields || [])
-        ].forEach((key) => {
-          if (key) filterKeys.add(key)
-        })
+        ;[item.value, item.startDate, item.endDate, item.startValue, item.endValue, ...(item.slotFields || [])].forEach(
+          (key) => {
+            if (key) filterKeys.add(key)
+          }
+        )
       })
 
       const extraInitialValues = {}
@@ -383,14 +388,16 @@ export default {
     }
   },
   mounted() {
-    // 只有在有 bussId 时才获取视图列表
-    if (this.bussId) {
+    // 只有在有 bussId 且 isFilter 为 true 时才获取视图列表
+    if (this.bussId && this.isFilter) {
       this.getFilterList()
     }
     // 合并初始筛选值：slot 字段使用默认值，其他字段使用 initialValue 传入的值
-    this.searchValue = { ...this.getInitialSearchValue, ...this.initialValue }
-    // 初始挂载后根据筛选值情况决定是否自动展开
-    this.checkAndAutoExpand()
+    if (this.isFilter) {
+      this.searchValue = { ...this.getInitialSearchValue, ...this.initialValue }
+      // 初始挂载后根据筛选值情况决定是否自动展开
+      this.checkAndAutoExpand()
+    }
   },
   methods: {
     /**
@@ -537,8 +544,8 @@ export default {
     },
     // 通过bussId拿取视图列表
     getFilterList(viewId) {
-      // 如果没有 bussId，不获取视图列表
-      if (!this.bussId) {
+      // 如果没有 bussId 或 isFilter 为 false，不获取视图列表
+      if (!this.bussId || !this.isFilter) {
         return
       }
 

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,