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

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

@@ -0,0 +1,884 @@
+import BoardChart from "./board-chart.vue.js";
+import { fmtNum, buildChartOption } from "../board-engine/chart-option.js";
+import { textStyle, measureLabel, partVisualStyle, CARD_TYPES, isContainer, decorOf, borderPresetOf, childRowsOf, titleStyleOf, titleInsetOf, titleOffsetOf, titleReserveOf, paddingOf, themeOf } from "../board-engine/schema.js";
+import { boardAssetUrl } from "./api.js";
+import { datavDecorationComponent, datavBorderComponent } from "./datav-map.js";
+import { DESIGN_BOARD_CTX } from "./context.js";
+const _sfc_main = {
+  name: "PartRenderer",
+  components: { BoardChart },
+  // 看板上下文（参数 / 参数目录 / 取数 / 素材前缀）。design-ui 版本用模块级单例，
+  // 运行端可能一页多个看板 ⇒ 改成 provide/inject，每个 DesignBoard 实例一份。
+  inject: { boardCtx: { from: DESIGN_BOARD_CTX, default: null } },
+  props: {
+    part: { type: Object, required: true },
+    themeCode: { type: String, default: "tech-blue" },
+    refreshKey: { type: Number, default: 0 },
+    /** 看板参数版本号（引擎的参数 state 是普通对象，Vue 追踪不到 ⇒ 由 DesignBoard 往下传） */
+    paramsVersion: { type: Number, default: 0 },
+    /** 容器内子栅格的几何（列数/行高/间距，来自整页设置） */
+    gridOptions: { type: Object, default: () => ({ cols: 24, rowHeight: 60, gap: 12 }) },
+    /** 本部件直接子级的总数（决定容器显示子级还是显示空提示） */
+    childrenCount: { type: Number, default: 0 },
+    /** 每个页签各有几个子级，形如 {0:2, 2:1} */
+    tabChildCounts: { type: Object, default: () => ({}) },
+    /** 设计器里为 true：空容器的引导文案只在设计器显示，不泄漏到运行时大屏 */
+    design: { type: Boolean, default: false },
+    /** 设计器里"当前选中的就是这个部件"：选中时把容器的**内容区**画成虚线框，
+     *  这样"子级有没有超出内容区"一眼可见（用户反馈过"text 的区域好像超出 container 了"）。 */
+    active: { type: Boolean, default: false },
+    /** 移动端堆叠：容器内的子部件区改成纵向流式（否则 inset:0 的绝对定位区在 auto 高度下会塌成 0） */
+    stacked: { type: Boolean, default: false },
+    /** 窄屏：图例挪到底部、饼图居中收窄（图表 option 用） */
+    narrow: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      result: null,
+      loading: false,
+      carouselIndex: 0,
+      activeTab: 0,
+      timer: null,
+      shrunkFont: 0,
+      // DataV 尺寸同步用的观察器（见 bindDatavResize 的注释）
+      dvRO: null,
+      dvROEl: null
+    };
+  },
+  computed: {
+    theme() {
+      return themeOf(this.themeCode);
+    },
+    /** tab容器当前页签里有没有子部件（有就显示子栅格、没有就回落成原来的文字内容） */
+    tabHasChildren() {
+      return (this.tabChildCounts[this.activeTab] || 0) > 0;
+    },
+    /** 本容器的子级是否用绝对定位摆放（容器设置里的 childLayout='free'） */
+    childrenFree() {
+      return !!(this.part.view && this.part.view.childLayout === "free");
+    },
+    /** 本容器的内边距（部件级可配）。⚠️ 必须与 schema.paddingOf 用同一个来源：
+     *  内框宽度、拖入容器的列计算都用它，写死 10 会让"按落点算列"整体偏一列。 */
+    childPad() {
+      return paddingOf(this.part);
+    },
+    /** 标题要占的面板内高度（内容区顶部让位）：bar 恒定 34，chip 挪进面板内时按实际高度算 */
+    titleBarH() {
+      return titleReserveOf(this.part);
+    },
+    /**
+     * 胶囊标题的内联位置：
+     *   纵向 = titleOffsetOf（相对面板上沿的偏移，0 = 贴面板内上沿）
+     *   横向 = 容器内边距 + titleInsetOf（默认再多缩 8px，即与内容左边缘略错开一点）
+     * 标题压在切角标记上没关系：标题 z-index 1、切角 z-index 0，观感是"标签切断框线"。
+     */
+    titleOffsetStyle() {
+      if (this.titleStyle === "bar") return {};
+      return {
+        top: -titleOffsetOf(this.part) + "px",
+        left: Math.max(0, this.childPad + titleInsetOf(this.part)) + "px"
+      };
+    },
+    /** 容器标题样式：chip（胶囊骑框线，默认）/ bar（框内标题条，见 TITLE_BAR_HEIGHT） */
+    titleStyle() {
+      return titleStyleOf(this.part);
+    },
+    /** 子栅格行高是否"撑满容器内区"（见 schema.childRowsOf 的说明） */
+    childRowsFill() {
+      return childRowsOf(this.part) === "fill";
+    },
+    /** 容器边框样式预设（四角括号 / 切角描边 / 描边流光 / DataV 边框 / 无） */
+    borderPreset() {
+      return borderPresetOf(this.part);
+    },
+    /** DataV 边框组件（borderPreset==='datav' 时用），编号取自 view.datavBorder */
+    datavBorder() {
+      return datavBorderComponent(this.part.view && this.part.view.datavBorder);
+    },
+    /** DataV 装饰组件（decoration 部件用），编号取自 view.datavDecoration */
+    datavDecoration() {
+      return datavDecorationComponent(this.part.view && this.part.view.datavDecoration);
+    },
+    /**
+     * DataV **边框**的配色（容器边框预设=datav 时用）。取自主题 `--brd-frame-1 / --brd-frame-2`。
+     *
+     * ⚠️ 第二个颜色默认是 **transparent**，这是刻意的：读了 DataV borderBox 的源码，
+     *    `color[0]` 画整圈细框（1px），`color[1]` 画的是**沿边流动的光点**（3px + 径向发光遮罩）。
+     *    给它一个不透明色，任何时候都有一条边比其余三条又粗又亮 ⇒ 用户反馈"四条边的颜色不一样"。
+     *    主题里把 `--brd-frame-2` 写回颜色就能把那条流光要回来（同色流光＝写 var(--brd-accent)）。
+     */
+    datavColors() {
+      const t = this.theme || {};
+      const f = t.frameColors;
+      if (Array.isArray(f) && f.length >= 2 && f[0]) return [f[0], f[1] || "transparent"];
+      const c = t.colors && t.colors[0] || "#4d8dff";
+      return [c, "transparent"];
+    },
+    /**
+     * DataV **装饰部件**（decoration 1–12）的配色：另一对变量 `--brd-deco-1 / --brd-deco-2`。
+     * 不能跟边框共用 —— 边框那边第二个颜色是 transparent（关掉流光），装饰要是也 transparent 就缺一半。
+     */
+    datavDecoColors() {
+      const t = this.theme || {};
+      const d = t.decoColors;
+      if (Array.isArray(d) && d.length >= 2 && d[0]) return [d[0], d[1] || d[0]];
+      const cs = t.colors || [];
+      return [cs[0] || "#4d8dff", cs[1] || cs[0] || "#22d3ee"];
+    },
+    /** 子级栅格：列宽用 1fr ⇒ 容器一变宽子级就跟着重排，这就是"容器内子栅格"的意义 */
+    childGridStyle() {
+      const g = this.gridOptions || {};
+      const rh = g.rowHeight || 60;
+      const barH = this.titleBarH;
+      if (this.stacked) {
+        return {
+          position: "relative",
+          inset: "auto",
+          height: "auto",
+          // padding 不写在元素上：由 CSS 用 .part-body 上的 --brd-child-pad / --brd-title-reserve 出
+          // （配置仍是唯一真源，见 schema.paddingOf；见 .part-children.is-stacked 规则）
+          display: "flex",
+          flexDirection: "column",
+          gap: (g.gap === void 0 ? 10 : g.gap) + "px",
+          overflow: "visible"
+        };
+      }
+      const ovf = this.design ? "visible" : "auto";
+      if (this.childrenFree) return { overflow: ovf, top: barH ? barH + "px" : 0 };
+      return {
+        display: "grid",
+        gridTemplateColumns: `repeat(${g.cols || 24}, minmax(0, 1fr))`,
+        // 行高两种口径（部件设置 → 容器 → 子栅格行高）：
+        //   fill  = 按容器内区均分（1fr）⇒ 子级跨满时正好填满，内边距纯粹是"留白"（1:1 包裹用这个）
+        //   fixed = 行高按整页值，但**封顶**在整页行高、空间不够时允许收缩：minmax(0, 行高)
+        //
+        // ⚠️ 这里**不能**用整页那套 `minmax(行高, auto)`：那个"最小值=行高"意味着行**永远不小于** 60px，
+        //    而容器的内容区 = 容器高 − 2×内边距 − 标题让位，天生比"同样行数的整页高度"小 20~50px
+        //    ⇒ 子级跨满时必然超出内容区，运行时就冒出容器内部的滚动条（用户："一个 container 装了 3 个
+        //    指标卡，预览的时候出现了滚动条"）。改成 minmax(0, 行高)：装得下就按整页行高，装不下就等比缩一点。
+        gridAutoRows: this.childRowsFill ? "minmax(0, 1fr)" : "minmax(0, " + rh + "px)",
+        gap: (g.gap === void 0 ? 12 : g.gap) + "px",
+        // 内边距不写在元素上（见 .part-children 规则：读 .part-body 上的 --brd-child-pad）；
+        // 标题条样式额外让出 TITLE_BAR_HEIGHT，用 top 让位（那是"定位"，不是 padding）
+        top: barH ? barH + "px" : 0,
+        overflow: ovf
+      };
+    },
+    hasData() {
+      return !!(this.result && this.result.rows && this.result.rows.length);
+    },
+    /**
+     * 根容器要不要放开裁切。
+     * 静态边框/自由容器的标题是**骑在框线上、画在框外面**的（top:-11px），
+     * 而 .part-body 默认 overflow:hidden ⇒ 标题上半截会被切掉（用户反馈"卡片标题没显示全"）。
+     * 这两个类型的内部内容是 .part-children（自己带 overflow:auto），放开父级不会让内容溢出。
+     */
+    bodyClass() {
+      const cls = [];
+      if (this.part.type === "border" || this.part.type === "container") cls.push("ov-visible");
+      if (CARD_TYPES.indexOf(this.part.type) >= 0) cls.push("has-body-pad");
+      if (isContainer(this.part.type)) {
+        cls.push("is-panel");
+        const d = decorOf(this.part);
+        if (d.glass) cls.push("dec-glass");
+        const preset = borderPresetOf(this.part);
+        if (preset !== "none") cls.push("bd-" + preset);
+      }
+      return cls;
+    },
+    /** 指标卡：把"对齐"落到横向排布上（.kpi 是纵向 flex，align-items 才是横向对齐；
+     *  以前 text.align 对指标卡同样完全不生效 —— 与文本部件同一个根因） */
+    kpiBoxStyle() {
+      const align = this.part.text && this.part.text.align || "left";
+      const map = { left: "flex-start", center: "center", right: "flex-end" };
+      return { alignItems: map[align] || "flex-start", textAlign: align };
+    },
+    bodyStyle() {
+      return Object.assign({
+        // ⚠️ padding 不在这里写（用户："part-body 样式里的 padding:0px 不用加了，放到 theme 目录里"）：
+        //    内容部件的内边距由主题变量 --brd-body-pad 给（见 .part-body 的样式规则）；
+        //    容器的内边距仍是它自己的配置（--brd-child-pad），所以容器不吃这一层，免得两层叠加。
+        //
+        // 容器"内边距 / 标题让位"以 CSS 变量下发：.part-children 的样式在**样式表里**读它们，
+        // 不把 padding 写进元素的内联 style。配置仍是唯一真源（schema.paddingOf / titleReserveOf）。
+        "--brd-child-pad": this.childPad + "px",
+        "--brd-title-reserve": this.titleBarH + "px"
+      }, partVisualStyle(this.part));
+    },
+    subStyle() {
+      return {
+        color: this.theme.subText,
+        fontSize: Math.max(12, (this.part.text && this.part.text.fontSize ? this.part.text.fontSize : 14) - 2) + "px",
+        letterSpacing: "0.06em"
+      };
+    },
+    valueStyle() {
+      const t = this.part.text || {};
+      return {
+        color: t.color || this.theme.colors[0],
+        fontFamily: t.fontFamily || "微软雅黑",
+        fontWeight: 600,
+        fontVariantNumeric: "tabular-nums"
+      };
+    },
+    chartOption() {
+      if (this.part.type !== "chart" || !this.hasData) return null;
+      return buildChartOption(this.result.rows, this.result.columns, this.part, this.themeCode, { narrow: this.narrow });
+    },
+    kpiTitle() {
+      return this.part.view && this.part.view.title || this.part.name;
+    },
+    kpiValue() {
+      return this.measureText(0);
+    },
+    decimalFormat() {
+      const p = this.part.view && this.part.view.precision;
+      const thousand = this.part.view && this.part.view.thousand;
+      let f = "";
+      if (p) {
+        f = ".";
+        for (let i = 0; i < p; i++) f += "0";
+      }
+      return (thousand ? "," : "") + f;
+    },
+    tableColumns() {
+      const cols = this.result && this.result.columns || [];
+      const ms = this.part.data && this.part.data.measures || [];
+      if (!ms.length) return cols.map((c) => ({ ...c, label: c.alias || c.name }));
+      return cols.map((c) => {
+        const m = ms.find((x) => (x.alias || x.field) === c.name);
+        const label = m ? measureLabel(m, c.alias) : c.alias || c.name;
+        return Object.assign({}, c, { label });
+      });
+    },
+    tableRows() {
+      return this.result && this.result.rows || [];
+    },
+    /** 明细表：可排序 / 可拖列宽 / 显示合计（都可关） */
+    isSortable() {
+      return this.part.view.sortable !== false;
+    },
+    isResizable() {
+      return this.part.view.resizable !== false;
+    },
+    showSummary() {
+      return !!this.part.view.showSummary;
+    },
+    hasColWidths() {
+      return Object.keys(this.part.view.colWidths || {}).length > 0;
+    },
+    /**
+     * 表格宽度（只对"有拖过列宽"的明细表生效）。
+     *
+     * ⚠️ 原来的 CSS 是 `.fixed { width: max-content; min-width: 100% }` —— 表格按**内容最大宽度**排版，
+     * 于是只要"纵向滚动条"占掉十几像素，max-content 就比可视宽度大一点点 ⇒ **凭空冒出一条横向滚动条**
+     * （表格明明塞得下；用户反馈"这个应该没有 scroll-x"）。
+     *
+     * 现在：
+     *  - 所有列都有显式宽度（用户逐列拖过）⇒ width = max(100%, 各列合计)，合计真的超了才横向滚动；
+     *  - 还有"自动列"（只拖了其中几列）⇒ 交给浏览器按 100% 排（显式宽度仍然作为该列的最小宽度生效，
+     *    真放不下时表格会自己撑破容器、滚动条照旧出现）。
+     */
+    tableStyle() {
+      const cw = this.part.view && this.part.view.colWidths;
+      if (!cw) return {};
+      const cols = this.tableColumns || [];
+      const widths = cols.map((c) => Number(cw[c.name]) || 0);
+      if (!cols.length || widths.some((w) => !w)) return {};
+      const total = widths.reduce((a, b) => a + b, 0);
+      return { width: `max(100%, ${total}px)` };
+    },
+    sortField() {
+      return this.part.data && this.part.data.orderField || "";
+    },
+    // ---------------- 交叉表 ----------------
+    /** 交叉表用的度量列表（多度量：每个度量一组数值列） */
+    crossMeasures() {
+      const d = this.part.data || {};
+      return (d.measures || []).filter((m) => m && m.field).map((m) => {
+        const key = m.alias || m.field;
+        const c = this.tableColumns.find((x) => x.name === key);
+        return { key, name: measureLabel(m, c && (c.alias || c.name) || key) };
+      });
+    },
+    /**
+     * 交叉表的**整份视图数据**：表头行 / 表体行 / 表尾单元格，一次算完。
+     *
+     * ⚠️ 为什么要合成一个 computed：之前拆成 crossHeadRows / crossBodyRows / crossFootCells 三个 computed，
+     * 它们都依赖另一个 computed（cross），结果出现了"cross 已经是最新（28 行 6 列）、
+     * 但表头 computed 还停在空数据那一版"的缓存不失效问题 —— 表头永远只有 2 列、$forceUpdate 都救不回来。
+     * 合成一个、直接从 result/part 推，就不存在链式 computed 的缓存问题。
+     */
+    crossView() {
+      const ms = this.crossMeasures;
+      const showTotal = this.part.view.showTotal !== false;
+      const d = this.part.data || {};
+      const rows = this.tableRows;
+      const rowKey = this.part.view.rowDim || (d.dims || [])[0] || "";
+      const colKey = this.part.view.colDim || (d.dims || [])[1] || "";
+      const m0 = (d.measures || [])[0];
+      const mKey = m0 ? m0.alias || m0.field : "";
+      const empty = { headRows: [], bodyRows: [], footCells: [], footTotal: "", rowKey: "", rowField: "", colCount: 0 };
+      if (!rowKey || !colKey || !mKey) return empty;
+      const aliasOf = (name) => {
+        const c = this.tableColumns.find((x) => x.name === name);
+        return c && (c.label || c.alias || c.name) || name;
+      };
+      const val = (r, k) => {
+        if (r[k] !== void 0) return r[k];
+        const hit = Object.keys(r).find((x) => x.toLowerCase() === String(k).toLowerCase());
+        return hit ? r[hit] : null;
+      };
+      const multi = ms.length > 0;
+      const keys = multi ? ms.map((s) => s.key) : [mKey];
+      const zero = () => {
+        if (!multi) return 0;
+        const o = {};
+        keys.forEach((k) => {
+          o[k] = 0;
+        });
+        return o;
+      };
+      const num = (r, k) => {
+        const n = Number(val(r, k));
+        return Number.isNaN(n) ? 0 : n;
+      };
+      const agg = (cur, r) => {
+        if (multi) {
+          keys.forEach((k) => {
+            cur[k] += num(r, k);
+          });
+        } else {
+          cur += num(r, mKey);
+        }
+        return cur;
+      };
+      const map = {};
+      const rowTotal = {};
+      const colTotal = {};
+      const cols = [];
+      const rowNames = [];
+      let grand = zero();
+      rows.forEach((r) => {
+        const rk = String(val(r, rowKey) === null ? "(空)" : val(r, rowKey));
+        const ck = String(val(r, colKey) === null ? "(空)" : val(r, colKey));
+        if (rowNames.indexOf(rk) < 0) {
+          rowNames.push(rk);
+          map[rk] = {};
+          rowTotal[rk] = zero();
+        }
+        if (cols.indexOf(ck) < 0) {
+          cols.push(ck);
+          colTotal[ck] = zero();
+        }
+        if (!map[rk][ck]) map[rk][ck] = zero();
+        map[rk][ck] = agg(map[rk][ck], r);
+        rowTotal[rk] = agg(rowTotal[rk], r);
+        colTotal[ck] = agg(colTotal[ck], r);
+        grand = agg(grand, r);
+      });
+      let headRows;
+      if (!multi) {
+        const row = [{ text: aliasOf(rowKey), cls: "corner" }];
+        cols.forEach((x) => row.push({ text: x, align: "right" }));
+        if (showTotal) row.push({ text: "合计", cls: "corner" });
+        headRows = [row];
+      } else {
+        const r1 = [{ text: aliasOf(rowKey), cls: "corner", rowspan: 2 }];
+        cols.forEach((x) => r1.push({ text: x, cls: "group-head", colspan: ms.length }));
+        if (showTotal) r1.push({ text: "合计", cls: "corner", rowspan: 2 });
+        const r2 = [];
+        cols.forEach((x) => ms.forEach((m) => r2.push({ text: m.name, align: "right" })));
+        headRows = [r1, r2];
+      }
+      const cellAt = (rk, ck) => {
+        const cell = map[rk] && map[rk][ck];
+        return cell === void 0 ? zero() : cell;
+      };
+      const fmtAgg = (v) => multi ? keys.map((k) => this.fmt(v[k])).join(" / ") : this.fmt(v);
+      const bodyRows = rowNames.map((name) => {
+        const cells = [];
+        cols.forEach((col) => {
+          const cell = cellAt(name, col);
+          if (multi) ms.forEach((m) => cells.push(this.fmt(cell[m.key])));
+          else cells.push(this.fmt(cell));
+        });
+        return { name, cells, total: fmtAgg(rowTotal[name]) };
+      });
+      const footCells = [];
+      cols.forEach((col) => {
+        const cell = colTotal[col] === void 0 ? zero() : colTotal[col];
+        if (multi) ms.forEach((m) => footCells.push(this.fmt(cell[m.key])));
+        else footCells.push(this.fmt(cell));
+      });
+      return {
+        headRows,
+        bodyRows,
+        footCells,
+        footTotal: fmtAgg(grand),
+        rowKey: aliasOf(rowKey),
+        rowField: rowKey,
+        colCount: cols.length,
+        rows: rowNames,
+        cols,
+        map,
+        rowTotal,
+        colTotal,
+        grand,
+        multi
+      };
+    },
+    // ---------------- 其它类型 ----------------
+    tabs() {
+      return this.part.view && this.part.view.tabs || [];
+    },
+    tabContents() {
+      return this.part.view && this.part.view.contents || [];
+    },
+    carouselImages() {
+      return (this.part.view && this.part.view.images || []).filter((x) => x);
+    },
+    marqueeStyle() {
+      const speed = this.part.view && this.part.view.speed || 12;
+      return { animationDuration: speed + "s", color: this.part.text && this.part.text.color || this.theme.text };
+    },
+    progressValue() {
+      if (this.part.view && this.part.view.useData && this.hasData) {
+        const v = Number(this.measureText(0).toString().replace(/[,%]/g, ""));
+        if (!Number.isNaN(v)) return v <= 1 ? Math.round(v * 100) : Math.round(v);
+      }
+      return Number(this.part.view && this.part.view.percent || 0);
+    },
+    /** 筛选部件"生效配置"：类型与可选值优先取数据集声明，部件自己的只作覆盖 */
+    filterCfg() {
+      return this.ctx().catalog.effectiveFilter(this.part.view);
+    },
+    currentParam() {
+      const code = this.part.view && this.part.view.paramCode;
+      return code && this.ctx().params.state.values[code] || "";
+    },
+    /** 导航项（过滤掉空项；value 缺省时回落成 label） */
+    navItems() {
+      const v = this.part.view || {};
+      const items = Array.isArray(v.items) ? v.items : [];
+      return items.filter((it) => it && (it.label || it.value)).map((it) => ({
+        label: String(it.label || it.value),
+        value: it.value === void 0 || it.value === "" ? String(it.label || "") : String(it.value),
+        code: it.code || "",
+        reset: it.reset,
+        x: it.x,
+        y: it.y,
+        w: it.w,
+        h: it.h,
+        align: it.align
+      }));
+    },
+    /** 绝对定位模式：每个菜单项自己带 x/y/w/h（设计稿里菜单项是**沿斜切板排布**的，
+         等宽等距的流式布局对不上，所以给 nav 加了这种布局） */
+    navAbsolute() {
+      return (this.part.view || {}).layout === "absolute";
+    },
+    /**
+     * 导航的"当前选中值"：
+     *   运行时 —— 以**真实参数值**为准（刷新/深链/别处改参数都会跟着动）
+     *   设计器 —— 以 view.active 为准，这样第 2 页的部件也能被编辑（设计器不过滤 visibleWhen）
+     */
+    navActiveValue() {
+      const v = this.part.view || {};
+      if (this.design) return v.active === void 0 || v.active === null ? "" : String(v.active);
+      const code = v.paramCode || "nav";
+      const cur = this.ctx().params.state.values[code];
+      return cur === void 0 || cur === null ? "" : String(cur);
+    },
+    /** 导航布局：间距与项尺寸走 CSS 变量，主题负责长相 */
+    navStyle() {
+      const v = this.part.view || {};
+      const st = textStyle(this.part, this.theme);
+      const base = { fontSize: st.fontSize, fontFamily: st.fontFamily, fontWeight: st.fontWeight, fontStyle: st.fontStyle, color: st.color, letterSpacing: st.letterSpacing, textShadow: st.textShadow };
+      if (this.navAbsolute) return base;
+      return {
+        ...base,
+        gap: (v.gap === void 0 ? 8 : v.gap) + "px",
+        "--nav-item-w": (v.itemW || 120) + "px",
+        "--nav-item-h": (v.itemH || 34) + "px"
+      };
+    },
+    textOverflow() {
+      return this.part.view && this.part.view.overflow || "wrap";
+    },
+    /**
+     * 文本部件的内联样式：**必须把 textStyle(part, theme) 应用上**。
+     * 以前这里只返回"自动缩小字号"时的 fontSize，于是部件设置里的
+     * 字体/字号/加粗/斜体/颜色/对齐**全都没生效**（对齐是用户报的）。
+     * 另外 .part-text 是 flex（为了垂直居中），所以横向对齐除了 textAlign
+     * 还要给 justifyContent —— flex 容器里 text-align 管不到 flex item 的位置。
+     */
+    textBoxStyle() {
+      const st = textStyle(this.part, this.theme);
+      if (this.textOverflow === "shrink" && this.shrunkFont) st.fontSize = this.shrunkFont + "px";
+      st.justifyContent = { left: "flex-start", center: "center", right: "flex-end" }[this.part.text && this.part.text.align || "left"] || "flex-start";
+      return st;
+    },
+    /**
+     * 看板参数版本号（必须走 computed）。
+     * ⚠️ 踩过的坑：直接写 `watch: { 'paramState.version'(){} }` 是无效的 ——
+     * Vue 的字符串路径是相对**组件实例**解析的，而 paramState 是 import 进来的模块对象，
+     * 解析不到 → 永远不触发（表现为"筛选点了没反应"）。
+     */
+    paramVersion() {
+      void this.paramsVersion;
+      return this.ctx().params.state.version;
+    }
+  },
+  watch: {
+    "part.data": {
+      deep: true,
+      handler() {
+        this.load();
+      }
+    },
+    refreshKey() {
+      this.load(true);
+    },
+    // 看板级参数变化 → 重新取数（筛选方案驱动）
+    paramVersion() {
+      this.load(true);
+    },
+    "part.view.autoplay"() {
+      this.startCarousel();
+    }
+  },
+  created() {
+    this.load().catch((error) => {
+      console.error("[design-board] PartRenderer 初始化失败：", error);
+    });
+  },
+  mounted() {
+    this.startCarousel();
+    this.fitText();
+    this.bindDatavResize();
+  },
+  updated() {
+    this.fitText();
+    this.bindDatavResize();
+  },
+  beforeUnmount() {
+    if (this.timer) clearInterval(this.timer);
+    this.unbindDatavResize();
+  },
+  methods: {
+    /** 上下文（缺失直接抛：静默降级只会让"数据不出来"更难查） */
+    ctx() {
+      if (!this.boardCtx) {
+        throw new Error("[design-board] PartRenderer 必须放在 <DesignBoard> 内部使用");
+      }
+      return this.boardCtx;
+    },
+    /**
+     * DataV 边框/装饰的**尺寸同步**（实测踩到的坑，2026-09）。
+     *
+     * DataV 的 "自适应" 其实很弱：`lib/util/observerDomResize` 是 **MutationObserver 盯自身 `style` 属性**，
+     * 外加一个 window resize 监听（`lib/mixin/autoResize.js`）。而我们的部件框是**父节点改宽高**
+     * （`.part` 的行内 width/height，DataV 根节点只有 class 给的 `inset:0`），它自己的 `style` 属性从头到尾不变
+     * ⇒ 拖拽缩放/栅格重排/移动端堆叠之后，边框**不重量**：实测部件宽从 340 改成 200，根节点跟到 200，
+     * 但 svg 的 width 还停在 340（边框和框错位，看起来像"边框画歪了"）。
+     *
+     * 修法：自己挂一个真 ResizeObserver（和 BoardChart.vue 里图表用的是同一套做法），
+     * 尺寸变了就调 DataV 组件暴露出来的 `initWH(true)` 让它重新量一次（mixin 的方法，实例上直接可调）。
+     * 只在"量到的尺寸和它自己记的不一样"时调用，避免 svg 重画反过来触发观察器形成回环。
+     */
+    bindDatavResize() {
+      if (typeof ResizeObserver === "undefined") return;
+      const comp = this.$refs.datavFrame || this.$refs.datavDeco;
+      const el = comp && (comp.$el || comp);
+      if (!el || el === this.dvROEl) return;
+      this.unbindDatavResize();
+      this.dvROEl = el;
+      this.dvRO = new ResizeObserver(() => {
+        const c2 = this.$refs.datavFrame || this.$refs.datavDeco;
+        if (!c2 || typeof c2.initWH !== "function") return;
+        if (el.clientWidth === c2.width && el.clientHeight === c2.height) return;
+        c2.initWH(true);
+      });
+      this.dvRO.observe(el);
+      const c = this.$refs.datavFrame || this.$refs.datavDeco;
+      if (c && typeof c.initWH === "function" && (!c.width || !c.height)) c.initWH(true);
+    },
+    unbindDatavResize() {
+      if (this.dvRO) this.dvRO.disconnect();
+      this.dvRO = null;
+      this.dvROEl = null;
+    },
+    /** 配置里的 src → 可直接渲染的地址（asset: 引用在这里才拼成当前部署的 URL，见 engine/asset.js） */
+    mediaSrc(v) {
+      return boardAssetUrl(v);
+    },
+    /** 表格某列的宽度（colgroup 用）。⚠️ 必须放 methods：模板里是 colWidthOf(c) 这种调用写法，
+        放 computed 会变成"不是函数"，渲染直接抛错 ⇒ DOM 停在旧状态（这个错我犯了两次，见文件里另一处注释）
+        优先用用户拖过的宽度；否则数值列给一个固定窄宽（数字本来就不长），**文本列给 auto**（平分剩余空间） */
+    colWidthOf(col) {
+      const w = (this.part.view.colWidths || {})[col.name];
+      if (w) return w + "px";
+      return this.isDim(col) ? "auto" : "110px";
+    },
+    async load(force) {
+      if (!this.part.data || !this.part.data.setId) {
+        this.result = null;
+        return;
+      }
+      this.loading = true;
+      try {
+        this.result = await this.ctx().dataHub.fetch(this.part, force);
+      } finally {
+        this.loading = false;
+      }
+    },
+    isDim(col) {
+      return col.isDimension !== false;
+    },
+    // ---------------- 明细表：排序 / 列宽 / 合计 / 导出 CSV ----------------
+    thStyle(col) {
+      const w = (this.part.view.colWidths || {})[col.name];
+      const st = { textAlign: "center", position: "relative" };
+      if (w) {
+        st.width = w + "px";
+        st.minWidth = w + "px";
+        st.maxWidth = w + "px";
+      }
+      return st;
+    },
+    /** 点表头：切换排序字段/方向。写回部件配置（走服务端 orderField，大数据量也正确）并立刻重查 */
+    onSort(col) {
+      if (!this.isSortable) return;
+      const d = this.part.data || (this.part.data = {});
+      if (d.orderField === col.name) {
+        d.orderDesc = !d.orderDesc;
+      } else {
+        d.orderField = col.name;
+        d.orderDesc = true;
+      }
+      this.$emit("changed");
+      this.load(true);
+    },
+    /**
+     * 拖表头右边缘调列宽，存进部件配置（跟着看板一起保存）。
+     * ⚠️ 必须用 $set 整体替换 colWidths：colWidths 在老配置里通常还不存在，
+     * 直接 `view.colWidths = {...}` 是"加新 key"，Vue 2 检测不到 ⇒ colgroup 不渲染、
+     * 表现成"拖了列宽但表格没反应"（我在这上面栽过）。
+     */
+    startColResize(e, col) {
+      if (!this.isResizable) return;
+      const startX = e.clientX;
+      const th = e.target.parentElement;
+      const startW = th.getBoundingClientRect().width;
+      const move = (ev) => {
+        const w = Math.max(40, Math.round(startW + (ev.clientX - startX)));
+        this.part.view.colWidths = Object.assign({}, this.part.view.colWidths || {}, { [col.name]: w });
+      };
+      const up = () => {
+        document.removeEventListener("mousemove", move);
+        document.removeEventListener("mouseup", up);
+        this.$emit("changed");
+      };
+      document.addEventListener("mousemove", move);
+      document.addEventListener("mouseup", up);
+    },
+    /** 合计行：数字列求和，非数字列留空 */
+    summaryValue(col) {
+      let sum = 0;
+      let hit = false;
+      this.tableRows.forEach((r) => {
+        const k = Object.keys(r).find((x) => x.toLowerCase() === String(col.name).toLowerCase());
+        if (!k) return;
+        const n = Number(r[k]);
+        if (Number.isNaN(n)) return;
+        sum += n;
+        hit = true;
+      });
+      return hit ? sum : null;
+    },
+    summaryText(col) {
+      const v = this.summaryValue(col);
+      if (v === null) return "";
+      return col.numFormat ? fmtNum(v, col.numFormat) : String(Math.round(v * 100) / 100);
+    },
+    /** 导出当前渲染的数据为 CSV（带 BOM，Excel 打开不乱码） */
+    exportCsv() {
+      const isCross = this.part.type === "crossTable";
+      const lines = [];
+      if (isCross) {
+        const head = [this.crossView.rowKey];
+        if (this.crossMeasures.length) {
+          this.crossView.cols.forEach((c) => this.crossMeasures.forEach((m) => head.push(c + "/" + m.name)));
+        } else {
+          this.crossView.cols.forEach((c) => head.push(c));
+        }
+        if (this.part.view.showTotal !== false) head.push("合计");
+        lines.push(head);
+        this.crossView.bodyRows.forEach((r) => {
+          const row = [r.name].concat(r.cells);
+          if (this.part.view.showTotal !== false) row.push(r.total);
+          lines.push(row);
+        });
+      } else {
+        lines.push(this.tableColumns.map((c) => c.label || c.alias || c.name));
+        this.tableRows.forEach((r) => lines.push(this.tableColumns.map((c) => this.cellText(r, c))));
+        if (this.showSummary) lines.push(this.tableColumns.map((c, i) => i === 0 ? "合计" : this.summaryText(c)));
+      }
+      const csv = lines.map((row) => row.map((v) => {
+        const s = v === null || v === void 0 ? "" : String(v);
+        return /[",\n]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
+      }).join(",")).join("\r\n");
+      const blob = new Blob(["\uFEFF" + csv], { type: "text/csv;charset=utf-8" });
+      const a = document.createElement("a");
+      a.href = URL.createObjectURL(blob);
+      a.download = (this.part.name || "data") + ".csv";
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(a.href);
+      this.$emit("exported", this.part.name);
+    },
+    // ---------------- 下钻：把维度值写进看板参数，引用该参数的部件一起刷新 ----------------
+    onDrill(field, value) {
+      if (!field || value === void 0 || value === null || value === "") return;
+      if (!(this.part.view && this.part.view.drillDown)) return;
+      this.ctx().params.set(field, String(value));
+      this.$emit("drilled", { field, value: String(value) });
+    },
+    onCellClick(row, col) {
+      if (!this.isDim(col)) return;
+      const k = Object.keys(row).find((x) => x.toLowerCase() === String(col.name).toLowerCase());
+      this.onDrill(col.name, k ? row[k] : null);
+    },
+    /** 图表点击下钻：类目名就是维度值（饼图用 name，直角坐标系用类目名） */
+    onChartClick(p) {
+      if (!(this.part.view && this.part.view.drillDown)) return;
+      const dim = this.part.data && this.part.data.dims && this.part.data.dims[0] || "";
+      if (!dim || !p) return;
+      let v = p.name;
+      if (v === void 0 || v === null || v === "") v = p.data && p.data.name;
+      this.onDrill(dim, v);
+    },
+    cellText(row, col) {
+      const hit = Object.keys(row).find((k) => k.toLowerCase() === String(col.name).toLowerCase());
+      const v = hit ? row[hit] : null;
+      if (v === null || v === void 0) return "";
+      const n = Number(v);
+      if (!Number.isNaN(n) && col.numFormat) return fmtNum(n, col.numFormat);
+      return String(v);
+    },
+    measureText(index) {
+      if (!this.hasData) return "--";
+      const m = (this.part.data.measures || [])[0];
+      if (!m) return "--";
+      const key = m.alias || m.field;
+      const row = this.result.rows[index || 0];
+      const hit = Object.keys(row).find((k) => k.toLowerCase() === String(key).toLowerCase());
+      const raw = hit ? row[hit] : null;
+      const col = (this.result.columns || []).find((c) => c.name === key);
+      const n = Number(raw);
+      if (Number.isNaN(n)) return raw === null || raw === void 0 ? "--" : String(raw);
+      return fmtNum(n, col && col.numFormat || this.decimalFormat);
+    },
+    fmt(v) {
+      if (v === null || v === void 0 || v === "") return "";
+      return fmtNum(Number(v), "");
+    },
+    startCarousel() {
+      if (this.timer) clearInterval(this.timer);
+      this.timer = null;
+      const v = this.part.view || {};
+      if (this.part.type !== "carousel" || v.autoplay === false || this.carouselImages.length < 2) return;
+      const ms = Math.max(1, Number(v.interval || 3)) * 1e3;
+      this.timer = setInterval(() => {
+        this.carouselIndex = (this.carouselIndex + 1) % this.carouselImages.length;
+      }, ms);
+    },
+    onButtonClick() {
+      const href = this.part.view && this.part.view.href;
+      if (href) window.open(href, this.part.view.target || "_blank");
+      else this.$emit("action", "button-click", this.part);
+    },
+    isNavActive(item) {
+      const cur = this.navActiveValue;
+      if (!cur) return false;
+      return cur === item.value || !!item.code && cur === String(item.code);
+    },
+    /**
+     * 导航点击：
+     *   mode=param（默认，主模型）—— 只写看板参数 ⇒ 各部件按 view.visibleWhen 显隐、并按参数重新取数
+     *   mode=code                 —— 跳另一个看板（同窗）
+     *   mode=both                 —— 先写参数再跳（目标看板可带同一参数继续用）
+     * item.reset：切页时顺带清掉的业务参数（如 ['ageRange']）——导航参数本身不清。
+     */
+    /** 绝对布局下：项的坐标以**部件盒子左上角**为原点（设计稿坐标 - 部件 x/y 由调用方算好）
+     *  ⚠ 必须放 methods：Vue 2 的 computed 里定义成函数会被当 getter，`vm.navItemStyle(it)`
+     *  会报 "is not a function" → 整个 nav 部件的渲染直接抛错，DOM 里只剩一个空注释。 */
+    navItemStyle(it) {
+      if (!this.navAbsolute) return null;
+      const s = {
+        left: (it.x || 0) + "px",
+        top: (it.y || 0) + "px"
+      };
+      if (it.w) s.width = it.w + "px";
+      if (it.h) s.height = it.h + "px";
+      if (it.align) s.justifyContent = it.align;
+      return s;
+    },
+    onNavClick(item) {
+      const v = this.part.view || {};
+      const mode = v.mode || "param";
+      if (mode === "param" || mode === "both") {
+        this.ctx().params.set(v.paramCode || "nav", item.value);
+        if (Array.isArray(item.reset)) item.reset.forEach((c) => c && this.ctx().params.set(c, ""));
+      }
+      if ((mode === "code" || mode === "both") && item.code) {
+        window.open(`${location.pathname}?type=board&action=view&code=${encodeURIComponent(item.code)}`, "_self");
+      }
+      this.$emit("action", "nav-click", { part: this.part, item });
+    },
+    onFilterChange(val) {
+      const code = this.part.view && this.part.view.paramCode;
+      if (!code) return;
+      this.ctx().params.set(code, val);
+    },
+    /**
+     * 文本"自动缩小字号"：从设定字号起逐级降，直到内容放得下（或到下限 10px）。
+     * 为什么要这么做：绝对/栅格布局里文本高度是给定的，而多语言（英文比中文长）和长文案
+     * 会让文字溢出被静默裁掉。缩小字号是比裁切更可接受的降级。
+     *
+     * ⚠️ 两个必须遵守的点（否则会死循环/结果错）：
+     *  1) 每轮先把字号写到内层元素上再测量 —— 直接读会被"上一次渲染"的字号干扰；
+     *  2) 只有结果真的变了才写 shrunkFont —— 无条件先赋值 base 会让
+     *     updated() → fitText() → 改数据 → updated() 无限来回（base ⇄ 缩小值）。
+     */
+    fitText() {
+      if (this.part.type !== "text" || this.textOverflow !== "shrink") {
+        if (this.shrunkFont) this.shrunkFont = 0;
+        return;
+      }
+      this.$nextTick(() => {
+        const box = this.$el;
+        const inner = this.$refs.textInner;
+        if (!box || !inner) return;
+        const base = this.part.text && this.part.text.fontSize || 14;
+        let size = base;
+        for (let i = 0; i < 20 && size > 10; i++) {
+          inner.style.fontSize = size + "px";
+          if (inner.scrollHeight <= box.clientHeight && inner.scrollWidth <= box.clientWidth) break;
+          size -= 1;
+        }
+        inner.style.fontSize = "";
+        if (this.shrunkFont !== size) this.shrunkFont = size;
+      });
+    },
+    /** 全部生效参数（设计器/子组件用） */
+    allParams() {
+      return this.ctx().params.all();
+    }
+  }
+};
+export {
+  _sfc_main as default
+};