@epxing/dashboard 0.0.0-stage → 5.3.0-beta.1

package/src/DashboardGrid.vue

@@ -0,0 +1,189 @@
+<template>
+  <div ref="root" :class="['epx-dashboard-grid', { 'epx-dashboard-grid--float-mode': floatMode }]" :style="containerStyle">
+    <div v-for="entry in entries" :key="entry.item.id"
+      v-gate="entry"
+      :class="['epx-dashboard-grid__item', { 'epx-dashboard-grid__item--float': entry.float, 'epx-dashboard-grid__item--static': !!entry.item.static }]"
+      :style="entry.style"
+      :data-item-id="entry.item.id"
+      :data-gated="entry.gated ? '1' : null">
+      <slot v-if="shouldRender(entry.item)" name="item" :item="entry.item" :rect="entry.rect"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+// 看板网格（运行态）：不实例化任何拖拽交互组件、不 import 布局库，只按几何公式把每一项算成绝对定位盒子。
+// 设计态（mode='design'）在阶段 3 接入，本文件目前只实现 view。
+import { normalizeGridParams, isContainerType } from './grid/model'
+import { normalizeGridItem } from './layout-util'
+import { resolveGrid, itemRect, layoutHeight, rectStyle } from './grid/geometry'
+import { compact } from './grid/compact'
+import { createViewportGate } from './grid/useViewportGate'
+
+export default {
+  name: 'epx-dashboard-grid',
+  props: {
+    items: { type: Array, default: () => [] },
+    grid: { type: Object, default: () => ({}) },
+    mode: { type: String, default: 'view' },
+    // all：全部挂载；current：进入可视区后挂载、不再卸载；viewport：进入挂载、远离卸载
+    // 挂载后不可变；要切换请由父组件加 key 重建
+    loadWay: { type: String, default: 'all' },
+    // 显式容器宽度（测试 / 无 ResizeObserver 环境用），缺省由 ResizeObserver 测量
+    // 挂载后不可变；要切换请由父组件加 key 重建
+    width: { type: Number, default: 0 },
+    // rowHeight / gap 为 'auto' 时的换算基准（document.body 高度），由父组件传入并随 resize 更新
+    bodyHeight: { type: Number, default: 0 },
+    // 可视区门控的滚动容器：从本组件向上找最近的匹配祖先，找不到用视口
+    scrollRootSelector: { type: String, default: '.epx-dashboard__container' }
+  },
+  directives: {
+    // 用指令而不是函数 ref：指令的 mounted / unmounted 都能拿到元素本身，函数 ref 卸载时只给 null。
+    // 值是 entry：容器项（entry.gated 为 false）不交给观察器（R14：容器本身不门控，门控作用在容器内的项上）
+    gate: {
+      mounted (el, binding) { if (binding.value.gated) binding.instance.gateObserve(el, binding.value.item.id) },
+      unmounted (el, binding) { binding.instance.gateUnobserve(el) }
+    }
+  },
+  data () {
+    // 门控支持性提前在这里判定，不等 mounted() 里才写入：mounted() 触发的响应式更新要等
+    // 下一次微任务才 flush，首帧渲染仍会用旧值渲染一次（0 项），与「不支持环境退化为全部
+    // 渲染」的首帧语义矛盾。判据与 useViewportGate.js 内部一致（是否存在 IntersectionObserver）。
+    const needGate = this.loadWay === 'current' || this.loadWay === 'viewport'
+    const gateUnsupported = needGate && !(typeof window !== 'undefined' && typeof window.IntersectionObserver === 'function')
+    return { measuredWidth: 0, activeIds: {}, gateUnsupported }
+  },
+  computed: {
+    gridParams () {
+      return normalizeGridParams(this.grid)
+    },
+    containerWidth () {
+      return this.width || this.measuredWidth
+    },
+    resolved () {
+      return resolveGrid(this.gridParams, { containerWidth: this.containerWidth, bodyHeight: this.bodyHeight })
+    },
+    // 整页悬浮（grid.mode === 'float'，R30）：全部项按悬浮处理——不压紧、按 z 叠放，与设计态只有悬浮层一致
+    floatMode () {
+      return this.gridParams.mode === 'float'
+    },
+    // 渲染用坐标：与旧布局库 mounted 后的 compact 同一算法（空隙上移、重叠推下，static 项不动、float 项原样），
+    // 算出的是副本，不写回 props / 页面配置；每项 { item: 原始项, pos: 压紧后的坐标副本 }。整页悬浮时全部项按悬浮算
+    compacted () {
+      const live = (this.items || []).filter(Boolean)
+      const positions = compact(this.floatMode ? live.map(item => ({ ...item, float: true })) : live)
+      return live.map((item, idx) => ({ item, pos: positions[idx] }))
+    },
+    // 只做几何计算、不改写 item：规范化交给下面 items 的 deep watch，在渲染前把
+    // x/y/w/h 落定成数字，这里保持 computed 该有的无副作用约定
+    entries () {
+      return this.compacted.map(({ item, pos }) => {
+        const rect = itemRect(pos, this.resolved)
+        const style = rectStyle(rect)
+        const float = this.floatMode || !!item.float
+        if (float) style.zIndex = 10 + (Number(item.z) || 0)
+        // gated：是否参与可视区门控；容器项（dashboard-div / dashboard-tabs）本身恒渲染、不观察
+        return { item, rect, style, float, gated: !isContainerType(item.contentType) }
+      })
+    },
+    containerStyle () {
+      return { height: layoutHeight(this.compacted.map(e => e.pos), this.resolved) + 'px' }
+    },
+    gated () {
+      return (this.loadWay === 'current' || this.loadWay === 'viewport') && !this.gateUnsupported
+    }
+  },
+  watch: {
+    // 规范化 x/y/w/h（原来放在 entries computed 里就地改写 item，违反 computed 无副作用
+    // 约定，items 若来自 readonly() 源还会静默失败）；顺带把已经不在 items 里的项的
+    // 激活记录一并清掉，别让 activeIds 只增不减。deep: 1 只跟踪数组层与元素身份，不深度
+    // 追踪每项内部字段——这里就地写 item.x/y/w/h，用 deep: true 会和这次改写形成响应式回环。
+    // immediate 让规范化在首帧渲染前就完成，entries 求值时数字已经就绪。
+    items: {
+      deep: 1,
+      handler (v) {
+        const list = v || []
+        // activeIds 的 key 恒为字符串（对象属性名规则），这里统一转字符串比较，避免数字
+        // id 与 for...in 取到的字符串 key 类型不等导致误判「已不存在」、把整批激活记录清空
+        const alive = new Set()
+        for (const item of list) {
+          if (!item) continue
+          normalizeGridItem(item)
+          alive.add(String(item.id))
+        }
+        for (const id in this.activeIds) if (!alive.has(id)) delete this.activeIds[id]
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    shouldRender (item) {
+      if (!this.gated) return true
+      // 容器项本身不门控（其内部网格各自门控）；keepAlive 项豁免卸载
+      if (isContainerType(item.contentType) || item.keepAlive) return true
+      return !!this.activeIds[item.id]
+    },
+    gateObserve (el, id) {
+      if (this.gate) this.gate.observe(el, id)
+    },
+    gateUnobserve (el) {
+      if (this.gate) this.gate.unobserve(el)
+      // 元素卸载时直接清掉激活记录，不只靠 items watch 的整体 diff 兜底
+      if (el.dataset && el.dataset.itemId != null) delete this.activeIds[el.dataset.itemId]
+    },
+    measure () {
+      if (this.$refs.root) this.measuredWidth = this.$refs.root.offsetWidth
+    }
+  },
+  mounted () {
+    if (!this.width) {
+      this.measure()
+      if (typeof ResizeObserver !== 'undefined') {
+        this.resizeObserver = new ResizeObserver(() => this.measure())
+        this.resizeObserver.observe(this.$refs.root)
+      }
+    }
+    if (this.loadWay === 'current' || this.loadWay === 'viewport') {
+      const root = (this.scrollRootSelector && this.$el.closest(this.scrollRootSelector)) || null
+      this.gate = createViewportGate({
+        root,
+        sticky: this.loadWay === 'current',
+        onChange: (id, active) => {
+          if (active) this.activeIds[id] = true
+          else delete this.activeIds[id]
+        }
+      })
+      if (!this.gate.supported) {
+        this.gateUnsupported = true
+        return
+      }
+      // 子元素指令的 mounted 先于本组件的 mounted：门控建好后把已挂载的项补观察一遍（容器项 data-gated 为空，跳过）
+      for (const el of Array.from(this.$el.children)) {
+        if (el.dataset && el.dataset.itemId != null && el.dataset.gated === '1') this.gate.observe(el, el.dataset.itemId)
+      }
+    }
+  },
+  beforeUnmount () {
+    if (this.resizeObserver) this.resizeObserver.disconnect()
+    if (this.gate) this.gate.destroy()
+  }
+}
+</script>
+
+<style lang="scss">
+@include b(dashboard-grid) {
+  position: relative;
+  width: 100%;
+  @include e(item) {
+    position: absolute;
+    box-sizing: border-box;
+    // 图表限高：gridItem 高度由布局决定，图表不能超出；echarts 会按容器实际尺寸重绘
+    .epx-chart {
+      height: 100% !important;
+      min-height: 0 !important;
+      max-height: 100% !important;
+      overflow: hidden !important;
+    }
+  }
+}
+</style>