@jzg223/design-runtime 0.0.1 → 0.1.0-rc.2

package/dist/board/design-board2.vue.js

@@ -0,0 +1,331 @@
+import PartNode from "./part-node.vue.js";
+import { parseConfig, STAGE_BG, gridAutoRows, DEFAULT_THEME, isMobileStack, visualOrder, partVisible } from "../board-engine/schema.js";
+import { DEFAULT_LOCALE, LOCALES, localizePart } from "../board-engine/i18n.js";
+import { fetchBoardInfo, boardAssetUrl, boardAssetBaseUrl, fetchBoardData, fetchBoardParams } from "./api.js";
+import { ensureThemeCss, ensureTheme } from "./theme-host.js";
+import { DESIGN_BOARD_CTX } from "./context.js";
+import { createBoardParams } from "../board-engine/params.js";
+import { createBoardDataHub } from "../board-engine/data-hub.js";
+import { createParamCatalog } from "../board-engine/param-catalog.js";
+const _sfc_main = {
+  name: "DesignBoard",
+  components: { PartNode },
+  // 每个看板实例一套运行时上下文（参数 / 参数目录 / 取数缓存），见 ./context.ts
+  provide() {
+    return { [DESIGN_BOARD_CTX]: this.boardCtx };
+  },
+  props: {
+    /**
+     * 看板编码。迁入 design-ui 后不再读 vue-router（宿主刻意不上 router），由宿主传入：
+     *   ① 新窗口预览/大屏：`board.html?type=board&action=view&code=xxx`（看板独立入口，无设计器外壳）
+     *      —— 经 BoardApp 解析后传 :code；用 index.html 开同样参数也能跑，只是左侧会多出设计端页签。
+     *   ② 语言：原 `?lang=` 由宿主解析成 :lang 传入（见 load() 里的语言优先级）。
+     */
+    code: { type: String, default: "" },
+    lang: { type: String, default: "" }
+  },
+  data() {
+    const params = createBoardParams();
+    const catalog = createParamCatalog({ fetchParams: fetchBoardParams });
+    const dataHub = createBoardDataHub({ fetchData: fetchBoardData, params });
+    return {
+      boardCtx: {
+        params,
+        catalog,
+        dataHub,
+        assetBaseUrl: boardAssetBaseUrl(),
+        locale: DEFAULT_LOCALE
+      },
+      /** 参数版本号：往下透传给 PartNode/PartRenderer（引擎 state 是普通对象，Vue 追踪不到） */
+      paramsVersion: 0,
+      board: {},
+      config: parseConfig(null),
+      loading: true,
+      errorMessage: "",
+      refreshKey: 0,
+      toolbarHidden: false,
+      scale: 1,
+      // 栅格模式下的视口宽度：用来判断是否窄屏（<768px 一律堆叠成单列）
+      viewportWidth: 0,
+      locale: DEFAULT_LOCALE,
+      locales: LOCALES,
+      resizeHandler: null
+    };
+  },
+  computed: {
+    visibleParts() {
+      void this.paramsVersion;
+      return this.config.parts.filter((p) => !p.hidden).filter((p) => partVisible(p, this.boardCtx.params.state.values)).map((p) => localizePart(p, this.locale));
+    },
+    /** 顶层部件（子级由 PartNode 递归渲染）。堆叠模式下按视觉顺序排，手机上读到的顺序才和大屏一致 */
+    topParts() {
+      const tops = this.visibleParts.filter((p) => !p.parentId);
+      return this.stacked ? visualOrder(tops) : tops;
+    },
+    /** 当前生效的看板参数（下钻/筛选写进去的），用于工具栏chip 与一键清空 */
+    activeParams() {
+      void this.paramsVersion;
+      const v = this.boardCtx.params.state.values || {};
+      return Object.keys(v).filter((k) => v[k] !== "" && v[k] !== null && v[k] !== void 0).map((k) => ({ code: k, value: v[k] }));
+    },
+    /**
+     * 看板参数版本号。
+     * ⚠️ 必须走 computed：paramState 是 import 进来的模块对象，
+     * `watch: { 'paramState.version'(){} }` 这种字符串路径是相对组件实例解析的，无效（踩过）。
+     */
+    paramVersion() {
+      return this.paramsVersion;
+    },
+    scaleMode() {
+      return this.config.page.scaleMode || "auto";
+    },
+    isGrid() {
+      return (this.config.page.layoutMode || "free") === "grid";
+    },
+    /** 窄屏（手机/竖屏）：栅格模式下一律堆叠成单列 */
+    narrow() {
+      return this.isGrid && this.viewportWidth > 0 && this.viewportWidth < 768;
+    },
+    /** 移动端策略自动/总是堆叠（'scale' = 老行为：整页等比缩放） */
+    stacked() {
+      return isMobileStack(this.config.page, this.viewportWidth);
+    },
+    /** 堆叠时整页走"单列 + 纵向流式"，与页面原本是 free 还是 grid 无关 */
+    useGridFlow() {
+      return this.isGrid || this.stacked;
+    },
+    /** 手机上工具栏压到左上角并放大点击区域（原来固定右上角 + 12px 字体，手机上难点也不显眼） */
+    isMobile() {
+      return this.viewportWidth > 0 && this.viewportWidth < 768;
+    },
+    scrollStyle() {
+      if (this.useGridFlow) {
+        return { overflow: "auto", display: "block" };
+      }
+      if (this.scaleMode === "none") {
+        return { overflow: "auto", display: "block" };
+      }
+      return { overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center" };
+    },
+    holderStyle() {
+      const p = this.config.page;
+      if (this.useGridFlow) {
+        return { width: "100%", minHeight: "100%", position: "relative" };
+      }
+      return { width: p.width * this.scale + "px", height: p.height * this.scale + "px", position: "relative", flex: "0 0 auto" };
+    },
+    /**
+     * 当前主题代号：挂在舞台元素上（`data-board-theme`），主题 CSS 的变量就是从这里生效的。
+     * 视觉用 page.theme（图表用 page.chartTheme，两者在设计器里是一起切的）。
+     */
+    themeCode() {
+      const p = this.config.page || {};
+      return p.theme || p.chartTheme || DEFAULT_THEME;
+    },
+    canvasStyle() {
+      const p = this.config.page;
+      const bgImg = boardAssetUrl(p.bgImage);
+      const bg = bgImg ? `url(${bgImg}) center/cover no-repeat, ${p.bgColor}` : p.bgColor;
+      const op = (p.opacity === void 0 ? 100 : p.opacity) / 100;
+      if (this.useGridFlow) {
+        const cols = this.stacked || this.narrow ? 1 : p.gridCols || 24;
+        const gap = p.gridGap === void 0 ? 12 : p.gridGap;
+        return {
+          width: "100%",
+          // 栅格内容比容器矮时必须铺满，否则底部会露出 stage 底色（实测固定行高时露 52px）
+          // 用 100% 而不是 100vh：独立窗口预览时两者等价（#app 是 100%），而在宿主页签里
+          // 100vh 会溢出（页签不是整个视口），改成百分比才跟着容器走。
+          minHeight: "100%",
+          display: "grid",
+          gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+          // 堆叠（手机）时行高必须跟着部件走：固定 60px 行高 + 320px 高的图表
+          // ⇒ 部件溢出自己的行、压到下一个部件上（实测截图里饼图盖住了下面的表格）
+          gridAutoRows: this.stacked ? "auto" : gridAutoRows(p),
+          gap: gap + "px",
+          // 手机上工具栏浮在顶部：给它留出高度，否则第一个部件会被压在工具栏下面
+          padding: (this.isMobile ? 44 : gap) + "px " + gap + "px " + gap + "px",
+          boxSizing: "border-box",
+          background: bg,
+          // 底纹（--brd-decor）由主题 CSS 给，画在 .board-canvas::before 上：
+          // 直接叠进 background 会被 page.bgColor 这个"最后写入的颜色层"盖掉
+          opacity: op,
+          position: "relative"
+        };
+      }
+      return {
+        width: p.width + "px",
+        height: p.height + "px",
+        transform: `scale(${this.scale})`,
+        transformOrigin: "0 0",
+        position: "absolute",
+        left: 0,
+        top: 0,
+        overflow: "hidden",
+        background: bg,
+        opacity: op
+      };
+    },
+    stageStyle() {
+      const p = this.config.page;
+      return { background: this.scaleMode === "none" ? p.bgColor : "var(--brd-bg, " + STAGE_BG + ")" };
+    }
+  },
+  created() {
+    this.unsubscribeParams = this.boardCtx.params.subscribe(() => {
+      this.paramsVersion += 1;
+    });
+    this.load();
+  },
+  watch: {
+    // 关键：宿主只换 :code（同一实例复用时）Vue 不会再走 created，
+    // 不监听就会"切了看板还是显示上一个"（实测踩到）。
+    code(val) {
+      if (val && val !== this.board.boardCode) {
+        this.load();
+      }
+    },
+    /** 看板参数一变就把"当前页"写回 URL（只写配置声明过的编码） */
+    paramVersion() {
+      this.syncUrlParams();
+    }
+  },
+  mounted() {
+    this.onResize();
+    this.resizeHandler = () => this.onResize();
+    window.addEventListener("resize", this.resizeHandler);
+    document.addEventListener("fullscreenchange", this.onResize);
+  },
+  beforeUnmount() {
+    window.removeEventListener("resize", this.resizeHandler);
+    document.removeEventListener("fullscreenchange", this.onResize);
+    if (this.unsubscribeParams) this.unsubscribeParams();
+  },
+  methods: {
+    onResize() {
+      if (typeof window === "undefined") return;
+      this.viewportWidth = window.innerWidth || (this.$refs.stage ? this.$refs.stage.clientWidth : 0);
+      this.fit();
+    },
+    async load() {
+      const code = this.code;
+      this.loading = true;
+      try {
+        const info = code ? await fetchBoardInfo(code) : null;
+        if (info) {
+          this.board = info;
+          const cfg = parseConfig(info.configJson, {
+            width: info.pageWidth,
+            height: info.pageHeight
+          });
+          const page = cfg.page || {};
+          await Promise.all([ensureThemeCss(page.chartTheme), ensureThemeCss(page.theme)]);
+          ensureTheme(page.chartTheme);
+          ensureTheme(page.theme);
+          this.config = cfg;
+          this.applyUrlParams();
+          const q = { lang: this.lang || "" };
+          const fallback = this.config.page && this.config.page.locale || DEFAULT_LOCALE;
+          this.locale = q.lang && LOCALES.some((l) => l.code === q.lang) ? q.lang : fallback;
+          const ids = (this.config.parts || []).map((p) => p.data && p.data.setId).filter(Boolean);
+          this.boardCtx.catalog.load(ids).catch(() => {
+          });
+          this.$nextTick(this.onResize);
+        } else {
+          this.errorMessage = "看板不存在或没有访问权限";
+        }
+      } catch (e) {
+        this.errorMessage = e.message || String(e);
+      } finally {
+        this.loading = false;
+      }
+    },
+    /** 按窗口尺寸算缩放比；scaleMode=none 或栅格/堆叠时不用缩放（靠 CSS 自适应） */
+    fit() {
+      if (this.scaleMode === "none" || this.useGridFlow) {
+        this.scale = 1;
+        return;
+      }
+      const el = this.$refs.stage;
+      if (!el) return;
+      const p = this.config.page;
+      const s = Math.min(el.clientWidth / p.width, el.clientHeight / p.height);
+      this.scale = this.scaleMode === "ratio" ? Math.min(1, s) : s;
+    },
+    refresh() {
+      this.boardCtx.dataHub.clear();
+      this.refreshKey += 1;
+    },
+    onLocaleChange(code) {
+      this.locale = code;
+    },
+    /** 清掉一个参数（下钻后想回到全量时用） */
+    clearParam(code) {
+      this.boardCtx.params.set(code, "");
+    },
+    /**
+     * URL 参数 → 看板参数（深链）。
+     * ⚠ 只认**配置里声明过**的参数编码（导航的 paramCode、部件的 visibleWhen.param、
+     *   筛选方案的 paramCode、数据集声明的参数），其余一律忽略 ——
+     *   否则会把 ?type=/?code=/?lang= 这些**宿主参数**也灌进看板参数里。
+     */
+    navParamCodes() {
+      const codes = /* @__PURE__ */ new Set();
+      for (const p of this.config.parts || []) {
+        const v = p.view || {};
+        if (p.type === "nav" && v.paramCode) codes.add(v.paramCode);
+        if (p.type === "filter" && v.paramCode) codes.add(v.paramCode);
+        if (v.visibleWhen && v.visibleWhen.param) codes.add(v.visibleWhen.param);
+        if (p.data && p.data.params) Object.keys(p.data.params).forEach((k) => codes.add(k));
+      }
+      return codes;
+    },
+    applyUrlParams() {
+      const sp = new URLSearchParams(location.search);
+      let n = 0;
+      for (const code of this.navParamCodes()) {
+        const v = sp.get(code);
+        if (v !== null && v !== "") {
+          this.boardCtx.params.set(code, v);
+          n += 1;
+        }
+      }
+      if (n > 0) this.boardCtx.dataHub.clear();
+    },
+    /** 导航参数写回 URL（replaceState，不产生历史记录）：这样当前页可刷新、可分享 */
+    syncUrlParams() {
+      const sp = new URLSearchParams(location.search);
+      let changed = false;
+      for (const code of this.navParamCodes()) {
+        const cur = this.boardCtx.params.state.values[code];
+        const s = cur === void 0 || cur === null ? "" : String(cur);
+        if (s && sp.get(code) !== s) {
+          sp.set(code, s);
+          changed = true;
+        } else if (!s && sp.has(code)) {
+          sp.delete(code);
+          changed = true;
+        }
+      }
+      if (!changed) return;
+      const qs = sp.toString();
+      history.replaceState(null, "", `${location.pathname}${qs ? "?" + qs : ""}${location.hash || ""}`);
+    },
+    clearAllParams() {
+      this.boardCtx.params.reset();
+      this.boardCtx.dataHub.clear();
+      this.refreshKey += 1;
+    },
+    toggleFullscreen() {
+      const el = this.$refs.stage;
+      if (!document.fullscreenElement) {
+        if (el.requestFullscreen) el.requestFullscreen();
+      } else {
+        document.exitFullscreen();
+      }
+      this.$nextTick(this.fit);
+    }
+  }
+};
+export {
+  _sfc_main as default
+};

package/dist/board/echarts.js

@@ -0,0 +1,40 @@
+import { BarChart, LineChart, PieChart, FunnelChart, RadarChart, ScatterChart, GaugeChart } from "echarts/charts";
+import { GridComponent, LegendComponent, RadarComponent, TitleComponent, TooltipComponent } from "echarts/components";
+import * as echartsCore from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+const CHART_TYPE_MODULES = {
+  bar: "BarChart",
+  hbar: "BarChart",
+  line: "LineChart",
+  area: "LineChart",
+  pie: "PieChart",
+  donut: "PieChart",
+  rose: "PieChart",
+  funnel: "FunnelChart",
+  pyramid: "FunnelChart",
+  radar: "RadarChart",
+  scatter: "ScatterChart",
+  gauge: "GaugeChart",
+  ring: "GaugeChart"
+};
+echartsCore.use([
+  BarChart,
+  LineChart,
+  PieChart,
+  FunnelChart,
+  RadarChart,
+  ScatterChart,
+  GaugeChart,
+  GridComponent,
+  LegendComponent,
+  RadarComponent,
+  TitleComponent,
+  TooltipComponent,
+  CanvasRenderer
+]);
+const echarts = echartsCore;
+export {
+  CHART_TYPE_MODULES,
+  echartsCore as default,
+  echarts
+};

package/dist/board/part-node.vue.js

@@ -0,0 +1,63 @@
+import _sfc_main from "./part-node2.vue.js";
+import { resolveComponent, openBlock, createElementBlock, withModifiers, normalizeStyle, normalizeClass, createVNode, mergeProps, withCtx, Fragment, renderList, createBlock, renderSlot } from "vue";
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_part_node = resolveComponent("part-node", true);
+  const _component_part_renderer = resolveComponent("part-renderer");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["part", [$props.extraClass, $options.stateClass]]),
+    style: normalizeStyle($options.nodeStyle),
+    onMousedown: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.$emit("node-mousedown", $event, $props.part), ["stop"]))
+  }, [
+    createVNode(_component_part_renderer, mergeProps({
+      part: $props.part,
+      "theme-code": $props.themeCode,
+      "refresh-key": $props.refreshKey,
+      "params-version": $props.paramsVersion,
+      "grid-options": $options.gridOptions,
+      "children-count": $options.childList.length,
+      "tab-child-counts": $options.tabChildCounts,
+      design: $props.design,
+      active: !!$props.activeId && $props.activeId === $props.part.id,
+      stacked: $props.stacked,
+      narrow: $props.narrow || $props.stacked
+    }, _ctx.$attrs), {
+      children: withCtx(({ tab }) => [
+        (openBlock(true), createElementBlock(Fragment, null, renderList($options.childListForTab(tab), (c) => {
+          return openBlock(), createBlock(_component_part_node, mergeProps({
+            key: c.id,
+            part: c,
+            page: $props.page,
+            "all-parts": $props.allParts,
+            "theme-code": $props.themeCode,
+            "refresh-key": $props.refreshKey,
+            "params-version": $props.paramsVersion,
+            design: $props.design,
+            narrow: $props.narrow,
+            stacked: $props.stacked,
+            depth: $props.depth + 1,
+            "active-id": $props.activeId,
+            "in-grid": $props.inGrid
+          }, { ref_for: true }, _ctx.$attrs), {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", {
+                part: c,
+                depth: $props.depth + 1
+              })
+            ]),
+            _: 2
+          }, 1040, ["part", "page", "all-parts", "theme-code", "refresh-key", "params-version", "design", "narrow", "stacked", "depth", "active-id", "in-grid"]);
+        }), 128))
+      ]),
+      _: 3
+    }, 16, ["part", "theme-code", "refresh-key", "params-version", "grid-options", "children-count", "tab-child-counts", "design", "active", "stacked", "narrow"]),
+    renderSlot(_ctx.$slots, "default", {
+      part: $props.part,
+      depth: $props.depth
+    })
+  ], 38);
+}
+const PartNode = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  PartNode as default
+};

