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

package/package.json

@@ -1,6 +1,88 @@
 {
   "name": "@epxing/dashboard",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "5.3.0-beta.1",
+  "description": "看板运行态渲染",
+  "type": "module",
+  "main": "./dist/src/index.js",
+  "module": "./dist/src/index.js",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/src/index.js",
+      "default": "./dist/src/index.js"
+    },
+    "./src": "./dist/src/index.js",
+    "./tabs": {
+      "types": "./types/tabs.d.ts",
+      "import": "./dist/src/Tabs.js",
+      "default": "./dist/src/Tabs.js"
+    },
+    "./title": {
+      "types": "./types/title.d.ts",
+      "import": "./dist/src/Title.js",
+      "default": "./dist/src/Title.js"
+    },
+    "./div": {
+      "types": "./types/div.d.ts",
+      "import": "./dist/src/Div.js",
+      "default": "./dist/src/Div.js"
+    },
+    "./widget": {
+      "types": "./types/widget.d.ts",
+      "import": "./dist/src/Widget.js",
+      "default": "./dist/src/Widget.js"
+    },
+    "./src/*.css": "./src/*.css",
+    "./src/*.scss": "./src/*.scss",
+    "./src/*.png": "./src/*.png",
+    "./src/*.svg": "./src/*.svg",
+    "./src/*.jpg": "./src/*.jpg",
+    "./src/*.gif": "./src/*.gif",
+    "./src/*.woff": "./src/*.woff",
+    "./src/*.woff2": "./src/*.woff2",
+    "./src/*.ttf": "./src/*.ttf",
+    "./src/*.js": "./dist/src/*.js",
+    "./src/*.jsx": "./dist/src/*.js",
+    "./src/*.vue": "./dist/src/*.js",
+    "./src/*": "./dist/src/*.js",
+    "./style.css": "./dist/style.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "types",
+    "API.md"
+  ],
+  "dependencies": {
+    "gridstack": "13.3.0",
+    "@epxing/core": "^5.3.0-beta.1",
+    "@epxing/utils": "^5.3.0-beta.1",
+    "@epxing/components": "^5.3.0-beta.1",
+    "@epxing/theme": "^5.3.0-beta.1"
+  },
+  "peerDependencies": {
+    "vue": "3.5.39",
+    "vuex": "4.1.0",
+    "element-plus": "2.14.3"
+  },
+  "types": "./types/index.d.ts",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss",
+    "**/*.vue",
+    "./dist/src/app.js",
+    "./dist/src/plugins/**",
+    "./dist/src/store/**",
+    "./dist/src/mixins/**",
+    "./dist/src/runtime-utils/util.js",
+    "./dist/src/runtime-services.js"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "cd ../.. && cross-env PKG=dashboard vite build -c build/vite.pkg.config.mjs"
+  }
 }

package/src/Dashboard.vue

