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

package/API.md

@@ -0,0 +1,79 @@
+# @epxing/dashboard API
+
+看板根容器、分组标签、标题、内容区和挂件组件。
+
+本页对应包版本 `5.3.0-beta.1`。导出名、子路径和签名从当前源码、package.json 与类型声明生成。
+
+## 安装与使用
+
+
+```sh
+pnpm add @epxing/dashboard
+```
+
+
+```js
+import DashboardPlugin, { Dashboard, DashboardWidget } from '@epxing/dashboard'
+import '@epxing/dashboard/style.css'
+
+// app 已初始化 core 和基础组件
+app.use(DashboardPlugin)
+app.component('ProductDashboard', Dashboard)
+```
+
+## 接入约定
+
+default 与具名 Dashboard 是同一根组件；其 install 会注册配套组件、预览和网格兼容组件。布局、请求与保存依赖平台运行环境。Tabs/Title/Div/Widget 稳定子路径均为 default 组件导出。
+
+## 根入口完整导出
+
+| 导出名 | 形态 | 用途 | 参数 / 配置 / 事件 |
+| --- | --- | --- | --- |
+| `default` | 默认导出 | Dashboard 组件，同时具有 install，可用作组件或 app.use 插件。 | [详细参考](../../docs/revision/dashboard/Dashboard.md) |
+| `Dashboard` | Vue 组件 | 看板根容器，组织布局、挂件和看板运行状态。 | [详细参考](../../docs/revision/dashboard/Dashboard.md) |
+| `DashboardTabs` | Vue 组件 | 看板标签页容器，按标签组织看板内容。 | [详细参考](../../docs/revision/dashboard/Tabs.md) |
+| `DashboardTitle` | Vue 组件 | 看板标题组件，展示标题和相关样式。 | [详细参考](../../docs/revision/dashboard/Title.md) |
+| `DashboardDiv` | Vue 组件 | 看板内容容器，承载嵌套内容和布局。 | [详细参考](../../docs/revision/dashboard/Div.md) |
+| `DashboardWidget` | Vue 组件 | 看板挂件容器，负责挂件内容与布局交互。 | [详细参考](../../docs/revision/dashboard/Widget.md) |
+
+## 函数、类与工具对象
+
+签名中的 any 表示现有声明未进一步限定结构；源代码方法签名保留默认参数。异步结果与泛型以声明为准。
+
+## 稳定子路径
+
+下表按实际 package.json 的公开入口列出。default 使用默认导入，其他名称使用具名导入；类型接口用 import type。
+
+| 导入路径 | 完整导出名 | 用途 / 详细说明 |
+| --- | --- | --- |
+| `@epxing/dashboard/tabs` | `default` | 看板标签页容器，按标签组织看板内容。 [详细参考](../../docs/revision/dashboard/Tabs.md) |
+| `@epxing/dashboard/title` | `default` | 看板标题组件，展示标题和相关样式。 [详细参考](../../docs/revision/dashboard/Title.md) |
+| `@epxing/dashboard/div` | `default` | 看板内容容器，承载嵌套内容和布局。 [详细参考](../../docs/revision/dashboard/Div.md) |
+| `@epxing/dashboard/widget` | `default` | 看板挂件容器，负责挂件内容与布局交互。 [详细参考](../../docs/revision/dashboard/Widget.md) |
+| `@epxing/dashboard/style.css` | 样式副作用入口 | 在产品入口引入一次。 |
+
+## 源码兼容与其他入口
+
+/src 路径保留给已有产品和源码级扩展，可能包含平台内部实现；新产品优先采用上方根导出与稳定子路径。通配符表示按实际文件名匹配，不代表所有源码都属于根入口。
+
+| 公开路径模式 | 实际目标 |
+| --- | --- |
+| `@epxing/dashboard/src` | `./dist/src/index.js` |
+| `@epxing/dashboard/src/*.css` | `./src/*.css` |
+| `@epxing/dashboard/src/*.scss` | `./src/*.scss` |
+| `@epxing/dashboard/src/*.png` | `./src/*.png` |
+| `@epxing/dashboard/src/*.svg` | `./src/*.svg` |
+| `@epxing/dashboard/src/*.jpg` | `./src/*.jpg` |
+| `@epxing/dashboard/src/*.gif` | `./src/*.gif` |
+| `@epxing/dashboard/src/*.woff` | `./src/*.woff` |
+| `@epxing/dashboard/src/*.woff2` | `./src/*.woff2` |
+| `@epxing/dashboard/src/*.ttf` | `./src/*.ttf` |
+| `@epxing/dashboard/src/*.js` | `./dist/src/*.js` |
+| `@epxing/dashboard/src/*.jsx` | `./dist/src/*.js` |
+| `@epxing/dashboard/src/*.vue` | `./dist/src/*.js` |
+| `@epxing/dashboard/src/*` | `./dist/src/*.js` |
+| `@epxing/dashboard/package.json` | `./package.json` |
+
+## 文档维护
+
+本页由 build/gen-package-api-docs.mjs 生成。修改公开入口并更新构建产物和类型声明后，在框架根运行 `pnpm docs:api`；`pnpm docs:api:check` 检查清单、类型、包内文档与站点镜像是否同步，同时验证页面编译和文档链接。用途和示例维护在 build/package-api-notes.mjs，组件和源码方法的详细参考位于 docs/revision。

