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

package/src/Widget.vue

@@ -0,0 +1,354 @@
+
+<template>
+  <div :class="['dashboard', 'dashboard--'+ theme, { 'dashboard--hidden-scroll-bar': $configs.scrollBarHidden }]" :style="$component.style" ref="container">
+    <div ref="dashboard" class="dashboard-container" :style="mobileDashboard ? { width: '100%', maxWidth: (Number($configs.mobileCanvasWidth) || 375) + 'px', margin: '0 auto', flex: 'none' } : {}">
+      <epx-dashboard-grid
+        :items="components"
+        :grid="gridParams"
+        :load-way="loadWay"
+        :body-height="bodyHeight"
+        scroll-root-selector=".dashboard-container">
+        <template #item="{ item: component }">
+          <!-- 渲染组件 -->
+          <div v-if="component.contentType" class="dashboard-component">
+            <!-- epx-dashboard__component 是看板主题 CSS 的组件卡片选择器（见 theme-style.js），
+                 widget 内的组件也要带上，否则外层看板的主题样式盖不到这里 -->
+            <epx-component v-bind="isPage? $forwardAttrs($attrs): {}" class="component epx-dashboard__component"
+              :name="component.contentType"
+              is-dashboard
+              :content-type="component.contentType"
+              :dashboard-id="$component.id"
+              :comp-id="getComponentId(component)"
+              :comp-title="component.title"
+              :items="component.items"
+              :itemConfigs="$component.itemConfigs"
+              :comp-style="component.style"
+              :comp-configs="component.configs"
+              :mobile-appearance="mobileRendering ? component.mobileAppearance : undefined"
+              :comp-grid="containerGrid(component)"
+              :chart-cache="$configs.chartCache"
+              :theme="theme">
+            </epx-component>
+          </div>
+        </template>
+      </epx-dashboard-grid>
+    </div>
+  </div>
+</template>
+
+<script>
+import DashboardGrid from './DashboardGrid.vue'
+import chartRequestScope from './chart-request-scope'
+import { evalWith } from '@epxing/utils/src/eval-with'
+import component from '@epxing/core/src/mixins/component'
+import { pageGridMixin } from './grid/mixins'
+import { stackMobileLayout } from './layout-util'
+import { indexDashboardItems, resolveMobileItem } from './mobile-design'
+import { getPageGrid, isLegacyConfig } from './grid/model'
+import { mapState } from 'vuex'
+
+// T31/T29：子树内 component 型全刷新。原用 `this.$children` 递归（Vue3 已移除）→
+// 改走 T31 建的父子注册表 `_epxWalkChildren`（它本身就遍历整棵子树，故不需要外层递归）。
+function refesh () {
+  this.resolveChartRequestBroker().invalidate()
+  this._epxWalkChildren(child => {
+    if (child.$options.$componentType === 'component' && child.$refesh) child.$refesh()
+  })
+}
+export default {
+  name: 'epx-dashboard-widget',
+  mixins: [component, pageGridMixin, chartRequestScope],
+  components: { [DashboardGrid.name]: DashboardGrid },
+  $componentType: 'component',
+  navConfigs: {
+    flag: false
+  },
+  style: {},
+  layout: 'grid',
+  // 组件列表
+  items: [
+  ],
+  // 组件配置
+  itemConfigs: {
+
+  },
+  props: {
+    inline: Boolean,
+    routeKey: [String, Number],
+    routes: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      headerTitle: null,
+      pageParams: {},
+      model: {}, // 组件全局data
+      pageEvents: {},
+      searchScopeParams: []
+    }
+  },
+  computed: {
+    ...mapState({
+      showMenu: state => state.config.showMenu,
+      showAppNav: state => state.config.showAppNav
+    }),
+    pageTitle () {
+      return this.headerTitle || (this.page && this.page.title) || (this.meta && this.meta.name)
+    },
+    components () {
+      // items  itemConfigs
+      const { items = [], mItems } = this.$component
+      let list
+      if (this.mobileDashboard) {
+        list = items.filter(item => !item.mobileHidden)
+      } else if (this.$isMobile) {
+        if (mItems && mItems.length) {
+          const pcIndex = indexDashboardItems(items)
+          list = mItems.filter(c => !c.mobileHidden && pcIndex.has(String(c.id))).map(c => resolveMobileItem(c, pcIndex))
+        } else {
+          const { mobileAutoStack = true } = this.$configs
+          list = mobileAutoStack ? stackMobileLayout(items, 48) : items
+        }
+      } else {
+        list = items
+      }
+      // 布局项必须带 i（设计器与旧配置都以 id 为准），运行时用 id 兜底补齐
+      list.forEach(item => {
+        if (item && item.i == null && item.id != null) item.i = item.id
+      })
+      return list
+    },
+    theme () {
+      const { theme } = this.$configs
+      return theme
+    },
+    // Widget 原本没有移动端收紧间距的分支（与页面版 Dashboard 不同），按「旧配置像素一致」保留原语义，覆盖 pageGridMixin 的 gridParams
+    gridParams () {
+      const grid = getPageGrid(this.$configs)
+      return this.mobileDashboard ? { ...grid, gap: [8, 8], padding: null } : grid
+    },
+    colAttribute () {
+      return (component = {}) => {
+        const { xsspan = 24, ...other } = component
+        const colAttribute = {
+          ...other,
+          xs: {
+            span: xsspan
+          }
+        }
+        delete colAttribute.id
+        delete colAttribute.style
+        delete colAttribute.title
+        return colAttribute
+      }
+    },
+    pageStyle () {
+      const { layout = 'grid', direction = 'row', justify = 'flex-start', align = 'top' } = this.$configs
+      if (layout === 'flex') {
+        return { display: 'flex', 'flex-direction': direction, 'justify-content': justify, 'align-items': align }
+      } else {
+        return { }
+      }
+    },
+    componentStyle () {
+      return component => {
+        const { layout } = this.$configs
+        const { flex } = component
+        const compoentStyle = { }
+        if (layout === 'flex' && flex) {
+          compoentStyle.flex = 1
+        }
+        return compoentStyle
+      }
+    },
+    scopeParams () {
+      const { globalScopeParams: configScopeParams = [] } = this.$configs
+      const { scopeParams: queryScopeParams = [] } = this.$configs
+
+      // 格式化scopeParams
+      const _scopeParams = this.$_.cloneDeep([...configScopeParams, ...queryScopeParams, ...this.searchScopeParams])
+      const that = this
+      for (const scopeKey in _scopeParams) {
+        const scope = _scopeParams[scopeKey]
+        if (!scope) continue
+        let values = scope.values
+        if (/\$\[(.+)\]/.test(values)) {
+          values = values.replace(/\$\[(.+)\]/, (match, key) => {
+            try {
+              return evalWith(`that.${key}`, { that }) || evalWith(`that.$query.${key}`, { that }) || evalWith(`that.$tab.${key}`, { that }) || ''
+            } catch (error) {
+              return scope.values
+            }
+          })
+        }
+        if (/#\{(.+)\}/.test(values)) {
+          values = values.replace(/#\{(.+)\}/, (match, key) => {
+            try {
+              return evalWith(`that.$query.${key}`, { that }) || evalWith(`that.$tab.${key}`, { that }) || ''
+            } catch (error) {
+              return scope.values
+            }
+          })
+        }
+        scope.values = values
+      }
+      return _scopeParams
+    }
+  },
+  watch: {
+    pageTitle: {
+      handler (v) {
+        this.$emit('change-route', this.routeKey, { title: v })
+      },
+      immediate: true
+    },
+    scopeParams: {
+      deep: true,
+      handler (v) {
+        this.pageParams.scopeParams = v
+      },
+      immediate: true
+    }
+  },
+  provide () {
+    // 容器内网格的门控策略 / 配置是否旧版都跟随本组件（provide 只跑一次，用函数延迟读）
+    const gridProvide = {
+      getMobileDashboard: () => this.mobileDashboard,
+      getDashboardLoadWay: () => this.loadWay,
+      getDashboardLegacy: () => isLegacyConfig(this.$configs)
+    }
+    if (this.isPage) {
+      return {
+        ...gridProvide,
+        upPage: this,
+        pageId: this.page ? this.page.pageId : '', // 当前页面id
+        pageMetaId: this.isPage ? (this.$metaId || (this.page ? this.page.metaId : '')) : null // 当前页面对象id
+      }
+    }
+    return gridProvide // T28：Vue3 provide 合并不容忍 undefined
+  },
+  methods: {
+    $refesh () {
+      refesh.apply(this)
+      // if (this.upPage) this.upPage.$refesh()
+    },
+    openFullScreen () {
+      if (this.$refs.dashboard.requestFullscreen) {
+        this.$refs.dashboard.requestFullscreen()
+      }
+    },
+    search (v) {
+      this.searchScopeParams = v
+    }
+  },
+  created () {
+    // 这里原本存了 showAppNav/showMenu 用于卸载时「还原」，已删除，理由见 beforeUnmount 的注释。
+    // 行高 / 间距按视口等比（旧 autoHeight）时才需要跟随窗口尺寸
+    const grid = this.gridParams
+    if (grid.rowHeight === 'auto' || grid.gap === 'auto') {
+      window.addEventListener('resize', this.updateBodyHeight)
+    }
+  },
+  beforeUnmount () {
+    // 这里原来无条件写两个**全局** UI 状态（SWITCH_MENU_SHOW / SWITCH_APP_NAV_SHOW），已删除。三个理由：
+    // ① **没有对应的「获取」**：整个 packages/dashboard 里没有任何地方隐藏菜单或应用导航
+    //    （openFullScreen 走的是浏览器原生 requestFullscreen，与这两个状态无关）。
+    //    只还原、从不获取，等于凭空覆盖别人的状态。
+    // ② **存的值是反的**：created 里 `defaultShowMenu = this.showAppNav`、
+    //    `defaultShowAppNav = this.showMenu`，两者交叉，还原时把 appNav 的旧值写进 menu、反之亦然。
+    // ③ **卸载不等于「用户离开了本页」**：标签是 v-for + v-show 全挂载，关掉一个**后台**标签、
+    //    或标签数超过 MOUNTED_TAB_MAX 被 LRU 淘汰内容，都会走到这里 ——
+    //    于是「关掉一个大屏标签，把另一个正在看的标签的菜单弹了出来」。
+    // 这段代码此前从未执行过（keep-alive 的页从不真卸载），M0 改成真卸载后才被唤醒，故一并清理。
+    window.removeEventListener('resize', this.updateBodyHeight)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dashboard {
+  width: 100%;
+  height:  100%;
+  overflow: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .base-page {
+    position: static;
+    overflow-x:  hidden;
+    padding: 0;
+  }
+}
+.dashboard--hidden-scroll-bar {
+  .dashboard-container {
+    &::-webkit-scrollbar-thumb {
+      background: none;
+      &:hover {
+        background-color: rgba(95, 95, 95, .3);
+      }
+    }
+  }
+}
+.dashboard-container {
+  width: 100%;
+  flex: 1;
+  overflow: auto;
+}
+.dashboard-component {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+.dashboard--dark {
+  .dashboard-container{
+    background: #151C3D;
+    .dashboard-component {
+      >div {
+        // background: rgba(255,255,255, .1)
+      }
+    }
+  }
+}
+.dashboard--technology {
+  .dashboard-container{
+    background: url('@/assets/images/dashboard/technology_bg.jpg') no-repeat center;
+    background-size: cover;
+
+  }
+   .component {
+      // position: relative;
+      // &::before {
+      //   content: '';
+      //   position: absolute;
+      //   top: 0;
+      //   display: block;
+      //   width: 100%;
+      //   height: 1px;
+      //   background: linear-gradient(90deg, rgba(45, 164, 247, 0) 0%, #2DA4F7 50%, rgba(45, 164, 247, 0) 100%);
+      //   opacity: 0.5;
+      // }
+      // &::after {
+      //   content: '';
+      //   position: absolute;
+      //   bottom: 0;
+      //   display: block;
+      //   width: 100%;
+      //   height: 1px;
+      //   background: linear-gradient(90deg, rgba(45, 164, 247, 0) 0%, #2DA4F7 50%, rgba(45, 164, 247, 0) 100%);
+      //   opacity: 0.5;
+      // }
+      // background: rgba(255,255,255, .1);
+      //   backdrop-filter: blur(4px);
+      // >div {
+      //   background: rgba(255,255,255, .1);
+      //   backdrop-filter: blur(4px);
+      // }
+    }
+}
+</style>

package/src/chart-request-scope.js

@@ -0,0 +1,22 @@
+import { markRaw } from 'vue'
+import { createChartRequestBroker } from '@epxing/utils/src/chart-request-broker'
+
+export default {
+  inject: { getParentChartRequestBroker: { from: 'getChartRequestBroker', default: null } },
+  data () { return { ownedChartRequestBroker: null } },
+  provide () { return { getChartRequestBroker: () => this.resolveChartRequestBroker() } },
+  watch: {
+    '$route.query.pageId' () {
+      this.ownedChartRequestBroker?.dispose()
+      this.ownedChartRequestBroker = null
+    }
+  },
+  methods: {
+    resolveChartRequestBroker () {
+      if (this.getParentChartRequestBroker) return this.getParentChartRequestBroker()
+      if (!this.ownedChartRequestBroker) this.ownedChartRequestBroker = markRaw(createChartRequestBroker())
+      return this.ownedChartRequestBroker
+    }
+  },
+  beforeUnmount () { this.ownedChartRequestBroker?.dispose() }
+}

package/src/design-target.js

@@ -0,0 +1,55 @@
+import { stackMobileLayout } from './layout-util'
+
+export const DEFAULT_DASHBOARD_THEME = 'light'
+
+// 主要设计端独立于菜单 TERMINAL 和设备检测；旧看板默认 PC。
+export function getDashboardDesignTarget (config = {}) {
+  return config.designTarget === 'mobile' ? 'mobile' : 'pc'
+}
+
+export function createDashboardConfig (config = {}, target = 'pc') {
+  const configuredColNum = Number(config.grid?.colNum)
+  const colNum = Number.isInteger(configuredColNum) && configuredColNum > 0 ? configuredColNum : ((config.items || []).length ? 48 : 24)
+  const out = {
+    ...config,
+    grid: { ...config.grid, colNum },
+    theme: config.theme || DEFAULT_DASHBOARD_THEME,
+    designTarget: getDashboardDesignTarget({ designTarget: target }),
+    ...(target === 'mobile' ? { mobileCanvasWidth: 375, autoHeight: false, grid: { ...config.grid, colNum, rowHeight: 10, gap: [8, 8], padding: null } } : {})
+  }
+  if (target === 'mobile') {
+    delete out.mItems
+    const mobileItems = items => {
+      const list = JSON.parse(JSON.stringify(items || []))
+      for (const item of list) {
+        if (item.contentType === 'dashboard-tabs') {
+          item.mobileExpand = false
+          for (const tab of (item.items || [])) tab.items = mobileItems(tab.items)
+        } else if (item.contentType === 'dashboard-div') {
+          item.mobileExpand = false
+          item.items = mobileItems(item.items)
+        }
+      }
+      return stackMobileLayout(list, colNum, { keepStyle: true })
+    }
+    out.items = mobileItems(config.items)
+  }
+  return out
+}
+
+export function removeDashboardItem (items, id, configs) {
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i]
+    if (String(item.id) === String(id)) {
+      const clear = node => {
+        delete configs[node.id]
+        for (const child of (node.items || [])) clear(child)
+      }
+      clear(item)
+      items.splice(i, 1)
+      return true
+    }
+    if (item.items && removeDashboardItem(item.items, id, configs)) return true
+  }
+  return false
+}