@@ -0,0 +1,459 @@
+<template>
+  <div :class="['epx-dashboard', 'epx-dashboard-'+ this.$component.id, 'epx-dashboard--'+ theme, { 'epx-dashboard--hidden-scroll-bar': $configs.scrollBarHidden, 'is-mobile-preview': mobileDashboard }]" :style="$component.style" ref="container">
+    <epx-dashboard-header @fullscreen="openFullScreen" :title="$component.title" :scopeFlag="$configs.scopeFlag" :globalSearchFields="$configs.globalSearchFields" :searchDefaultFlag="$configs.searchDefaultFlag" @search="search"></epx-dashboard-header>
+    <div ref="dashboard" class="epx-dashboard__container" :style="dashboardStyle" :class="{ 'epx-dashboard__container--mobile': mobileDashboard }">
+      <epx-dashboard-grid
+        :items="components"
+        :grid="gridParams"
+        :load-way="loadWay"
+        :body-height="bodyHeight">
+        <template #item="{ item: component }">
+          <!-- 渲染组件 -->
+          <div v-if="component.contentType" class="epx-dashboard__component-container">
+            <epx-component v-bind="isPage? $forwardAttrs($attrs): {}" class="epx-dashboard__component"
+              :name="component.contentType"
+              is-dashboard
+              :content-type="component.contentType"
+              :comp-id="component.id"
+              :comp-title="component.title"
+              :items="component.items"
+              :itemConfigs="$component.itemConfigs"
+              :comp-style="mobileComponentStyle(component)"
+              :comp-configs="component.configs"
+              :comp-grid="containerGrid(component)"
+              :chart-cache="$configs.chartCache"
+              :theme="themeMode"
+              :mobile-appearance="mobileRendering ? component.mobileAppearance : undefined"
+              :themeChartConfig="themeChartConfig">
+            </epx-component>
+          </div>
+        </template>
+      </epx-dashboard-grid>
+    </div>
+  </div>
+</template>
+
+<script>
+import DashboardHeader from './Header'
+import DashboardGrid from './DashboardGrid.vue'
+import chartRequestScope from './chart-request-scope'
+import component from '@epxing/core/src/mixins/component'
+import { pageGridMixin } from './grid/mixins'
+import { buildThemeCss, buildThemeChartConfig } from './theme-style'
+import { stackMobileLayout } from './layout-util'
+import { indexDashboardItems, resolveMobileItem } from './mobile-design'
+import { 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',
+  mixins: [component, pageGridMixin, chartRequestScope],
+  components: {
+    [DashboardHeader.name]: DashboardHeader,
+    [DashboardGrid.name]: DashboardGrid
+  },
+  $componentType: 'page', // 组件类型: 页面
+  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: [],
+      themeMode: null,
+      themeStyles: {}
+    }
+  },
+  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) {
+        // 移动端：优先用单独配置的 mItems（过滤掉标记 mobileHidden 的项）；没配则按 PC 布局自动单列堆叠
+        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
+    },
+    // 移动端组件样式：以 PC 组件 style 为基础，叠加 mItems 项里设置的移动端覆盖（空值/未设的键沿用 PC）
+    mobileComponentStyle () {
+      return component => {
+        if (!this.$isMobile || this.mobileDashboard) return component.style
+        const pcItem = indexDashboardItems(this.$component.items || []).get(String(component.id)) || {}
+        const override = {}
+        const cur = component.style || {}
+        for (const k in cur) {
+          if (cur[k] !== undefined && cur[k] !== null && cur[k] !== '') override[k] = cur[k]
+        }
+        return { ...(pcItem.style || {}), ...override }
+      }
+    },
+    theme () {
+      const { theme } = this.$configs
+      return theme
+    },
+    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 { }
+      }
+    },
+    dashboardStyle () {
+      const { backgroundColor, backgroundImage } = this.$configs
+      return {
+        ...(this.mobileDashboard ? { width: '100%', maxWidth: `${Number(this.$configs.mobileCanvasWidth) || 375}px`, margin: '0 auto', flex: 'none' } : {}),
+        backgroundColor,
+        backgroundImage: backgroundImage ? `url(${this.$util.getFileUrl(backgroundImage)})` : null
+      }
+    },
+    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.$query
+
+      // 格式化scopeParams
+      const _scopeParams = this.$_.cloneDeep([...configScopeParams, ...queryScopeParams, ...this.searchScopeParams])
+      return this.$formatScope(_scopeParams)
+    },
+    themeChartConfig () {
+      return buildThemeChartConfig(this.themeStyles, this.mobileRendering)
+    }
+  },
+  watch: {
+    pageTitle: {
+      handler (v) {
+        this.$emit('change-route', this.routeKey, { title: v })
+      },
+      immediate: true
+    },
+    scopeParams: {
+      deep: true,
+      handler (v) {
+        if (!this.$_.isEqual(this.oldParams, v)) {
+          this.pageParams.scopeParams = v
+        }
+        this.oldParams = v
+      },
+      immediate: true
+    }
+  },
+  provide () {
+    // 主题图表配置（系列色板等）用函数式 provide 下发，跨任意容器层（dashboard-div/tabs）注入到图表组件，且保持响应式
+    // 恒定返回对象（不再区分 isPage 分支返回 undefined）：顺带满足 T28 的「Vue3 provide 合并不容忍 undefined」
+    const provideData = {
+      getMobileDashboard: () => this.mobileDashboard,
+      getThemeChartConfig: () => this.themeChartConfig,
+      // 容器内网格的门控策略 / 配置是否旧版都跟随页面（provide 只跑一次，用函数延迟读）
+      getDashboardLoadWay: () => this.loadWay,
+      getDashboardLegacy: () => isLegacyConfig(this.$configs)
+    }
+    if (this.isPage) {
+      provideData.upPage = this
+      provideData.pageId = this.page ? this.page.pageId : '' // 当前页面id
+      provideData.pageMetaId = this.isPage ? (this.$metaId || (this.page ? this.page.metaId : '')) : null // 当前页面对象id
+    }
+    return provideData
+  },
+  methods: {
+    getTheme () {
+      // 未选主题时直接跳过查询：scope.CODE 为空会命中 FM_CHART_THEME 全部记录，
+      // 后端按单条返回会报「存在多条结果数据」，抛出后 setThemeStyle 中断，
+      // 连页面自身配置的 themeStyles 都编译不出来（主题样式整体不生效）
+      if (!this.theme) return Promise.resolve({})
+      return this.$http.find({
+        entityId: 'FM_CHART_THEME',
+        'scope.CODE': this.theme
+      })
+        .then(data => {
+          if (data && data.data.CONTENT) {
+            this.themeMode = data.data.STYLE
+            return JSON.parse(data?.data.CONTENT)
+          }
+          return {}
+        })
+    },
+    async setThemeStyle () {
+      // 获取主题对应的样式
+      const { themeStyles: configThemeStyles = {} } = this.$configs
+      const activeThemeStyles = await this.getTheme()
+      const allThemeStyles = this.$_.assignWith(configThemeStyles, activeThemeStyles, (configThemeItem, themeItem) => {
+        // 仅对对象做分区合并，customCss 等字符串值直接取优先级高的一方
+        return configThemeItem && themeItem && typeof configThemeItem === 'object' && typeof themeItem === 'object'
+          ? { ...themeItem, ...configThemeItem }
+          : configThemeItem || themeItem
+      })
+      this.themeStyles = allThemeStyles
+      const styles = buildThemeCss(allThemeStyles, `.epx-dashboard-${this.$component.id}`, path => this.$util.getFileUrl(path), { mobilePreview: this.mobileDashboard })
+      let styleElement = document.head.querySelector(`#dashboard-${this.$component.id}`)
+      if (!styleElement) {
+        styleElement = document.createElement('style')
+        styleElement.id = `dashboard-${this.$component.id}`
+        styleElement.type = 'text/css'
+        styleElement.textContent = styles
+        document.head.appendChild(styleElement)
+      } else {
+        styleElement.textContent = styles
+      }
+    },
+    removeThemeStyle () {
+      const styleElement = document.head.querySelector(`#dashboard-${this.$component.id}`)
+      styleElement?.remove()
+    },
+    // reloadPage 会经 RouterView 以新 key 重建整个页面实例，滚动位置无法在此恢复（旧实例的 $refs 已失效）
+    $refesh () {
+      refesh.apply(this)
+      if (this.upPage) this.upPage.$refesh()
+      this.reloadPage()
+    },
+    enableAutoReload () {
+      if (this.refreshInterval) {
+        clearInterval(this.refreshInterval)
+      }
+      this.refreshInterval = setInterval(() => {
+        refesh.apply(this)
+      }, (this.$configs.refreshInterval || 60) * 1000)
+    },
+    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.padding === 'auto') {
+      window.addEventListener('resize', this.updateBodyHeight)
+    }
+    if (this.$configs.autoRefresh) {
+      this.enableAutoReload()
+    }
+    this.setThemeStyle()
+  },
+
+  beforeUnmount () {
+    // 与 Widget.vue 同一处问题，已删除两行全局写入。三个理由：
+    // ① 整个 packages/dashboard 没有任何地方隐藏菜单/应用导航（openFullScreen 走原生 requestFullscreen），
+    //    这是**只还原、从不获取**的全局写入；
+    // ② created 里存的值是交叉的（defaultShowMenu 存的是 showAppNav，反之亦然），还原本身就是错的；
+    // ③ 标签是 v-for + v-show 全挂载，关**后台**标签或 LRU 淘汰内容都会走到这里 ——
+    //    表现为「关掉一个大屏标签，把另一个正在看的标签的菜单弹了出来」。
+    // 这段此前从未执行（keep-alive 的页不真卸载），M0 改成真卸载后才被唤醒。
+    window.removeEventListener('resize', this.updateBodyHeight)
+    this.removeThemeStyle()
+    // 清理自动刷新定时器
+    if (this.refreshInterval) {
+      clearInterval(this.refreshInterval)
+      this.refreshInterval = null
+    }
+  }
+}
+</script>
+<style lang="scss">
+@include b(dashboard) {
+  width: 100%;
+  height:  100%;
+  overflow: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  @include m(hidden-scroll-bar) {
+    @include e(container) {
+       &::-webkit-scrollbar-thumb {
+        background: none;
+        &:hover {
+          background-color: rgba(95, 95, 95, .3);
+        }
+      }
+    }
+  }
+  @include e(container) {
+    // background: #f0f2f6;
+    width: 100%;
+    flex: 1;
+    overflow: auto;
+  }
+  @include e(component-container) {
+    width: 100%;
+    height: 100%;
+    // 不裁剪子组件的 box-shadow：阴影渲染进栅格间距；滚动下移到 __component 自身
+    overflow: visible;
+  }
+  @include e(component) {
+    height: 100%;
+    // 自身内容溢出仍可滚动；元素自身的 box-shadow 不受自身 overflow 裁剪
+    overflow: auto;
+  }
+  .epx-card-num__title {
+    color: inher
+  }
+}
+// 移动端专属缩放：收紧卡片内边距、缩小标题与数字字号，让密集看板在小屏更耐看
+@media only screen and (max-width: 992px) {
+  @include b(dashboard) {
+    .epx-card-num {
+      padding: 12px;
+    }
+    .epx-card-num__title {
+      font-size: 13px;
+    }
+    .epx-card-num__num > font {
+      font-size: 22px;
+    }
+    .epx-chart__title {
+      font-size: 14px;
+    }
+    .epx-chart__header {
+      padding: 0 8px;
+    }
+  }
+}
+</style>
+<style lang="scss" scoped>
+
+// .dashboard--hidden-scroll-bar {
+//   .dashboard-container {
+//     &::-webkit-scrollbar-thumb {
+//       background: none;
+//       &:hover {
+//         background-color: rgba(95, 95, 95, .3);
+//       }
+//     }
+//   }
+// }
+// .dashboard-container {
+
+// }
+// .dashboard-component {
+
+// }
+
+// .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>