package/dist/board/part-node2.vue.js

@@ -0,0 +1,125 @@
+import PartRenderer from "./part-renderer.vue.js";
+import { childLayoutOf, stackPartStyle, partStyle, gridPartStyle, containerGrid, stackMinHeight, childParts, partVisible } from "../board-engine/schema.js";
+import { DESIGN_BOARD_CTX } from "./context.js";
+const _sfc_main = {
+  name: "PartNode",
+  components: { PartRenderer },
+  // 看板上下文（参数 / 参数目录 / 取数）：每个 DesignBoard 实例一份
+  inject: { boardCtx: { from: DESIGN_BOARD_CTX, default: null } },
+  props: {
+    part: { type: Object, required: true },
+    /** 整页配置（取 column/rowHeight/gap 与 layoutMode） */
+    page: { type: Object, default: () => ({}) },
+    /** 完整的部件扁平数组：子级要从这里按 parentId 找（运行时传的是已本地化的副本） */
+    allParts: { type: Array, default: () => [] },
+    themeCode: { type: String, default: "tech-blue" },
+    refreshKey: { type: Number, default: 0 },
+    /** 看板参数版本号（往下透传：参数一变，子级过滤条件要重算） */
+    paramsVersion: { type: Number, default: 0 },
+    /** 额外 class（运行时用来加 .view-part，设计器用来加 active/locked 等） */
+    extraClass: { type: [String, Array, Object], default: "" },
+    /** 设计器里为 true（空容器的引导文案只在设计器显示） */
+    design: { type: Boolean, default: false },
+    /** 窄屏（<768px）：栅格部件与容器内子级一律堆成单列 */
+    narrow: { type: Boolean, default: false },
+    /** 堆叠单列（移动端）：自由定位的部件也从"绝对定位"切成"纵向流式" */
+    stacked: { type: Boolean, default: false },
+    /** 当前选中的部件 id（设计器用；子级也要能高亮，所以由本组件自己算 class） */
+    activeId: { type: String, default: "" },
+    /** 设计器处于栅格模式 */
+    inGrid: { type: Boolean, default: false },
+    /** 嵌套层级（顶层 0）。设计器用它把"类型徽标"按层级错开，免得被父容器的徽标盖住 */
+    depth: { type: Number, default: 0 }
+  },
+  computed: {
+    /**
+     * 设计器需要的状态 class。
+     * ⚠️ 必须在这里按"自己的 part"算：以前是把 class 从设计器的 v-for 传进来，
+     * 而那段 v-for 只遍历顶层 ⇒ 子部件永远拿不到 active（选中了却没有手柄/高亮）——踩过。
+     */
+    stateClass() {
+      return {
+        active: !!this.activeId && this.part.id === this.activeId,
+        locked: !!this.part.locked,
+        ghost: !!this.part.hidden,
+        "in-grid": !!this.inGrid
+      };
+    },
+    isChild() {
+      return !!(this.part.parentId || "");
+    },
+    gridOptions() {
+      return {
+        cols: this.page && this.page.gridCols || 24,
+        rowHeight: this.page && this.page.gridRowHeight || 60,
+        gap: this.page && this.page.gridGap !== void 0 ? this.page.gridGap : 12,
+        // 容器内子栅格与整页共用"行高自增"开关
+        autoHeight: !!(this.page && this.page.gridAutoHeight)
+      };
+    },
+    childList() {
+      const list = childParts(this.allParts, this.part.id);
+      void this.paramsVersion;
+      if (this.design) return list;
+      return list.filter((c) => partVisible(c, this.ctx().params.state.values));
+    },
+    /** 每个页签各有几个子级（tab容器用它决定"显示子级还是显示原来的文字"） */
+    tabChildCounts() {
+      const map = {};
+      this.childList.forEach((c) => {
+        const t = c.tabIndex || 0;
+        map[t] = (map[t] || 0) + 1;
+      });
+      return map;
+    },
+    nodeStyle() {
+      if (this.stacked && this.isFreePositioned) {
+        return stackPartStyle(this.part, this.childList.length);
+      }
+      let st;
+      if (this.isChild) {
+        if (this.parentIsFree) {
+          st = partStyle(this.part);
+        } else {
+          st = gridPartStyle(this.part, containerGrid(this.page));
+        }
+      } else {
+        st = (this.page.layoutMode || "free") === "grid" ? gridPartStyle(this.part, this.page) : partStyle(this.part);
+      }
+      if (this.narrow && !this.isFreePositioned) {
+        st.gridColumn = "1 / -1";
+        st.gridRow = "auto";
+        st.minHeight = stackMinHeight(this.part.type) + "px";
+      }
+      return st;
+    },
+    /** 是否用 x/y 绝对定位 */
+    isFreePositioned() {
+      if (this.isChild) return this.parentIsFree;
+      return (this.page.layoutMode || "free") !== "grid";
+    },
+    parentIsFree() {
+      return childLayoutOf(this.parentPart) === "free";
+    },
+    parentPart() {
+      if (!this.isChild) return null;
+      return this.allParts.find((p) => p.id === this.part.parentId) || null;
+    }
+  },
+  methods: {
+    /** 上下文（缺失直接抛，静默降级只会更难查） */
+    ctx() {
+      if (!this.boardCtx) {
+        throw new Error("[design-board] PartNode 必须放在 <DesignBoard> 内部使用");
+      }
+      return this.boardCtx;
+    },
+    childListForTab(tab) {
+      if (tab === void 0 || tab === null) return this.childList;
+      return this.childList.filter((c) => (c.tabIndex || 0) === tab);
+    }
+  }
+};
+export {
+  _sfc_main as default
+};