package/README.md

@@ -1,3 +1,41 @@
-# Temporary Holding Version
+# @epxing/dashboard
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[完整公开 API、导入方式与示例](./API.md)
+
+数据看板包 - **可视化看板搭建，拖拽组件组成仪表盘大屏（按需加载）**。
+
+## 范围
+
+- `src/frame/packages/dashboard/`（Dashboard.vue / Widget.vue / Tabs.vue / Div.vue / Header.vue）
+- `src/frame/packages/visual-config-page/Dashboard*.vue`
+- `src/frame/packages/visual-config-page/DashboardDesign.vue`
+- `src/frame/packages/visual-config-page/dashboard-theme-setting/`（Background / Border / Index）
+
+## 依赖
+
+- `@epxing/utils`
+- `@epxing/theme`
+- `@epxing/core`
+- `@epxing/components`
+- echarts / d3（本包独占重依赖）
+
+## 加载策略
+
+`apps/platform` 路由层 `() => import('@epxing/dashboard')` 懒加载。
+
+## 状态
+
+🟡 stub - 实际迁移在 T20。
+
+
+## 独立包公共入口（2026-10-22）
+
+根入口及稳定子路径提供类型声明。先安装 core 与需要的 component，再按需安装本包。
+
+```js
+import plugin from '@epxing/dashboard'
+import '@epxing/dashboard/style.css'
+app.use(plugin)
+```
+
+工作区构建：`pnpm --filter @epxing/dashboard build`。pack/publish 的 prepack 会重建；版本由 Changesets 独立管理。旧 `/src/*` 入口保留。完整初始化、打包与远程共享流程见 docs/build-and-publish.md。

package/dist/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,10 @@
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+export {
+  _export_sfc as default
+};

package/dist/_virtual/preload-helper.js