package/src/grid/compact.js

@@ -0,0 +1,81 @@
+// 看板布局压紧（compact）：移植自 vue-grid-layout 系的 grid-layout-plus 1.1.1（`src/helpers/common.ts`，
+// MIT License，Copyright (c) 2023-present qmhc；算法上溯 react-grid-layout，同为 MIT）的 compact / compactItem /
+// sortLayoutItemsByRowCol / getStatics / getFirstCollision / collides。旧运行态由布局库在 mounted 后就地 compact（空隙上移、重叠推下），新实现在渲染前用
+// 同一算法算出一份坐标副本，保证旧页面配置的位置与现状一致。
+// 与原版的差异：纯函数、不改入参——返回新数组，每项是 { ...item, x, y, w, h }（数值化）的副本；
+// static（锁定）项固定不动、其它项绕开它；float（悬浮）项不参与碰撞、坐标原样；空项（null）跳过。
+
+// 两项是否重叠（同一项不算）
+export function collides (l1, l2) {
+  if (l1 === l2) return false
+  if (l1.x + l1.w <= l2.x) return false
+  if (l1.x >= l2.x + l2.w) return false
+  if (l1.y + l1.h <= l2.y) return false
+  if (l1.y >= l2.y + l2.h) return false
+  return true
+}
+
+// layout 里第一个与 item 重叠的项
+export function getFirstCollision (layout, item) {
+  for (let i = 0, len = layout.length; i < len; i++) {
+    if (collides(layout[i], item)) return layout[i]
+  }
+}
+
+// 按行、列排序（先 y 后 x），压紧按这个顺序逐项进行
+export function sortLayoutItemsByRowCol (layout) {
+  return Array.from(layout).sort((a, b) => {
+    if (a.y === b.y && a.x === b.x) return 0
+    if (a.y > b.y || (a.y === b.y && a.x > b.x)) return 1
+    return -1
+  })
+}
+
+// 单项压紧：先尽量上移到不碰撞为止，再被碰撞项往下推（就地改 item.y，item 已是副本）
+export function compactItem (compareWith, item, verticalCompact = true) {
+  if (verticalCompact) {
+    while (item.y > 0 && !getFirstCollision(compareWith, item)) item.y--
+  }
+  let collision
+  while ((collision = getFirstCollision(compareWith, item))) item.y = collision.y + collision.h
+  return item
+}
+
+// 副本 + x/y/w/h 数值化（与 itemRect 的兜底一致：坐标缺省 0、宽高最小 1）
+function cloneItem (item) {
+  return {
+    ...item,
+    x: Number(item.x) || 0,
+    y: Number(item.y) || 0,
+    w: Math.max(1, Number(item.w) || 1),
+    h: Math.max(1, Number(item.h) || 1)
+  }
+}
+
+export function compact (layout, verticalCompact = true) {
+  const source = Array.isArray(layout) ? layout.filter(Boolean) : []
+  const out = new Array(source.length)
+  const indexOf = new Map()
+  const flow = []
+  source.forEach((item, idx) => {
+    const copy = cloneItem(item)
+    // 悬浮项不参与碰撞，坐标原样
+    if (copy.float) {
+      out[idx] = copy
+      return
+    }
+    indexOf.set(copy, idx)
+    flow.push(copy)
+  })
+  // 锁定项一开始就在比较集里，其它项绕开它们
+  const compareWith = flow.filter(item => item.static)
+  for (const item of sortLayoutItemsByRowCol(flow)) {
+    if (!item.static) {
+      compactItem(compareWith, item, verticalCompact)
+      // 只与排在前面的项碰撞；锁定项已在集合里
+      compareWith.push(item)
+    }
+    out[indexOf.get(item)] = item
+  }
+  return out
+}