@@ -0,0 +1,88 @@
+const scriptRel = /* @__PURE__ */ (function detectScriptRel() {
+  const relList = typeof document !== "undefined" && document.createElement("link").relList;
+  return relList && relList.supports && relList.supports("modulepreload") ? "modulepreload" : "preload";
+})();
+const assetsURL = function(dep, importerUrl) {
+  return new URL(dep, importerUrl).href;
+};
+const seen = {};
+const __vitePreload = function preload(baseModule, deps, importerUrl) {
+  let promise = Promise.resolve();
+  if (deps && deps.length > 0) {
+    let allSettled2 = function(promises) {
+      return Promise.all(
+        promises.map(
+          (p) => Promise.resolve(p).then(
+            (value) => ({ status: "fulfilled", value }),
+            (reason) => ({ status: "rejected", reason })
+          )
+        )
+      );
+    };
+    const links = document.getElementsByTagName("link");
+    const cspNonceMeta = document.querySelector(
+      "meta[property=csp-nonce]"
+    );
+    const cspNonce = (cspNonceMeta == null ? void 0 : cspNonceMeta.nonce) || (cspNonceMeta == null ? void 0 : cspNonceMeta.getAttribute("nonce"));
+    promise = allSettled2(
+      deps.map((dep) => {
+        dep = assetsURL(dep, importerUrl);
+        if (dep in seen) return;
+        seen[dep] = true;
+        const isCss = dep.endsWith(".css");
+        const cssSelector = isCss ? '[rel="stylesheet"]' : "";
+        const isBaseRelative = !!importerUrl;
+        if (isBaseRelative) {
+          for (let i = links.length - 1; i >= 0; i--) {
+            const link2 = links[i];
+            if (link2.href === dep && (!isCss || link2.rel === "stylesheet")) {
+              return;
+            }
+          }
+        } else if (document.querySelector(`link[href="${dep}"]${cssSelector}`)) {
+          return;
+        }
+        const link = document.createElement("link");
+        link.rel = isCss ? "stylesheet" : scriptRel;
+        if (!isCss) {
+          link.as = "script";
+        }
+        link.crossOrigin = "";
+        link.href = dep;
+        if (cspNonce) {
+          link.setAttribute("nonce", cspNonce);
+        }
+        document.head.appendChild(link);
+        if (isCss) {
+          return new Promise((res, rej) => {
+            link.addEventListener("load", res);
+            link.addEventListener(
+              "error",
+              () => rej(new Error(`Unable to preload CSS for ${dep}`))
+            );
+          });
+        }
+      })
+    );
+  }
+  function handlePreloadError(err) {
+    const e = new Event("vite:preloadError", {
+      cancelable: true
+    });
+    e.payload = err;
+    window.dispatchEvent(e);
+    if (!e.defaultPrevented) {
+      throw err;
+    }
+  }
+  return promise.then((res) => {
+    for (const item of res || []) {
+      if (item.status !== "rejected") continue;
+      handlePreloadError(item.reason);
+    }
+    return baseModule().catch(handlePreloadError);
+  });
+};
+export {
+  __vitePreload
+};

package/dist/src/Dashboard.js