package/src/grid/compat/GridItem.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="vgl-item vgl-item--static" :style="style"><slot></slot></div>
+</template>
+
+<script>
+// 垫片：只读 <grid-item>，位置由父 GridLayout 提供的几何参数算出；`.vgl-item` 类名来自已移除的 grid-layout-plus 1.1.1（见 GridLayout.vue）
+import { itemRect, rectStyle } from '../geometry'
+
+export default {
+  // 组件 name 走仓库命名规范（epx- 前缀）；全局注册名仍用 'GridItem'（见 index.js）
+  name: 'epx-grid-compat-grid-item',
+  inheritAttrs: false,
+  props: {
+    x: { type: Number, default: 0 },
+    y: { type: Number, default: 0 },
+    w: { type: Number, default: 1 },
+    h: { type: Number, default: 1 },
+    i: { type: [String, Number], default: '' }
+  },
+  inject: { epxCompatGrid: { default: null } },
+  computed: {
+    style () {
+      if (!this.epxCompatGrid) return undefined
+      // 坐标优先取父 GridLayout 压紧后的映射（按 i），layout 里没有本项时回落自身 props
+      const pos = this.epxCompatGrid.positions[String(this.i)] || { x: this.x, y: this.y, w: this.w, h: this.h }
+      return { position: 'absolute', ...rectStyle(itemRect(pos, this.epxCompatGrid.resolved)) }
+    }
+  }
+}
+</script>