@@ -0,0 +1,332 @@
+import DashboardHeader from "./Header.js";
+import DashboardGrid from "./DashboardGrid.js";
+import chartRequestScope from "./chart-request-scope.js";
+import component from "@epxing/core/src/mixins/component";
+import { pageGridMixin } from "./grid/mixins.js";
+import { buildThemeCss, buildThemeChartConfig } from "./theme-style.js";
+import { stackMobileLayout } from "./layout-util.js";
+import { indexDashboardItems, resolveMobileItem } from "./mobile-design.js";
+import { isLegacyConfig } from "./grid/model.js";
+import { mapState } from "vuex";
+import { resolveComponent, openBlock, createElementBlock, normalizeStyle, normalizeClass, createVNode, createElementVNode, withCtx, mergeProps, createCommentVNode } from "vue";
+/* empty css              */
+/* empty css               */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+function refesh() {
+  this.resolveChartRequestBroker().invalidate();
+  this._epxWalkChildren((child) => {
+    if (child.$options.$componentType === "component" && child.$refesh) child.$refesh();
+  });
+}
+const _sfc_main = {
+  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() {
+      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;
+      }
+      list.forEach((item) => {
+        if (item && item.i == null && item.id != null) item.i = item.id;
+      });
+      return list;
+    },
+    // 移动端组件样式：以 PC 组件 style 为基础，叠加 mItems 项里设置的移动端覆盖（空值/未设的键沿用 PC）
+    mobileComponentStyle() {
+      return (component2) => {
+        if (!this.$isMobile || this.mobileDashboard) return component2.style;
+        const pcItem = indexDashboardItems(this.$component.items || []).get(String(component2.id)) || {};
+        const override = {};
+        const cur = component2.style || {};
+        for (const k in cur) {
+          if (cur[k] !== void 0 && cur[k] !== null && cur[k] !== "") override[k] = cur[k];
+        }
+        return { ...pcItem.style || {}, ...override };
+      };
+    },
+    theme() {
+      const { theme } = this.$configs;
+      return theme;
+    },
+    colAttribute() {
+      return (component2 = {}) => {
+        const { xsspan = 24, ...other } = component2;
+        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 (component2) => {
+        const { layout } = this.$configs;
+        const { flex } = component2;
+        const compoentStyle = {};
+        if (layout === "flex" && flex) {
+          compoentStyle.flex = 1;
+        }
+        return compoentStyle;
+      };
+    },
+    scopeParams() {
+      const { globalScopeParams: configScopeParams = [] } = this.$configs;
+      const { scopeParams: queryScopeParams = [] } = this.$query;
+      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() {
+    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 : "";
+      provideData.pageMetaId = this.isPage ? this.$metaId || (this.page ? this.page.metaId : "") : null;
+    }
+    return provideData;
+  },
+  methods: {
+    getTheme() {
+      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 == null ? void 0 : data.data.CONTENT);
+        }
+        return {};
+      });
+    },
+    async setThemeStyle() {
+      const { themeStyles: configThemeStyles = {} } = this.$configs;
+      const activeThemeStyles = await this.getTheme();
+      const allThemeStyles = this.$_.assignWith(configThemeStyles, activeThemeStyles, (configThemeItem, themeItem) => {
+        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 == null ? void 0 : 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) * 1e3);
+    },
+    openFullScreen() {
+      if (this.$refs.dashboard.requestFullscreen) {
+        this.$refs.dashboard.requestFullscreen();
+      }
+    },
+    search(v) {
+      this.searchScopeParams = v;
+    }
+  },
+  created() {
+    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() {
+    window.removeEventListener("resize", this.updateBodyHeight);
+    this.removeThemeStyle();
+    if (this.refreshInterval) {
+      clearInterval(this.refreshInterval);
+      this.refreshInterval = null;
+    }
+  }
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "epx-dashboard__component-container"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_epx_dashboard_header = resolveComponent("epx-dashboard-header");
+  const _component_epx_component = resolveComponent("epx-component");
+  const _component_epx_dashboard_grid = resolveComponent("epx-dashboard-grid");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["epx-dashboard", "epx-dashboard-" + this.$component.id, "epx-dashboard--" + $options.theme, { "epx-dashboard--hidden-scroll-bar": _ctx.$configs.scrollBarHidden, "is-mobile-preview": _ctx.mobileDashboard }]),
+    style: normalizeStyle(_ctx.$component.style),
+    ref: "container"
+  }, [
+    createVNode(_component_epx_dashboard_header, {
+      onFullscreen: $options.openFullScreen,
+      title: _ctx.$component.title,
+      scopeFlag: _ctx.$configs.scopeFlag,
+      globalSearchFields: _ctx.$configs.globalSearchFields,
+      searchDefaultFlag: _ctx.$configs.searchDefaultFlag,
+      onSearch: $options.search
+    }, null, 8, ["onFullscreen", "title", "scopeFlag", "globalSearchFields", "searchDefaultFlag", "onSearch"]),
+    createElementVNode("div", {
+      ref: "dashboard",
+      class: normalizeClass(["epx-dashboard__container", { "epx-dashboard__container--mobile": _ctx.mobileDashboard }]),
+      style: normalizeStyle($options.dashboardStyle)
+    }, [
+      createVNode(_component_epx_dashboard_grid, {
+        items: $options.components,
+        grid: _ctx.gridParams,
+        "load-way": _ctx.loadWay,
+        "body-height": _ctx.bodyHeight
+      }, {
+        item: withCtx(({ item: component2 }) => [
+          component2.contentType ? (openBlock(), createElementBlock("div", _hoisted_1, [
+            createVNode(_component_epx_component, mergeProps(_ctx.isPage ? _ctx.$forwardAttrs(_ctx.$attrs) : {}, {
+              class: "epx-dashboard__component",
+              name: component2.contentType,
+              "is-dashboard": "",
+              "content-type": component2.contentType,
+              "comp-id": component2.id,
+              "comp-title": component2.title,
+              items: component2.items,
+              itemConfigs: _ctx.$component.itemConfigs,
+              "comp-style": $options.mobileComponentStyle(component2),
+              "comp-configs": component2.configs,
+              "comp-grid": _ctx.containerGrid(component2),
+              "chart-cache": _ctx.$configs.chartCache,
+              theme: $data.themeMode,
+              "mobile-appearance": _ctx.mobileRendering ? component2.mobileAppearance : void 0,
+              themeChartConfig: $options.themeChartConfig
+            }), null, 16, ["name", "content-type", "comp-id", "comp-title", "items", "itemConfigs", "comp-style", "comp-configs", "comp-grid", "chart-cache", "theme", "mobile-appearance", "themeChartConfig"])
+          ])) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["items", "grid", "load-way", "body-height"])
+    ], 6)
+  ], 6);
+}
+const Dashboard = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-2bc41af0"]]);
+export {
+  Dashboard as default
+};