package/src/grid/compat/GridLayout.vue

@@ -0,0 +1,76 @@
+<template>
+  <div ref="root" class="vgl-layout epx-dashboard-grid-compat" :style="{ height: height + 'px' }"><slot></slot></div>
+</template>
+
+<script>
+// 垫片：给复刻过 Dashboard 模板的产品子类用的只读 <grid-layout>。
+// 接受 vue-grid-layout 时代的 props，只做定位；拖拽 / 缩放类 props 收下但忽略（inheritAttrs:false 不落 DOM）。
+// `.vgl-layout` / `.vgl-item` 沿用已移除的 grid-layout-plus 1.1.1 的 class 名：产品仓复刻模板的样式按这些类写，依赖删了、类名保留。
+import { resolveGrid, layoutHeight } from '../geometry'
+import { compact } from '../compact'
+
+export default {
+  // 组件 name 走仓库命名规范（epx- 前缀）；全局注册名仍用 'GridLayout'（见 index.js），
+  // 保证旧模板里直接写的 <grid-layout> 标签能解析到——标签解析走注册名，不走这里的 name
+  name: 'epx-grid-compat-grid-layout',
+  inheritAttrs: false,
+  props: {
+    layout: { type: Array, default: () => [] },
+    colNum: { type: Number, default: 12 },
+    rowHeight: { type: Number, default: 150 },
+    margin: { type: Array, default: () => [10, 10] },
+    // 显式宽度（测试 / 无 ResizeObserver 环境）；缺省由 ResizeObserver 测量
+    width: { type: Number, default: 0 }
+  },
+  provide () {
+    return { epxCompatGrid: this }
+  },
+  data () {
+    return { measuredWidth: 0 }
+  },
+  computed: {
+    resolved () {
+      const gap = [Number(this.margin[0]) || 0, Number(this.margin[1]) || 0]
+      return resolveGrid({ colNum: this.colNum, rowHeight: this.rowHeight, gap, padding: null }, { containerWidth: this.width || this.measuredWidth })
+    },
+    // 与旧布局库一致：layout 先 compact（空隙上移、重叠推下），grid-item 按 i 取压紧后的坐标；不写回 layout
+    compacted () {
+      return compact(this.layout)
+    },
+    // i（缺省用 id）→ 压紧后的项，供子 grid-item 取坐标；键统一转字符串，避免数字 / 字符串 id 不等
+    positions () {
+      const map = {}
+      for (const item of this.compacted) {
+        const key = item.i != null ? item.i : item.id
+        if (key != null) map[String(key)] = item
+      }
+      return map
+    },
+    height () {
+      return layoutHeight(this.compacted, this.resolved)
+    }
+  },
+  methods: {
+    measure () {
+      if (this.$refs.root) this.measuredWidth = this.$refs.root.offsetWidth
+    }
+  },
+  mounted () {
+    if (this.width) return
+    this.measure()
+    if (typeof ResizeObserver !== 'undefined') {
+      this.resizeObserver = new ResizeObserver(() => this.measure())
+      this.resizeObserver.observe(this.$refs.root)
+    }
+  },
+  beforeUnmount () {
+    if (this.resizeObserver) this.resizeObserver.disconnect()
+  }
+}
+</script>
+
+<style>
+.vgl-layout.epx-dashboard-grid-compat { position: relative; width: 100%; }
+/* 旧库的 grid-item 自带 box-sizing: border-box，复刻模板给 grid-item 加 border / padding 时盒子不撑大 */
+.vgl-layout.epx-dashboard-grid-compat .vgl-item { box-sizing: border-box; }
+</style>

package/src/grid/designState.js

@@ -0,0 +1,17 @@
+// 设计态共享状态：当前选中项（跨页面级画布与容器内网格），由 DashboardDesign / DashboardMobile 创建并 provide('epxDashboardDesign')。
+// owner 标记选中项属于哪一层（'page' / 容器 id 等），由调用方约定；只存引用、不复制项。
+import { reactive } from 'vue'
+
+export function createDesignState () {
+  const state = reactive({ activeId: null, activeItem: null, activeOwner: null })
+  return {
+    state,
+    select (item, owner) {
+      state.activeId = item ? item.id : null
+      state.activeItem = item || null
+      state.activeOwner = owner || null
+    },
+    clear () { this.select(null, null) },
+    isActive (item) { return !!item && state.activeId === item.id }
+  }
+}

package/src/grid/engines.js

@@ -0,0 +1,22 @@
+// 设计态 gridstack 自定义引擎。GridStackEngine 是纯布局算法（无 DOM），只覆写碰撞相关的三个方法：
+// _fixCollisions 先试 swap（同尺寸且相邻时交换）再走 push；collide / collideAll 是全部碰撞检测的入口。
+// 接入方式（实例选项 engineClass 或 GridStack.registerEngine）由 Task 3 决定，本文件只定义子类。
+import { GridStackEngine } from 'gridstack'
+
+// 悬浮层：不做任何碰撞检测 → 项可自由叠放，拖动经过别的项对方也不动
+export class NoCollideEngine extends GridStackEngine {
+  collide () { return undefined }
+  collideAll () { return [] }
+  // 基类在有 maxRow 时会用「基类引擎」克隆一份模拟移动（碰撞检测随之回来：覆盖过半的项被推挤、不足半的移动被拒），
+  // 无碰撞时不存在「推挤后超出 maxRow」的情形，直接走基类无 maxRow 的简单路径：moveNode 里的 nodeBoundFix 把节点夹在 maxRow 内即可
+  moveNodeCheck (node, o) {
+    if (!this.changedPosConstrain(node, o)) return false
+    o.pack = true
+    return this.moveNode(node, o)
+  }
+}
+
+// 碰撞层：与旧库（vue-grid-layout）一致「一律 push」，禁用 gridstack 的同尺寸 swap
+export class PushOnlyEngine extends GridStackEngine {
+  swap () { return false }
+}